概述
Metalsmith 是一款优秀的静态网站生成器，它最大的特点就是可扩展性。通过使用各种插件，我们可以实现非常丰富的功能。
metalsmith-svgo 是一个可以实现 SVG 图标压缩的插件。如果你的网站中使用了大量的 SVG 图标，你肯定会发现这些 SVG 图标会占用大量的空间，导致网站加载变慢。metalsmith-svgo 可以帮助我们压缩这些 SVG 图标，减小文件大小。
安装
使用 metalsmith-svgo 插件，必须先安装 Metalsmith，如果你还没有安装 Metalsmith，请按照如下命令进行安装：
npm install metalsmith
安装完成后，我们可以安装 metalsmith-svgo：
npm install metalsmith-svgo
基本使用
把 metalsmith-svgo 插件加入 metalsmith 的 pipeline 中，然后在 config 中设置插件的一些选项即可使用。具体的代码如下：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- ---- - ---------------------------
---------------------
---------------- -- -----
----------------------- -- ------
------------
-----------
------------ ----- -- -- --- ------
-------------- ------ -- --- -------
----------------- ---- -- -- ----- - ------ --
---
------------ -- -
-- ----- ----- ----
---选项
metalsmith-svgo 插件可以接受以下选项：
plugins: 如果你希望使用自定义的 svgo 插件，请指定这个选项，并通过数组的形式传入插件。传入的插件将会覆盖默认的插件。默认值为[]。svgo: 一个对象，自定义 svgo 的配置。默认配置如下：
-- -------------------- ---- -------
-
-------- -
-- --------
- ------------ ---- --
- ----------- ---- --
- ------------------ ---- --
- ----------------- ---- --
- ---------------------- ---- --
- -------------- ---- --
- --------------- ---- --
-- ----
- ------------------- ---- --
-- -----
- ----------- ---- --
- ---------------- ---- --
- ----------------- ---- --
- -------------------------- ---- --
- --------------- ---- --
- ------------------- ---- --
- ----------------------- ---- --
-
-示例
我们可以通过以下代码生成压缩后的 SVG 图标：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- ---- - ---------------------------
---------------------
------------------ -- -----
--------------------------- -- ------
------------
-----------
-------- -
- ----------------- ---- -
-
---
------------ -- -
-- ----- ----- ----
----------------- ----------- ------------
---这个示例代码会读取 ./icons 目录下所有的 SVG 文件，并将压缩后的文件放入 ./icons.min 目录中。
总结
metalsmith-svgo 插件是一个实用的工具，可以帮助我们压缩 SVG 图标，减小文件大小。它的使用非常简单，只需要在 metalsmith pipeline 中加入插件，然后在 config 中指定选项即可。同时，由于它是一个 npm 包，可以非常方便地集成到我们的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f421d8e776d08040db9