图标使用

简介

学习了一下图标知识

信息收集

• html 默认字体 16px，所以 1rem 就是 16px
• 图标有 16/32   24/48 64等等其他尺寸
  • google，ic 是 24
  • iconpark 是 48
  • monotone 做 logo 是 64
• icones站点 站点可以通过查看 svg symbol 里的 viewbox，知道这个图标是 16/32 还是 24,48 的。
• 如果混用，等比缩放后可能有线条的粗细不一样的问题，尽量不能混用

使用方式

1. 通过设置 size 来确定图标的大小。这样即使缩放会模糊，但效果也统一，不会觉得奇怪，方便调整
2. 统一选用 24。因为 google 的图标是 24，图标数量多。常年稳定更新。 且 tailwind 也采用 24 https://tailwindcss.com/blog/introducing-heroicons
3. 如果 google 里面没有，那么就全局搜图标，24 大小即可
4. 样式选择
   1. Outline 更常用作常规图标，所以默认。回忆一下遇到的 loading 界面，search 框，顶部返回按钮，wot-ui 内置图标。 常见的 filled 图标效果都被 div 加背景色替代了。
   2. filled/solid 用来强调，例如你选中了某个 tabbar，这个 tabbar 图标变成填充的。 适合做 tab 图标，菜单图标，logo 图标