To include a custom SVG in a Lightning web component, you need to follow these three steps:
* Upload the SVG as a static resource. You can use the Static Resource page in Setup or the Salesforce CLI to upload the SVG file as a static resource. You need to give it a name and a description, and optionally specify a cache control setting1.
* Import the static resource and provide a getter for it in JavaScript. In your Lightning web component's JavaScript file, you need to import the static resource using the @salesforce/resourceUrl module. Then,
* you need to define a getter function that returns the URL of the static resource2. For example:
JavaScript
import { LightningElement } from 'lwc';
import customSVG from '@salesforce/resourceUrl/customSVG';
export default class MyComponent extends LightningElement {
get svgURL() {
return customSVG;
}
}
AI-generated code. Review and use carefully. More info on FAQ.
* Reference the getter in the HTML template. In your Lightning web component's HTML template, you need to use the <svg> tag with the lwc:dom="manual" directive to reference the getter function that returns the URL of the static resource3. For example:
HTML
<template>
<svg lwc:dom="manual" onload={handleSVGLoaded}></svg>
</template>
AI-generated code. Review and use carefully. More info on FAQ.
In the JavaScript file, you also need to define a handleSVGLoaded method that uses the XMLHttpRequest object to fetch the SVG content and append it to the <svg> element4. For example:
JavaScript
handleSVGLoaded(event) {
const svgElement = event.target;
const xhr = new XMLHttpRequest();
xhr.open('GET', this.svgURL, true);
xhr.onload = () => {
svgElement.innerHTML = xhr.responseText;
};
xhr.send();
}
AI-generated code. Review and use carefully. More info on FAQ.
References:
* 1: Create and Upload a Static Resource (Lightning Web Components Developer Guide)
* 2: Use a Static Resource (Lightning Web Components Developer Guide)
* 3: Use lwc:dom="manual" (Lightning Web Components Developer Guide)
* 4: Load the SVG Content (Lightning Web Components Developer Guide)