《GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是 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>
更多：https://feathericons.com/
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。