将外部 SVG 图标加载到原生 JavaScript 代码中

Posted 2023-03-28

【中文标题】将外部 SVG 图标加载到原生 JavaScript 代码中

【英文标题】：Load external SVG icons into vanilla JavaScript code

【发布时间】：2022-01-09 03:39:20

【问题描述】：

我正在使用 OpenWeather API 在我客户的网站上显示当前和五天的预报。

我想使用一些自定义 SVG 图标来代替 OpenWeather 提供的图标。我已经实现了以下 switch 语句来根据天气情况显示不同的图标。

let dailyCondition = value.weather[0].description;
let dailyCondtionIcon = "";
    
switch (dailyCondition) 
  case "clear sky":
    dailyConditionIcon = `<svg>icon</svg>`;
    break;
  case "few clouds":
    dailyConditionIcon = `<svg>icon</svg>`;
    break;
  case "thunderstorm":
    dailyConditionIcon = `<svg>icon</svg>`;
    break;
  case "light rain":
    dailyConditionIcon = `<svg>icon</svg>`;
    break;

从模板文字代码访问图标是可行的，但是在 switch 语句中有很多天气条件，代码非常臃肿。我想将 SVG 图标存储在外部文件中并从那里加载。

如何将外部 SVG 图标加载到我的原生 javascript 文件中？

【参考方案1】：

如果您更喜欢外部 svg 文件，可以将它们加载到 <use> 元素中。

另见SVG use with External Source

您可以将所有 svg 图标合并到一个 sprite/asset 库 svg 文件中，然后通过片段标识符单独加载每个图标：

你的 js 定义可能看起来像这样：

dailyConditionIcon = '<svg class="svgInline" fill="red" ><use href="sprite.svg#circle" /></svg>'

.svgAssets
    display:none
    
    
    
    .svgInline
            display:inline-block;
            width:1em;
            height:1em;
            font-size:32px;
        

<!-- this would be the content of your "sprite.svg" -->
<svg class="svgAssets" xmlns="http://www.w3.org/2000/svg">
  <symbol viewBox="0 0 100 100" id="circle">
    <circle cx="50%" cy="50%" r="50%"></circle>
  </symbol>
  <symbol viewBox="0 0 100 100" id="rect">
    <rect x="0" y="0"  ></rect>
  </symbol>
  <symbol viewBox="0 0 100 100" id="rectFixedStyle">
    <rect x="0" y="0"   fill="#ccc"></rect>
  </symbol>
  
</svg>

<!-- 
for demonstration the filenames are dropped.
The href of a hosted version would be e.g 
        <use href="sprite.svg#circle" />
-->
<p>
    <svg class="svgInline" fill="red" >
        <use href="#circle" />
    </svg>

    <svg class="svgInline" fill="green" >
        <use href="#rect" />
    </svg>
  
    <svg class="svgInline" fill="green" >
        <use href="#rectFixedStyle" />
    </svg>
  
</p>

如您所见，您还具有一些样式功能，例如更改填充颜色。 但是样式选项是有限的（与完全内联的 svg 相比）并且还取决于您的 svg 结构： 例如。以前在 svg 元素中定义的样式不能被 use/svg 标签中设置的样式覆盖。

我使用的精灵创建：svgsprit.es