随着前端开发的快速发展，图标库已经成为了一个不可或缺的组成部分。但是，传统的图标库存在着一些问题，比如图标数量有限、样式固定等。因此，本文将介绍如何利用 Custom Elements 和 SVG 实现可扩展图标库的构建。
一、Custom Elements 是什么？
Custom Elements 是 Web Components 的一部分，是一种可以自定义 HTML 标签的技术。使用 Custom Elements，可以创建一个新的 HTML 元素，它可以像普通 HTML 标签一样使用和扩展，但是却具有自定义的功能。例如，我们可以使用 Custom Elements 来创建一个可以搜索的下拉框，或者一个可以展开的菜单。
二、SVG 是什么？
SVG 是可缩放矢量图形 (Scalable Vector Graphics) 的缩写，它是一种基于 XML 的图形格式。与传统的图像格式 (如 JPEG 和 PNG) 不同，SVG 以矢量的方式描述图像，因此具有无限的放大缩小能力，而不会失去清晰度。使用 SVG，可以创建漂亮的图标，同时也可以将其嵌入到 HTML 中，并对其进行动画或交互操作。
三、利用 Custom Elements 和 SVG 实现可扩展图标库的构建
在这里，我们将使用 Custom Elements 和 SVG 来实现可扩展图标库的构建。我们将创建一个图标元素，可以使用图标名称和一个可选的样式名称来调用相应的 SVG 图标。
1. 创建图标元素
我们使用 Custom Elements 来创建一个新的 HTML 标签 svg-icon，它接受两个属性：name 和 class。
<svg-icon name="heart" class="red"></svg-icon>
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
------------------- -
----- - ----- ------ -------- - - ----------------
----- --- - -----------------------
-- ------ -------
----- ----- - ------------------------------------------------------ -------
----------------------------- -----------------------------
----------------------------------------- --------- -------
-- ---------- -
--------------------------- ----------------
-
---------------------------------------
-----------------------------------
-
-
---------------------------------------- ---------上面的代码中，我们在 constructor 中调用了 attachShadow 方法来建立元素的 Shadow DOM，这样可以避免 CSS 样式与其他元素冲突。在 connectedCallback 方法中，我们获取了 name 和 class 属性，然后调用了 getSvgIcon 函数来获取相应的 SVG 图标元素，并将其添加到了 Shadow DOM 中。如果没有找到相应的 SVG 元素，则不会添加任何内容。
2. 获取 SVG 图标元素
我们可以将所有的 SVG 图标都保存在一个 JavaScript 对象中，并根据图标名来获取相应的 SVG 元素。
-- -------------------- ---- ------- ----- -------- - - ------ ----- ---------- - -- --- ---------------------------------------- -------- ------ - - ------ ---- -------- - - --- ----------------- - - ----- ---------- ------ - - ------- ----- ------ - - -------------------- ------ ----- ---------- - -- --- ---------------------------------------- ------ ------------------- -------- -------- ----------- --------- --------- ---- - ------- ---- --------- ---- --- - -- ----- - ---- ---- ---- ------------ --------- --------- ---- - ---- ---- ---- ---- - --------- --------- -------- ---------------- -- -------- ---------------- - ----- --------- - --------------- -- ------------ ------ ----- ----- --- - ------------------------------ ------------- - ---------- ------ ------------------------- -
在上面的代码中，我们使用对象 svgIcons 来存储所有的 SVG 图标，每个图标都有一个名称和相应的 SVG 标记。getSvgIcon 函数接受一个名称作为参数，返回相应的 SVG 元素。我们将 SVG 标记字符串插入到一个 div 中，然后通过 querySelector 方法获取 SVG 元素。
3. 添加图标样式
我们为 SVG 图标添加了一些简单的样式，让它们看起来更美观一些。
svg-icon {
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
}4. 调用图标元素
现在，我们可以通过添加 svg-icon 元素来调用我们的 SVG 图标了。
<svg-icon name="arrow"></svg-icon> <svg-icon name="heart" class="red"></svg-icon>
上面的代码会分别显示一个箭头和一个红色的心形图标。我们还可以在 class 属性中添加自定义样式，以更好地适应我们的页面。
四、总结
本文介绍了如何使用 Custom Elements 和 SVG 实现可扩展图标库的构建。我们创建了一个新的 HTML 标签 svg-icon，并通过自定义 JavaScript 对象来存储和获取 SVG 图标。同时，我们还为 SVG 图标添加了一些简单的样式。这样，我们就可以根据需要随意调用和扩展自己的图标库了。
五、示例代码
完整的示例代码可以在 CodePen 上查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65481eb87d4982a6eb26c796