文章目录
- Feather Icons：一套干净利落的开源图标库
- 为什么选 Feather
- 用起来有多简单
- 实际开发中的用法
- 不足的地方
- 适合什么场景
Feather Icons：一套干净利落的开源图标库
做前端开发的人都知道，图标这东西看着小，用起来麻烦。要么风格不统一，要么文件太大，要么授权不清楚。Feather Icons 是个专门解决这些问题的开源项目，GitHub 上 2.5 万 Star，口碑一直不错。
Feather 是一套 SVG 图标集合，每个图标都在 24x24 的网格上设计，风格简洁，线条统一。项目由 Cole Bemis 维护，MIT 协议，商用完全没问题。
为什么选 Feather
市面上图标库很多，Feather 能站稳脚跟有几个原因。
首先是够轻。整套库打包后体积很小，不会给项目增加负担。现在很多图标库动不动几百个图标，但实际用到的可能就几十个，Feather 的数量控制得刚好，280 多个常用图标，覆盖日常开发绑绑有余。
其次是 SVG 格式的优势。矢量图不会失真，随便缩放都清晰。而且 SVG 可以直接用 CSS 控制颜色、大小，改起来方便。不像 icon font 那样有各种兼容问题。
再就是设计质量。每个图标都是手工绘制的，线条粗细一致，视觉上很协调。不会出现有的图标粗有的图标细这种情况。
用起来有多简单
Feather 提供了好几种使用方式，前端开发者基本都能找到适合自己的。
最简单的方式是 CDN 引入。一行 script 标签搞定，然后在 HTML 里写个<i><scriptsrc="https://unpkg.com/feather-icons"></script><idata-feather="circle"></i><script>feather.replace();</script>
如果项目用 npm 管理依赖，直接npm install feather-icons，然后在代码里 require 或 import。Node 环境下可以用feather.icons.x.toSvg()生成 SVG 字符串，灵活性很高。
还支持 SVG sprite 方式，把所有图标合成一个文件，通过<use>标签引用。这种方式适合需要大量图标的项目，能减少 HTTP 请求。
实际开发中的用法
我在几个项目里用过 Feather，说说实际感受。
最方便的是feather.replace()这个方法。它会自动找到页面上所有带data-feather属性的元素，替换成对应的 SVG。批量处理图标的时候特别省事，不用一个一个手动替换。
如果需要自定义样式，可以在调用时传参数。比如改颜色、改线条粗细，都能通过 attrs 对象控制。也可以直接用 CSS 覆盖，因为生成的 SVG 有统一的 class。
feather.replace({ 'stroke-width': 1, color: 'red' });和 React、Vue 这些框架配合也没问题。社区有对应的封装库，比如 react-feather、vue-feather-icons，直接当组件用。
不足的地方
Feather 也不是没缺点。
图标数量偏少。280 多个图标对小项目够用，但大型应用可能不够。如果需要社交媒体图标、品牌图标，得找别的库补充。官方倒是列了一些第三方扩展，比如 feathericons.dev 提供了 30 多个品牌图标。
没有官方的 Figma 源文件可以编辑。虽然有个组件库文件，但只能查看，不能直接改。想定制图标的话得自己用 SVG 编辑器。
另外项目更新频率不算高。核心功能稳定，但新图标加得慢。不过对一个成熟项目来说，这也不算大问题。
适合什么场景
如果你的项目需要一套风格统一、体积小、使用方便的图标库，Feather 值得试试。特别适合后台管理系统、工具类应用这种对图标数量要求不高，但对一致性要求高的场景。
做原型的时候也挺好用，CDN 引入零配置，几分钟就能把图标搞定。
对于需要大量图标的项目，可以把 Feather 作为基础，再搭配其他图标库补充。
总之这是个完成度很高的工具，设计质量在线，使用门槛低，开源协议友好。不花哨，但实用。
eather 作为基础，再搭配其他图标库补充。
总之这是个完成度很高的工具，设计质量在线，使用门槛低，开源协议友好。不花哨，但实用。
