將外部 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