前言
在前端开发中，使用 SVG 可以以更小的代码量实现更好的图形展示效果。而 feather icons 库提供了一系列的高质量图标，能够满足大部分开发需求。但是在项目中使用这些 SVG 图标，却需要花费很多精力去适配和导入。
这时，npm 包 feather-webpack-plugin 就能发挥作用了。它能够方便快捷地将 feather icons 库中的 SVG 图标导入到 webpack 项目中。
本篇文章将向您介绍 npm 包 feather-webpack-plugin 的使用方法，并提供详细的代码示例。
安装
您可以使用以下命令安装 feather-webpack-plugin：
npm install feather-webpack-plugin --save-dev
安装完成后，将该插件添加到 webpack.config.js 中，并设置配置选项：
-- -------------------- ---- -------
----- ----------------- - ----------------------------------
-------------- - -
-- --------
-------- -
--- -------------------
----- --------------------------- -- ------------- -----
----- --------------------- -- -------
--
-
-配置项
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
| path | string | 是 | feather-icons 的文件路径 |
| name | string | 是 | 打包后的文件名 |
示例代码
您可以按照以下步骤使用 feather-webpack-plugin：
步骤一：安装 feather-icons 库
npm install feather-icons --save
步骤二：添加一个 SVG 图标
在任意一个组件的模板文件中添加一个 SVG 图标：
<template>
<div>
<svg>
<use xlink:href="#icon-feather-heart"></use>
</svg>
</div>
</template>其中，xlink:href 属性的值为图标名称。
步骤三：配置 webpack
添加如下代码到 webpack.config.js 中：
-- -------------------- ---- -------
----- ----------------- - ----------------------------------
-------------- - -
-- --------
-------- -
--- -------------------
----- ---------------------------
----- ---------------------
--
-
-步骤四：添加 SVG 图标到 HTML 中
在项目入口 HTML 文件中添加 SVG 图标元素：
-- -------------------- ---- -------
------
--------
-----------
---------
-----
---- -- --- -- ---
---- ---------------------
---- ----------------------------------------------------------
------
------
------- --------------------------
-------其中，xlink:href 属性的值为打包后的文件名和图标名称。
步骤五：编写 CSS 样式
编写 CSS 样式，将 SVG 图标显示出来：
svg {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
}步骤六：运行项目
运行项目，并在页面中查看 SVG 图标是否正常显示。
总结
通过使用 npm 包 feather-webpack-plugin，我们可以快速、方便地将 feather icons 库中的 SVG 图标导入到项目中。在实际开发中，我们可以通过引用所需的 SVG 图标，使项目代码更加简洁、优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cb481e8991b448da239