什么是@svgr/plugin-svgo
@svgr/plugin-svgo是一个npm包，它是svgr的一个插件，用于将SVG图像优化为更小、更优化的SVG。
如何安装
首先需要安装 svgo 和 @svgr/core 这两个npm包：
- --- --- ------- -- ---- ---------- - ---- ---- --- ---- ---------- -----
然后安装 @svgr/plugin-svgo：
- --- --- ------- -- ----------------- - ---- ---- --- ----------------- -----
如何使用
安装完成后，我们来看一下如何使用@svgr/plugin-svgo。
首先，在项目中添加一个SVG文件夹，在其中添加一个名为 logo.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 中添加以下配置：
-
---------- -
------------- ----- ---- ------ --------- -------- -- ---------------------
-
-在这里，我们使用 svgr 命令并传递一些选项：
--icon表示我们希望生成的组件被预处理为图标--no-svgo表示我们不想对SVG文件应用SVGO优化src/svg/是我们的SVG文件所在的目录-d src/components/icons是我们的React元素应该放置的目录
现在我们可以用以下命令来生成React元素：
- --- --- --- ---------- - ---- ---- ----------
生成的文件位于 src/components/icons/logo.js，和下面的代码类似：
------ - -- ----- ---- --------
-------- ------------------- -
------ -
---- ---------------------------------- ---------- - ----- ------ -----------
----- --------- ---------- - - --- - ------------ ---- --- ---- ---- --------------- - -------- ------------------------------------------------ ------------------------- -------------------------------------------- - ---- --- ---- ----------------------- ----------- ------ ------- ---- - ---- ---- ---- ---- ---- ---- - --------- ------------------------------------------ ------------------------------------ --------- ------------------ ----------- ---- --- ---- -- ------------------------------------------------------------------------------------- --------- --------- -------------------------------------------------------- ------ -------- ------- --------- --------- --------- ------------ --------- ------- -------- --------- --------- ---- - ---- --- ---- ---- ---- -- ---- ---- ---- ---- ---- ---- ---- -- ---- ---- --- ---- --- ---- --- --------------------- --
------
--
-
------ ------- -------------总结
本篇文章介绍了如何使用@svgr/plugin-svgo对SVG图像进行优化，以及如何将SVG文件转换为React元素。这个插件可以帮助我们生成更小、更优化的SVG文件，可以用于提高页面性能和减少首次加载时间。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/102112