本期推荐的是 Feather 是一组简单漂亮的开源图标，每个图标都设计在 24×24 网格上，强调简单性、一致性和灵活性。
快速开始
在浏览器中使用 Feather 开始原型设计，或者将以下代码片段复制并粘贴到一个空白html文件中。
<!DOCTYPE html><html lang="en"> <title></title> <script src="https://unpkg.com/feather-icons"></script> <body> <!-- example icon --> <i data-feather="circle"></i> <script> feather.replace() </script> </body></html>使用
1.安装
注意：如果您打算将 Feather 与 CDN 一起使用，则可以跳过此安装步骤。
使用npm安装。
npm install feather-icons --save或者只是复制feather.js或feather.min.js到您的项目目录中。feather.js和都不需要feather.min.js。
2. 包括
包括feather.js或feather.min.js带有<script>标签：
< script src =" path/to/dist/feather.js " > </ script >注意： feather.js和feather.min.js位于distnpm 包的目录中。
或者从 CDN 提供商加载脚本：
<!-- choose one --><script src="https://unpkg.com/feather-icons"></script><script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>包含脚本后，feather将可用作全局变量。
3.使用
要在页面上使用图标，请将data-feather带有图标名称的属性添加到元素：
<i data-feather="circle"></i>在feathericons.com 上查看完整的图标列表。
4.更换
调用feather.replace()方法：
<script> feather.replace()</script>所有具有data-feather属性的元素都将被替换为与其data-feather属性值相对应的 SVG 标记。有关更多信息，请参阅API 参考feather.replace()。
SVG 精灵
1.安装
注意：如果您打算将 Feather 与 CDN 一起使用，则可以跳过此安装步骤。
使用npm安装。
npm install feather-icons --save或者只是复制feather-sprite.svg到您的项目目录中。
2. 使用
在您的页面上添加一个带有以下标记的图标：
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <use href="path/to/feather-sprite.svg#circle"/></svg>注意： circle在上面的例子中可以用任何有效的图标名称替换。在feathericons.com 上查看完整的图标名称列表。
但是，可以使用简单的 CSS 类来简化此标记，以避免在图标之间重复 SVG 属性：
.feather { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none;}<svg class="feather"> <use href="path/to/dist/feather-sprite.svg#circle"/></svg>
