前言：
此时姐妹们对“github图标”可能比较珍视，姐妹们都想要剖析一些“github图标”的相关知识。那么小编也在网上汇集了一些对于“github图标””的相关资讯，希望各位老铁们能喜欢，同学们一起来了解一下吧！《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/
本站所有软件信息均由用户上传发布，版权归原著所有。如有侵权/违规内容，敬请来信告知邮箱：764327034@qq.com，我们将及时撤销！ 转载请注明出处：https://www.ssyg068.com/kuaixun/352.html
微信扫一扫 
支付宝扫一扫 
发表回复
评论列表（0条）