做前端开发的时候,找图标这件事真的很浪费时间。你需要这个按钮用Material Design风格的图标,那个导航用Font Awesome的,还要自己装包、配路径、调大小……一套流程走下来半小时就没了。Iconify把市面上几乎所有主流图标集都整合到了一个网站里,搜一搜、点一下、复制代码,搞定。
有多少图标
Iconify目前收录了超过20万个图标,来自150多个开源图标集。Material Design Icons、Font Awesome、Lucide、Heroicons、Tabler Icons、Phosphor Icons这些主流的图标集全部包含在内。基本上你能在其他地方找到的开源图标,这里都有。而且每天还在持续更新,新的图标集和图标会不断被收录进来。
怎么使用
有几种使用方式。最简单的是直接在网页上搜索你需要的图标,找到后复制SVG代码粘贴到你的项目里。如果你用的是React、Vue或者Svelte等前端框架,Iconify有对应的组件库,安装后通过组件名就能直接引用图标,和用本地图标文件一样方便。还有一种方式是用Iconify的API服务,通过URL直接引用图标,不用下载任何文件,适合快速原型开发。
图标质量
因为收录的都是各图标集的原版图标,所以质量由各图标集本身决定。像Material Design Icons、Lucide这些知名图标集的设计质量都很高,线条统一、风格协调。但也有一些小众图标集的质量参差不齐,使用前最好预览一下效果。Iconify的搜索功能做得不错,支持关键词搜索,也能按图标集筛选,找起图标来比较高效。
离线使用和自托管
如果你不想依赖Iconify的CDN服务,它也支持离线使用。你可以用iconify-icon的Web Component方案,把需要的图标打包到项目里。或者用Iconify的SVG Framework,在构建时把图标转成本地SVG文件。不过这些方案配置起来比直接用CDN要复杂一些,适合对性能和离线访问有要求的项目。
和其他图标工具比
和Font Awesome官网相比,Iconify最大的优势是图标来源更丰富,不局限于某一个图标集。和IconFont(阿里巴巴的图标库)相比,Iconify的国际化程度更高,英文关键词搜索更准确。不过IconFont在中文图标和国内设计风格方面有一些独家的图标集,这一点Iconify没有。两者可以配合使用。
建议你直接试试在Iconify上搜你平时最常用的几个图标关键词,看看效果如何。如果你经常需要在不同图标集之间切换,Iconify能帮你省下不少找图标的时间。
