在前端开发过程中，我们常常需要使用 SVG 图标。而有时候我们需要更改 SVG 图标的颜色以适应页面的设计风格。为了达到这个目的，我们可以使用 npm 包 svg-colorize-loader。
svg-colorize-loader 是一个 webpack loader，可以在构建时将 SVG 图标颜色更改为指定的颜色。
安装和配置
安装：
npm install svg-colorize-loader --save-dev
配置 webpack.config.js：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
--------------
-
------- ----------------------
-------- -
------- -------
------- -------
----------------------- ----
-
-
-
-
-
-- test: 正则表达式，用于匹配 SVG 文件。
- file-loader: 用于将 SVG 文件转换成文件 URL。
- svg-colorize-loader: SVG 图标颜色更改 loader。
- color1 和 color2: 需要更改为的颜色。
- preserveOriginalColors: 是否保留原始颜色。
使用
设置 SVG 图标的 fill 属性为 color1：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="color1" d="M385.697 217.303l-.001-.001L296 127.22v96.031H192v64h104v96l89.697-89.697.002-.002z"/> </svg>
示例代码
在示例代码中，我们将一组 SVG 图标的颜色更改为红色和蓝色。
app.js:
-- -------------------- ---- ------- ------ ----- ---- -------------- ------ ----- ---- -------------- ----- ---- - ------------------------------ -------- - ------ -------------------------------- ----- ---- - ------------------------------ -------- - ------ --------------------------------
webpack.config.js：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -----------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- ---------
---- -
--------------
-
------- ----------------------
-------- -
------- ------
------- ------
-
-
-
-
-
-
--icon1.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path fill="color1" d="M12 7V3l-8 8 8 8v-4h8V7h-8zm2-2h4v8h-4V5zm-1 12.3l-5.3-5.3 5.3-5.3L8.7 7.7l-5.3 5.3L8.7 18l4.3-4.3zm1 0l5.3-5.3-5.3-5.3L15.3 7.7l5.3 5.3-5.3 5.3z"/> </svg>
icon2.svg:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path fill="color1" d="M8 3h8l8 8v8h-8l-8-8v-8zm0 2v6.586L14.586 17H17v-2h-2.414L8 8.414V5zm2 0h2v2h-2V5zM7 8h2v2H7V8zm8 0h2v2h-2V8z"/> </svg>
以上是 svg-colorize-loader 的使用教程，希望能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc94b5cbfe1ea061280e