在前端开发中，Icon 是我们经常使用的一种 UI 元素。而 @svg-icons/feather 便是一个非常优秀的可以用于前端开发的 Icon 库，它提供了大量的 SVG 图标，本文将详细介绍如何使用它。
1. 安装
我们可以使用 npm 命令来安装这个包：
npm install @svg-icons/feather
这个包被发布到了 npm 资源库，所以可以很方便的安装。
2. 使用
在介绍如何使用这个包之前，我们需要了解以下一些概念：
- SVG：可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维矢量图形的语言。
- Icon：图标，通常是一个简单的形状或者图案，用于表示某种意义，如添加、删除、编辑等。
@svg-icons/feather 包提供了一些有意义的、可用于开发的 Icon。
2.1 引入
根据使用情况可以选择不同的引入方式：
直接引入：
<script src="node_modules/@svg-icons/feather/dist/feather.js"></script>
使用 ES6 模块化引入：
import * as feather from 'node_modules/@svg-icons/feather/dist/feather.esm.js';
也可以根据需要，只引入需要的 Icon。
2.2 使用
使用方式非常简单，只需要在 HTML 中引入 SVG 标签，然后添加相应的 class，即可显示对应的 Icon。
<svg class="icon">
<use xlink:href="node_modules/@svg-icons/feather/dist/icons/home.svg#home" />
</svg>其中，Icon 的 class 很容易区分：feather icon--{icon-name}
例如显示 home 这个 Icon 的 class 为 feather icon--home。
可以使用 JavaScript 的方式来修改 Icon 的样式：
const icon = document.querySelector('.icon');
icon.setAttribute('stroke', 'red');3. 示例
3.1 基本使用
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- -------------
------- ---------------------------------------------------------------
-------
------
---- -------------
---- --------------------------------------------------------------------- --
------
--------
------------------
---------
-------
-------3.2 修改样式
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- -------------
------- ---------------------------------------------------------------
-------
------
---- -------------
---- --------------------------------------------------------------------- --
------
--------
----- ---- - --------------------------------
--------------------------- -------
---------
-------
-------4. 总结
通过本文，我们介绍了如何使用 @svg-icons/feather 包，并且提供了一些示例代码。同时，我们也了解了如何引入 Icon 和修改样式，这些常见的使用方式可以帮助我们更好地开发 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f24ff093b0ab45f74a8b947