svg-fill-loader 是一个用于 webpack 构建的 npm 包，它可以帮助前端开发者在使用 SVG 图片时，自动完成填充色的替换操作。
在传统的前端开发模式中，使用 SVG 图片需要编写大量代码来完成填充色替换的操作。而使用 svg-fill-loader，我们只需要通过简单的配置即可在项目中实现 SVG 图片的填充色替换。
安装
在使用 svg-fill-loader 之前，我们需要先在项目中安装它。使用以下命令可以快速地将 svg-fill-loader 安装在项目中：
npm install svg-fill-loader --save-dev
SVG 图片的填充色修改是通过 PostCSS 插件实现的。因此，在安装 svg-fill-loader 之前，我们还需要安装 postcss-preset-env 以及 postcss-svg-sprite。
npm install postcss-preset-env postcss-svg-sprite --save-dev
配置
在安装完 svg-fill-loader 以及相关的 PostCSS 插件之后，我们需要对项目的 webpack 配置文件进行相关配置。
在 webpack.config.js 文件中，加入以下代码：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- ------------------
-------- -
----- ------
-
-
-
--
-
----- ---------
---- -
---------------
-------------
-
------- -----------------
-------- -
--------------- -
-------- -
--------------------------------
-------------------------------
------ -
--
-
-
-
-
-
-
-
-
--以上代码中，我们通过 module.rules 的方式对 .svg 文件和 .css 文件进行处理。其中：
- 对于 .svg 文件，我们使用 svg-fill-loader 进行处理，并且指定 attr 为 'fill'，表示将 SVG 文件中的所有 fill 属性全部替换为指定的颜色。
- 对于 .css 文件，我们使用 postcss-loader 进行处理，并且在插件列表中加入了 postcss-svg-sprite 和 postcss-preset-env。其中，postcss-svg-sprite 用于生成 SVG 雪碧图，而 postcss-preset-env 则提供了更多的 CSS 兼容性处理功能。
使用
当我们完成了安装和配置后，就可以愉快地开始使用 svg-fill-loader 了。
假设我们有一张名为 logo.svg 的 SVG 图片，其中包含了多个 fill 属性。
在页面需要显示该 SVG 图片时，我们只需要像下面这样写：
<img src="./logo.svg" alt="Logo" />
而在代码中需要修改该 SVG 图片的 fill 属性时，我们只需要在 CSS 文件中编写如下代码：
.svg_demo {
color: red;
}然后，在 HTML 中对该 SVG 图片对应的元素设置 class 属性并赋值为 svg_demo，就可以将 SVG 图片中的 fill 属性全部替换为红色了。代码如下：
<img src="./logo.svg" alt="Logo" class="svg_demo" />
示例代码
以下代码演示了如何使用 svg-fill-loader 修改 SVG 图片的颜色。
HTML
-- -------------------- ---- -------
--------- -----
------
------
---------------------- ----------
----- --------------- --
-------
----- -
----- -----
-
--------- -
----- ----
-
----------- -
----- ------
-
--------
-------
------
---- ------------ ---------------------------------- ---------- - --- -----
----- ---------- --------------------- -- - - ------ -------- ------------ ------ ------ --- ------ ------------------------------------------ -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ------------- ---------- --------------------------------------- -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ------------ ------------ ------ ------ --- ------ --------------------------------- -- - - ------ -------- ------------ ------ ------ --- --- ------------------------------------------ -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ---------- ---------- --------------------------------------- -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ------------ ------------ ------ ------ --- --- ----------- --------- -------- ------------ ------- ---- - - ------ ----------- ------------ ---------- ----- ----- ----------------- - ---------- ------------------ --------- ----- - - ------------------- ------ ------ -- ------ ---------- ------------- --------- -------- ----- --------- ----- - - ------- -------------- ----- - - --------------------------------------------------------------------- ------------------------ - ----- ----- ----- ------- --
------
--- --
---- ---------------- ---------------------------------- ---------- - --- -----
----- ---------- --------------------- -- - - ------ -------- ------------ ------ ------ --- ------ ------------------------------------------ -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ------------- ---------- --------------------------------------- -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ------------ ------------ ------ ------ --- ------ --------------------------------- -- - - ------ -------- ------------ ------ ------ --- --- ------------------------------------------ -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ---------- ---------- --------------------------------------- -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ------------ ------------ ------ ------ --- --- ----------- --------- -------- ------------ ------- ---- - - ------ ----------- ------------ ---------- ----- ----- ----------------- - ---------- ------------------ --------- ----- - - ------------------- ------ ------ -- ------ ---------- ------------- --------- -------- ----- --------- ----- - - ------- -------------- ----- - - --------------------------------------------------------------------- ------------------------ - ----- ----- ----- ------- --
------
--- --
---- ------------------ ---------------------------------- ---------- - --- -----
----- ---------- --------------------- -- - - ------ -------- ------------ ------ ------ --- ------ ------------------------------------------ -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ------------- ---------- --------------------------------------- -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ------------ ------------ ------ ------ --- ------ --------------------------------- -- - - ------ -------- ------------ ------ ------ --- --- ------------------------------------------ -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ---------- ---------- --------------------------------------- -- - - - ---------------------- -- - - - ----- ------- -------- -- - - - - ------------ ------------ ------ ------ --- --- ----------- --------- -------- ------------ ------- ---- - - ------ ----------- ------------ ---------- ----- ----- ----------------- - ---------- ------------------ --------- ----- - - ------------------- ------ ------ -- ------ ---------- ------------- --------- -------- ----- --------- ----- - - ------- -------------- ----- - - --------------------------------------------------------------------- ------------------------ - ----- ----- ----- ------- --
------
-------
-------webpack.config.js
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
-
------- ------------------
-------- -
----- ------
-
-
-
--
-
----- ---------
---- -
---------------
-------------
-
------- -----------------
-------- -
--------------- -
-------- -
--------------------------------
-------------------------------
------ -
--
-
-
-
-
-
-
-
-
--index.css
-- -------------------- ---- ------- --------- - ------ ------ - --------- - ------ ---- - ----------- - ------ ------ -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64523