《GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是 Feather 是一组简单漂亮的开源图标，每个图标都设计在 24x24 网格上，强调简单性、一致性和灵活性。
快速开始
在浏览器中使用 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>更多：https://feathericons.com/