Lightning Web コンポーネントにカスタム SVG を含めるには、次の 3 つの手順に従う必要があります。
* SVG を静的リソースとしてアップロードします。[設定] の [静的リソース] ページまたは Salesforce CLI を使用して、SVG ファイルを静的リソースとしてアップロードできます。名前と説明を指定し、オプションでキャッシュ制御設定を指定する必要があります1。
* 静的リソースをインポートし、JavaScript でそのゲッターを提供します。Lightning Web コンポーネントの JavaScript ファイルでは、@salesforce/resourceUrl モジュールを使用して静的リソースをインポートする必要があります。それから、
* 静的リソースの URL を返すゲッター関数を定義する必要があります2。例えば：
JavaScript
'lwc' から { LightningElement } をインポートします。
「@salesforce/resourceUrl/customSVG」からカスタムSVGをインポートします。
デフォルトクラスをエクスポート MyComponent extends LightningElement {
svgURL() を取得 {
カスタムSVGを返します。
}
}
AI が生成したコード。慎重に確認して使用してください。詳細については FAQ をご覧ください。
* HTML テンプレート内のゲッターを参照します。Lightning Web コンポーネントの HTML テンプレートでは、lwc:dom="manual" ディレクティブを指定した <svg> タグを使用して、静的リソースの URL を返すゲッター関数を参照する必要があります3。例えば：
HTML
<テンプレート>
<svg lwc:dom="manual" onload={handleSVGLoaded}></svg>
</テンプレート>
AI が生成したコード。慎重に確認して使用してください。詳細については FAQ をご覧ください。
JavaScript ファイルでは、XMLHttpRequest オブジェクトを使用して SVG コンテンツを取得し、それを <svg> 要素に追加する handleSVGLoaded メソッドを定義する必要もあります。例えば：
JavaScript
handleSVGLoaded(イベント) {
const svgElement = イベント.ターゲット;
const xhr = 新しい XMLHttpRequest();
xhr.open('GET', this.svgURL, true);
xhr.onload = () => {
svgElement.innerHTML = xhr.responseText;
};
xhr.send();
}
AI が生成したコード。慎重に確認して使用してください。詳細については FAQ をご覧ください。
参考文献:
*1: 静的リソースの作成とアップロード (Lightning Web コンポーネント開発者ガイド)
*2: 静的リソースを使用する (Lightning Web コンポーネント開発者ガイド)
* 3: lwc:dom="manual" を使用します (Lightning Web コンポーネント開発者ガイド)
* 4: SVG コンテンツをロードする (Lightning Web コンポーネント開発者ガイド)