PDI · Question #152
Which three steps allow a custom SVG to be included in a Lightning web component? Choose 3 answers
The correct answer is A. Upload the SVG as a static resource. B. Import the static resource and provide a getter for it in JavaScript. C. Reference the getter in the HTML template.. To include a custom SVG in a Lightning Web Component, a developer must upload the SVG as a static resource, import it into the JavaScript file, and then reference it via a getter in the HTML template.
Question
Which three steps allow a custom SVG to be included in a Lightning web component? Choose 3 answers
Options
- AUpload the SVG as a static resource.
- BImport the static resource and provide a getter for it in JavaScript.
- CReference the getter in the HTML template.
- DReference the import in the HTML template.
- EImport the SVG as a content asset file.
How the community answered
(20 responses)- A75% (15)
- D10% (2)
- E15% (3)
Why each option
To include a custom SVG in a Lightning Web Component, a developer must upload the SVG as a static resource, import it into the JavaScript file, and then reference it via a getter in the HTML template.
Custom SVG files must be uploaded as static resources in Salesforce so they can be securely referenced and bundled with Lightning Web Components.
The static resource containing the SVG must be imported into the component's JavaScript file, and a getter property should be created to expose its URL to the HTML template.
The HTML template then references the JavaScript getter (e.g., `<img src={svgGetter}>`) which provides the URL of the imported static resource, enabling the SVG to be displayed.
The HTML template references a JavaScript getter or property that holds the imported static resource's URL, not the direct import statement itself.
While content asset files exist, the standard and most direct method for including custom SVG images for use within Lightning Web Components is by uploading them as static resources.
Concept tested: Using static resources for custom SVGs in LWC
Source: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_static_resources#lwc_create_static_resource_import_svg
Topics
Community Discussion
No community discussion yet for this question.