Feather 是一个简洁优美的开源图标集合。每个图标都设计在 24x24 的网格上,强调简洁、一致性和灵活性。
npm install feather-icons
使用这个 CodePen 模板 开始在浏览器中使用 Feather 进行原型设计。
或者将以下代码片段复制并粘贴到一个空白的 html
文件中。
<!DOCTYPE html> <html lang="zh"> <title></title> <script src="https://unpkg.com/feather-icons"></script> <body> <!-- 示例图标 --> <i data-feather="circle"></i> <script> feather.replace(); </script> </body> </html>
Feather 的核心是一个 SVG 文件集合。这意味着你可以像使用 SVG 一样使用 Feather 图标(例如 img
、background-image
、inline
、object
、embed
、iframe
)。这里有一篇有用的文章详细介绍了 SVG 在网络上的多种使用方式:SVG on the Web – Implementation Options
以下是使用 Feather 的其他方法。
[!注意] 如果你打算使用 CDN 来使用 Feather,可以跳过这个安装步骤。
使用 npm 安装。
npm install feather-icons --save
或者直接将 feather.js
或 feather.min.js
复制到你的项目目录中。你不需要同时使用 feather.js
和 feather.min.js
。
使用 <script>
标签引入 feather.js
或 feather.min.js
:
<script src="path/to/dist/feather.js"></script>
[!注意] >
feather.js
和feather.min.js
位于 npm 包的dist
目录中。
或者从 CDN 提供商加载脚本:
<!-- 选择其中一个 --> <script src="https://unpkg.com/feather-icons"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
引入脚本后,feather
将作为全局变量可用。
要在页面上使用图标,给元素添加一个带有图标名称的 data-feather
属性:
<i data-feather="circle"></i>