将外部 SVG 图标加载到普通 JavaScript 代码中

Question

我正在使用 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 图标存储在外部文件中并从那里加载。

我将如何 go 关于将外部 SVG 图标加载到我的香草 JavaScript 文件中？

Answer 1

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

另请参阅SVG 与外部源一起use

您可以将所有 svg 图标组合到单个精灵/资产库 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" width="100" height="100"></rect> </symbol> <symbol viewBox="0 0 100 100" id="rectFixedStyle"> <rect x="0" y="0" width="100" height="100" fill="#ccc"></rect> </symbol> </svg> <.-- for demonstration the filenames are dropped. The href of a hosted version would be eg <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 元素中定义的 Styles 元素不能被 use/svg 标签中设置的样式覆盖。

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