6

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?

Improve this question

1 Answer 1

Reset to default
8

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.

Improve this answer
2
  • Cool, so I just replace the code from my question with the code from your answer. That seems to work, thanks! I'm just perplexed at how I should have known that (couldn't find any resources on it) or why the Lightning Design code doesn't just include the lightning:icon reference to begin with.
    – Tony Rush
    Feb 23, 2018 at 20:01
  • @TonyRush SLDS is a general-purpose design system (like Google's Material). LEX is built atop SLDS. Two different teams work on LEX and SLDS, which is why SLDS is "one release ahead" of LEX. SLDS gets updated, then the LEX team picks up those classes and packages them in to components. svgIcon was LEX team's workaround for when lightning:icon didn't exist, so once they added it, svgIcon was deprecated. I guess there should still be a document somewhere that explains how to use custom SVGs, but... well, here we are. I think they'll get around to it eventually.
    – sfdcfox
    Feb 23, 2018 at 20:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .