SVGIcon 组件的构建与使用

SVGIcon 是一个可以在项目任意地方使用的「图标组件」，组件使用者只需指定图标名称、颜色等属性，HTML 页面即可渲染出对应的 SVG 图标。本文将带大家了解 SVGlcon 组件的构建与使用。

背景

SVG 是什么？

SVG（Scalable Vector Graphics）可缩放矢量图形，是一种用于描述基于二维的矢量图形的 XML 标记语言，其基本矢量显示对象包括矩形、圆、椭圆、多边形、直线、任意曲线等，还能显示文字对象和嵌入式外部图像（包括 PNG、JPEG、SVG 等）。实际项目中大多数图标都是使用的 SVG 图标文件，其主要有以下几个优点：

• 内容可读，文件是纯粹的 XML。
• 图像文件小，可伸缩性强。
• 矢量放缩，能以不牺牲图像质量为前提，进行任意缩放。
• 还能基于 DOM 模型实现动态和一些交互功能。

如何将 SVG 效果应用于 HTML 内容中？

在 HTML 文档写入类似于如下内容，则能在页面中渲染出对应的图标。

<div>
  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
    <path d="M0 0h24v24H0V0z" fill="none"/>
    <path d="M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z"/>
  </svg>
</div>

图标一

概括来讲，SVG 文件内容写入 HTML 文档中即可将 SVG 效果渲染展示到页面中。

如何在项目中优雅地使用大量的 SVG 图片文件？

前端实践项目时，为了追求良好的用户体验，难免会使用到大量的符合项目特色的图标，来丰富美化页面内容。所以随着项目逐步完善，需要使用到的图标文件肯定也会随之增加，如何优雅地在项目中使用大量的 SVG 图片文件？这是我们目前需要考虑以及解决的重点问题之一。

实际项目开发中，采用直接将 SVG 文件内容（实质的 XML 内容）写入到 HTML 文档对应位置去渲染我们所预期的图标图形这种方式，可行但不可取！因为这种方式要求使用者在项目每个页面中每个需要展示 SVG 图标的位置，都要将图标文件内容完整的写入对应的 DOM 中，而且 SVG 内容较繁杂，直接写入 DOM 非常影响我们代码的美观和可阅读性。总之这样的操作太过笨重，严重缺乏灵活性和可扩展性。

经过技术调研，我们发现 sprite-svg 结合 use 元素的使用方式，可以很好的解决这个问题。

• 将项目中各个图标合并成一个包含多个 symbol 的 SVG 文件。
• 在需要使用图标的地方，通过 use 元素引用对应的 symbol。

其工作原理是：use 元素从 SVG 文档内取得目标节点，并且复制它的内容。效果等同于目标节点被克隆到一个不可见的 DOM 中，然后将其粘贴到 use 元素的位置上。

Demo：

<!-- sprite.svg 文件目录：/dist/images/sprite.svg -->
<svg width="0" height="0" class="hidden">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="add">
    <path fill="none" d="M0 0h24v24H0V0z"></path>
    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"><