前言
在现代 web 开发中，图标是不可或缺的重要元素。它们可以提高网站的可读性、美观度和用户体验。然而，手动创建图标，尤其是在采用响应式设计时，是一项费时费力且容易出错的任务。这时我们就需要用到一些工具来帮助我们更加高效地管理图标，其中常用的就是 icon font 和 SVG Sprite。
在本篇文章中，我将介绍一款 npm 包 iconista，它可以帮助我们快速地创建和管理 SVG Sprite，亦可作为 icon font 的替代品，同时还提供了一些实用的额外功能。
安装
先确保已安装 Node.js 和 npm。可以在控制台中使用以下命令进行安装：
npm install iconista --save-dev
使用
创建 SVG Sprite
首先， 我们需要一些 SVG 图标文件。将它们放在一个文件夹中，我们可以为这些文件定义一个基础的 viewBox 属性。比如：
<svg viewBox="0 0 24 24"> <path d="..."> </svg>
注意，不支持 CSS、 JavaScript 或 SVG 样式。所以如果需要改变图标颜色或大小，需要通过 HTML 和 CSS 样式来达到目的。
接下来，我们可以在默认的情况下使用以下命令来创建 SVG Sprite：
npx iconista ./icons/*.svg
这将创建一个新文件夹 dist，并且在其中生成一个名为 sprite.svg 的 SVG Sprite 文件。此外，可以通过以下命令自定义输出文件夹和文件名：
npx iconista ./icons/*.svg --out-dir=./custom --out-name=custom-sprite.svg
图片文件夹的路径以及要打包的 svg 文件是可以自由更改的。
引用 SVG Sprite
经过上一步，我们已经成功创建了一个 SVG Sprite 文件。下面我们可以通过以下方式引用它：
<svg viewBox="0 0 24 24"> <use href="path/to/sprite.svg#icon-name"></use> </svg>
其中的 href 属性应该指向我们之前创建的 SVG Sprite，以及要引用的图标的 id，在这个例子中为 icon-name。
要注意的是，href 形式与常规的 href 属性略有不同。它以 # 分隔并以图标名称结尾，这是相对于根目录的路径，不是相对于当前页面的路径。
以字体样式使用
如果我们更喜欢使用 icon font，iconista 也为我们提供了这样的功能：通过一键转换，将我们的 SVG Sprite 转换为字体。
同样是在终端输入：
npx iconista ./icons/*.svg --style=font
该命令将创建一个 custom-webfont 文件夹，其中包含了 custom-webfont.ttf、 custom-webfont.woff 和 custom-webfont.woff2 等字体文件。除此之外，还包含了 custom-webfont.css 文件，其中包含了字体信息。
将这个 CSS 文件引入到我们的 HTML 文件中：
<link rel="stylesheet" href="path/to/custom-webfont.css">
接下来就可以像使用常规字体一样使用 icon font 了：
<i class="custom-icon-custom-name"></i>
额外功能
除了以上基础功能之外，iconista 还提供了一些实用的额外功能，例如：
- 自动为我们的 SVG 添加合适的
viewBox属性，以确保在使用时显示正确。 - 支持将所有图标合并成一个单独的 SVG，以减少 HTTP 请求和提高性能。
- 支持为像素对齐的图标添加偏移量，以更好地应对不同分辨率和像素密度的情况。
有了这些额外功能，我们可以更高效地管理我们的 SVG Sprite，使得开发更加便利。
总结
在本文中，我们介绍了一款 npm 包 iconista，它可以帮助我们更高效地管理 SVG Sprite 和 icon font，同时还提供了一些实用的额外功能。希望这篇文章能对大家学习和使用 iconista 有所帮助。
示例代码
这里是一些示例代码，可以快速使用 iconista：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
----- ---------------- ----------------------------
-------
--------- -
-------- -------------
------ -----
------- -----
-
------ -
------------ -----------------
---------- -----
-
--------
-------
------
---- --------------
---- ---------------------------------------------
------
-- ----------- ----------------------
-------
-------<!-- heart.svg --> <svg viewBox="0 0 24 24"> <path d="M12,20.8c-0.2,0-0.4-0.1-0.6-0.2c-3.6-2-6.3-6.3-6.3-10.8c0-4.6,3.7-8.3,8.3-8.3c4.6,0,8.3,3.7,8.3,8.3c0,4.6-2.7,8.9-6.3,10.8C12.4,20.7,12.2,20.8,12,20.8z"></path> </svg>
<!-- star.svg --> <svg viewBox="0 0 24 24"> <polygon points="12,2 15.09,8.85 22,9.33 17,14.45 18.18,22 12,18.15 5.82,22 7,14.45 2,9.33 8.91,8.85"></polygon> </svg>
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eeda8c8cb6ebf1c9ec1f3e7