什么是@svgr/plugin-svgo
@svgr/plugin-svgo是一个npm包，它是svgr的一个插件，用于将SVG图像优化为更小、更优化的SVG。
如何安装
首先需要安装 svgo 和 @svgr/core 这两个npm包：
# npm npm install -D svgo @svgr/core # yarn yarn add svgo @svgr/core --dev
然后安装 @svgr/plugin-svgo：
# npm npm install -D @svgr/plugin-svgo # yarn yarn add @svgr/plugin-svgo --dev
如何使用
安装完成后，我们来看一下如何使用@svgr/plugin-svgo。
首先，在项目中添加一个SVG文件夹，在其中添加一个名为 logo.svg 的文件。内容如下：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<path fill="#007ACC" d="M820.5 0H21.4C9.5 0 0 9.5 0 21.4v552.4c0 11.9 9.5 21.4 21.4 21.4h799.1c11.9 0 21.4-9.5 21.4-21.4V21.4c.1-11.9-9.4-21.4-21.4-21.4zM333.8 498.2h-63.2V267.1H243l-.1 231H179.9V267.2h-56.8v231h-63.2V164h122c13.8 0 23.5 9.9 23.5 23.5v287.7H333.8zM648.4 266.4c-31.2 0-52.4 26-52.4 63.1 0 35.8 19.8 63.1 50.7 63.1 33.7 0 53.6-26.6 53.6-63.1-.1-37-19.9-63.1-51.9-63.1zM596.7 164h55.1v231h.8l63.2-105.5c17.5-29.5 34.4-58.3 51.2-87.9H780l-2.1 123.4h-.1c0 23.5 8.8 32.5 31 32.5h28.1v-56c-17.5-.6-19.7-8.8-19.7-28.9l-.1-94.8h55.5v-50.4h-90.4l4.3-23.2c9.9-53.3 14.3-70.2 14.3-98.7 0-30.1-7.9-55.1-23.8-74.8-16-19.6-42.2-29.5-78-29.5-30.9 0-58.3 7.3-82.2 22-23.8 14.7-43.9 35.1-60.5 60.5l39.2 30.2c11.1-16 24.8-29.5 41-39.2 16.2-9.6 35.1-14.5 56.7-14.5 23.5 0 43.8 5.5 62.4 16.5 18.5 11 33.9 25.7 46.1 44.1 11.1 18.4 19.3 39 24.4 61.9 5.2 22.8 7.8 45.8 7.8 68.8v20.8l-.1.1h-.1z"/>
</svg>然后在 package.json 中添加以下配置：
-- -------------------- ---- -------
-
------- -
---------- -
-
--------------------
-
---------- -
-
------- ----------------
--------- -----
--
-
------- -------------
--------- -
--------- ----
-
--
-
------- --------------
--------- -
-------- ---------------------
-
-
-
-
-
-
-
-plugins 数组告诉 svgr 应该使用哪些插件，此时我们只使用了 @svgr/plugin-svgo 作为第一个并且唯一的插件。
@svgr/plugin-svgo 接受一个选项对象作为第二个参数，这个对象将被传递给SVGO来配置其行为。
注意，@svgr/plugin-svgo 默认不会清除 viewBox 属性，但是由于我们的SVG没有任何变形，因此没有必要保留它。设定removeViewBox插件的active属性为false，表示禁用它。
接下来是 cleanupIDs 插件，它使用了 minify 参数以保证生成的ID尽可能的短小和有意义。
最后，removeAttrs 插件用于删除未使用的 stroke-width 和fill 属性，使SVG更加简洁。
接着，我们要编写一个脚本命令，将SVG文件转换为React元素。在 package.json 中添加以下配置：
{
"scripts": {
"build:icon": "yarn svgr --icon --no-svgo src/svg/ -d src/components/icons"
}
}在这里，我们使用 svgr 命令并传递一些选项：
--icon表示我们希望生成的组件被预处理为图标--no-svgo表示我们不想对SVG文件应用SVGO优化src/svg/是我们的SVG文件所在的目录-d src/components/icons是我们的React元素应该放置的目录
现在我们可以用以下命令来生成React元素：
# npm npm run build:icon # yarn yarn build:icon
生成的文件位于 src/components/icons/logo.js，和下面的代码类似：
-- -------------------- ---- -------
------ - -- ----- ---- --------
-------- ------------------- -
------ -
---- ---------------------------------- ---------- - ----- ------ -----------
----- --------- ---------- - - --- - ------------ ---- --- ---- ---- --------------- - -------- ------------------------------------------------ ------------------------- -------------------------------------------- - ---- --- ---- ----------------------- ----------- ------ ------- ---- - ---- ---- ---- ---- ---- ---- - --------- ------------------------------------------ ------------------------------------ --------- ------------------ ----------- ---- --- ---- -- ------------------------------------------------------------------------------------- --------- --------- -------------------------------------------------------- ------ -------- ------- --------- --------- --------- ------------ --------- ------- -------- --------- --------- ---- - ---- --- ---- ---- ---- -- ---- ---- ---- ---- ---- ---- ---- -- ---- ---- --- ---- --- ---- --- --------------------- --
------
--
-
------ ------- -------------总结
本篇文章介绍了如何使用@svgr/plugin-svgo对SVG图像进行优化，以及如何将SVG文件转换为React元素。这个插件可以帮助我们生成更小、更优化的SVG文件，可以用于提高页面性能和减少首次加载时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/102112