利用 Custom Elements 和 SVG 实现可扩展图标库的构建-JavaScript中文网-JavaScript教程资源分享门户

随着前端开发的快速发展，图标库已经成为了一个不可或缺的组成部分。但是，传统的图标库存在着一些问题，比如图标数量有限、样式固定等。因此，本文将介绍如何利用 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>

// javascriptcn.com 代码示例
class SvgIcon extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const { name, class: cssClass } = this.attributes;
    const svg = getSvgIcon(name.value);
    if (!svg) return;
    const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svgEl.setAttribute('viewBox', svg.getAttribute('viewBox'));
    svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
    if (cssClass) {
      svgEl.setAttribute('class', cssClass.value);
    }
    svgEl.appendChild(svg.cloneNode(true));
    this.shadowRoot.appendChild(svgEl);
  }
}

window.customElements.define('svg-icon', SvgIcon);

上面的代码中，我们在 constructor 中调用了 attachShadow 方法来建立元素的 Shadow DOM，这样可以避免 CSS 样式与其他元素冲突。在 connectedCallback 方法中，我们获取了 name 和 class 属性，然后调用了 getSvgIcon 函数来获取相应的 SVG 图标元素，并将其添加到了 Shadow DOM 中。如果没有找到相应的 SVG 元素，则不会添加任何内容。

2. 获取 SVG 图标元素

我们可以将所有的 SVG 图标都保存在一个 JavaScript 对象中，并根据图标名来获取相应的 SVG 元素。

// javascriptcn.com 代码示例
const svgIcons = {
  arrow: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9.71 7.21a1 1 0 011.42 0L15 11.3V3a1 1 0 012 0v8.3l3.88-3.88a1 1 0 011.4 1.42l-5.59 5.58a1 1 0 01-1.41 0L9.7 8.63a1 1 0 010-1.42z"/></svg>',
  heart: '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.8-1.63C4.4 14.36.95 10.88.95 7.77c0-2.15 1.47-3.97 3.86-3.97 1.31 0 2.49.66 3.17 1.68C8.66 4.46 9.8 3 12 3c2.2 0 3.34 1.46 4.02 2.48.68-1.02 1.86-1.68 3.17-1.68 2.39 0 3.86 1.82 3.86 3.97 0 3.11-3.45 6.59-9.25 11.95L12 21.35z"/></svg>'
};

function getSvgIcon(name) {
  const svgMarkup = svgIcons[name];
  if (!svgMarkup) return null;
  const div = document.createElement('div');
  div.innerHTML = svgMarkup;
  return div.querySelector('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