什么是 svgo-inline-loader
svgo-inline-loader 是一个 webpack loader，用于将 SVG 图标文件转换为可嵌入 HTML 中的内联 SVG。它使用 svgo 对 SVG 文件进行优化，以减小文件体积。
使用 svgo-inline-loader
安装
首先，需要安装 svgo-inline-loader，可以在项目根目录下运行以下命令：
npm install svgo-inline-loader --save-dev
配置 webpack
在 webpack 配置文件中加入以下代码：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-
------- ---------------------
-------- -
------------ -----
--------------- -----
-------------- -----
-
-
-
-
-
-其中，test 属性用于匹配 SVG 文件，use 属性用于指定 loader，options 属性用于传递 svgo 的配置项。
使用 SVG 图标
在 HTML 中使用 SVG 图标时，只需要将 SVG 文件引入即可。例如：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
----------------
--------- ------------------------------------
-------
-------其中，xlink:href 属性指定 SVG 文件的地址。
配置项
以下是一些常用的 svgo 配置项：
- removeTitle：是否删除 title 标签，默认为 true。
- removeComments：是否删除注释，默认为 true。
- removeViewBox：是否删除 viewBox 属性，默认为 false。
除了以上配置项之外，还可以使用其他配置项，请查阅 svgo 官方文档。
示例代码
以下是一个简单的示例代码：
-- -------------------- ---- -------
-------------- - -
------ -------------
------- -
--------- -----------
--
------- -
------ -
-
----- ---------
---- -
-
------- ---------------------
-------- -
------------ -----
--------------- -----
-------------- -----
-
-
-
-
-
-
--结语
使用 svgo-inline-loader 可以轻松地将 SVG 图标内联到 HTML 中，减小页面加载时间。当然，除了 svgo-inline-loader 之外，还有其他一些优秀的 webpack loader 可供选择，可以根据实际需求选择适合自己的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c1d81e8991b448e5bb6