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"><