在多个地方使用相同的SVG图标时如何消除HTML代码重复？

Question

我正在用普通的 JS、HTML 和 CSS 编写一个 HTML 页面。

到目前为止一切都很好，但我现在需要在四个不同的地方包含相同的 SVG 图标。

代码重复很糟糕，如果我使用像 React 这样的东西，我只需将其制作成一个组件并在四个地方中的每一个地方使用它。

由于我更喜欢保持普通状态，不使用任何外部库，所以我查看了 Web 组件，但它们似乎是一个 失败的实验，浏览器支持有些有限。

可能可行的方法是从 JavaScript 函数返回 HTML 内容的原始字符串，然后再次使用 JavaScript 将该节点注入到四个元素中的每一个中，但这看起来非常麻烦和混乱。

我在这里遗漏了一些明显的东西吗？我只是在寻找一种方法将此 SVG 包含在四个不同的位置，而无需在每个位置复制并粘贴重复的代码，因为这样既冗长又容易出错。我也不想包含这个简单更改的构建步骤或过程。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize-2">
  <polyline points="4 14 10 14 10 20"></polyline>
  <polyline points="20 10 14 10 14 4"></polyline>
  <line x1="14" y1="10" x2="21" y2="3"></line>
  <line x1="3" y1="21" x2="10" y2="14"></line>
</svg>

Answer 1

如果您的目标是单个 HTML 文件，我只需复制/粘贴 4 个最小尺寸的 SVG。

GZip 喜欢重复，因此下载的文件*实际上可能比创建“组件”并引用它 4 次的任何方法都要小。

*

GZip 会查找 256 字节范围内的重复项，因此请让您的 4 个 SVG 在 HTML 中靠近在一起

非常好的深入阅读：https://blog.usejournal.com/of-svg-minification-and-gzip-21cd26a5d007
（适用于您从网站交付的任何内容）

---

<svg-icon>

自定义元素

严格来说只有自定义元素和shadowDOM才被称为“Web组件”
您不需要使用 ShadowDOM 将 SVG 内容注入到 Document DOM 中，而组件基本上可以做到这一点：

 this.innerHTML=`<svg ...></svg>`

将此代码复制/粘贴到您的 HTML 页面中，您就可以使用

<svg-icon>

自定义元素。

在一个 HTML 文件中......吃掉 React！

<style>
  svg-icon svg {
    width: 121px;
    background: khaki;
    cursor: pointer
  }
  svg-icon:hover path {
    stroke: black;
    stroke-width: 2;
  }
</style>

<svg-icon></svg-icon>
<svg-icon color="green"></svg-icon>
<svg-icon color="blue"></svg-icon>
<svg-icon color="magenta"></svg-icon>

<script>
  customElements.define("svg-icon", class extends HTMLElement {
    static get observedAttributes() {
      return ["color"]; // define attributes that trigger change
    }
    connectedCallback() { // execute on first use in HTML
      this.render();
    }
    attributeChangedCallback() { // handle observedAttributes changes
      this.render();
    }
    render(color = this.getAttribute("color") || "red") {
      this.innerHTML = `<svg viewBox='0 0 24 24'>` +
        `<path stroke='${color}' stroke-width='1.5' stroke-linecap='round' fill='none'` +
        ` d='M4 14 10 14 10 20M20 10 14 10 14 4M14 10L21 3M3 21L10 14'/></svg>`}});
</script>

体验力量：

• 运行上面的SO片段
• 右键单击图标打开 F12 开发者工具

• 更改任何颜色属性，看看会发生什么

• 在 Chrome、Edge、Firefox、Safari、Opera、Bravo、Android 等中执行此操作。

• 然后，不要听别人的，
  自己得出结论如果自定义元素/Web 组件是一个“失败的实验，浏览器支持有限”

PS

Web 组件 标准 涉及 3 种独特技术

1. 自定义元素API
2. shadowDOM
3. 模板

每一个都可以单独使用！

上面的SO片段仅使用1.

因此应用 2. 和 3.（取决于您之前的结论）可能会更加令人失望。

Answer 2

根据此参考：https://css-tricks.com/use-and-reuse-everything-in-svg-even-animations/

对于给定的 svg：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize-2">
  <polyline points="4 14 10 14 10 20"></polyline>
  <polyline points="20 10 14 10 14 4"></polyline>
  <line x1="14" y1="10" x2="21" y2="3"></line>
  <line x1="3" y1="21" x2="10" y2="14"></line>
</svg>

您可以为其应用一个 id，例如：

 <svg  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minimize-2">
   **<g id="your_content_svg">**
      <polyline points="4 14 10 14 10 20"></polyline>
      <polyline points="20 10 14 10 14 4"></polyline>
      <line x1="14" y1="10" x2="21" y2="3"></line>
      <line x1="3" y1="21" x2="10" y2="14"></line>
   **</g>**
</svg>

那么你可以这样参考：

<use xlink:href="#your_content_svg" width=".." height="..."/>
 ...
<use xlink:href="#your_content_svg" width=".." height="..."/>

Answer 3

这个 StackOverflow 答案描述了如何对 XML 进行 Base64 编码，并通过内联数据 URL 将其用作背景图像：Svg 数据图像作为 css 背景？.

示例（使用不同的 SVG）：

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

然后您可以将该背景（使用该 SVG）应用到页面上的各种标签：

<span class="carousel-control-prev-icon"></span>
<span class="carousel-control-prev-icon"></span>
<span class="carousel-control-prev-icon"></span>