[SalesForce] No COMPONENT error when using svg markup from Lightning Design System

What I'm about to ask is basically a duplicate question of this, but the answer there seems out of date; the URL found in the answer is a broken link. I was able to find an archive of the link but the fact it's not current tells me I shouldn't be using that solution.

To recap, the issue I'm having is when copying/pasting code from Lightning Design Systems that contains the 'svg' tag, I get the following error when trying to save:

FIELD_INTEGRITY_EXCEPTION
Failed to save comp.cmp: No COMPONENT named markup://svg found : [markup://c:comp]: Source

The File Selector Lightning Design code in question:

    <svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
            <use xlink:href="/resource/SLDS252/assets/icons/utility-sprite/svg/symbols.svg#upload" xmlns:xlink="http://www.w3.org/1999/xlink" />
    </svg>

I've researched this error and understand that I need to create my own custom component that will replace svg, such as c:svgIcon. I did follow the guide in the broken link to create this custom component and then I changed the xml element in my code to c:svgIcon, but even then the code I pulled from Lightning Design includes an aria-hidden attribute, whereas the code given for the custom Lightning Component in the archived link does not include that attribute.

Can someone explain what code I can use to create the svg Custom Component such that code obtained from Lightning Design Systems will work? Is there a more recent and active walk-through guide on setting up the svg Component?

Best Answer

If you need your own custom SVGs, you need to create a custom renderer, as demonstrated in svgIcon. For all standard Lightning SVGs, use the lightning:icon component (or other types, such as lightning:buttonIcon for a button with an icon):

<lightning:icon iconName="utility:upload" size="xx-small" />

All of the SVGs in SLDS that use the "use" element can be emulated via lightning:icon and other components that use the iconName attribute.

I recently made a demo that shows rendering the new Progress Ring that does not yet have a comparable Lightning component yet.

Related Topic