将外部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图标存储在一个外部文件中，并从那里加载。

如何将外部SVG图标加载到我的普通JavaScript文件中？

Answer 1

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

另请参阅带有外部源的SVGuse

您可以将所有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 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