在前端开发中，我们经常需要使用 SVG 图标来优化网页性能和体验。但是，SVG 图标也会带来一些问题，比如它们的文件大小可能会很大，从而降低网页的加载速度和性能。幸运的是，我们可以使用一个 npm 包 @jongleberry/svgo 来压缩和优化 SVG 图标，提高网页的性能和用户体验。
安装 @jongleberry/svgo
首先，我们需要安装 @jongleberry/svgo 包。我们可以使用以下命令来安装它：
npm install -g @jongleberry/svgo
这将在全局环境中安装 @jongleberry/svgo 包。如果你想在特定的项目中使用它，你也可以在项目目录中安装它：
npm install @jongleberry/svgo --save-dev
使用 @jongleberry/svgo
使用 @jongleberry/svgo 来压缩和优化 SVG 图标非常简单。我们只需要使用以下命令来压缩 SVG 图标：
svgo icon.svg -o icon.min.svg
这会将 icon.svg 文件压缩为 icon.min.svg 文件，使其更小并且能够更快加载。你也可以使用以下命令来压缩整个目录内的所有 SVG 文件：
svgo -f ./icons
这会将 icons 目录下的所有 SVG 文件压缩并替换原文件。
配置 @jongleberry/svgo
默认情况下，@jongleberry/svgo 将应用一些基本的优化，但有时候我们可能需要自定义压缩策略。幸运的是，@jongleberry/svgo 允许我们通过配置文件来自定义压缩配置。
我们可以在项目目录中创建一个名为 .svgorc.json 的文件，将以下示例配置添加到文件中：
-- -------------------- ---- -------
-
---------- -
-
------------- -----
--
-
---------------- -----
--
-
------------------- ----
-
-
-这将禁用 cleanupIDs 和 removeViewBox 插件，并启用 removeDimensions 插件，以便从 SVG 文件中删除宽度和高度属性。
结论
现在，你应该已经学会了如何使用 @jongleberry/svgo 来优化 SVG 图标，并了解了如何使用配置文件来自定义压缩配置。这个 npm 包可以有效地减小 SVG 文件大小，提高网页的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586d81e8991b448d5a60