8

I looked into this to use illustration in my component. https://lightningdesignsystem.com/components/illustration/

As we can't use svg tag in lightning component, so is there any way by which we can make a use of this?

One solution I thought is copying the svg code in a file and added it to resource, and use the path in lightning:icon src attribute. Is there any other good solution for that if framework recommends?

  • lightning:icon is recommended way to use SVGs – Raul Aug 6 '18 at 7:00
  • @Raul illustrations aren't available as slds icons. Because image generated by Illustrations are pretty big and will become non-understanble in icons – Ashish Sharma May 10 at 11:57
9

I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:

<div class="slds-illustration slds-illustration_large" aria-hidden="true">
    <img src="/img/chatter/OpenRoad.svg" class="slds-illustration__svg" alt=""/>
    <div class="slds-text-color_weak">
        <h3 class="slds-text-heading_medium">Some title</h3>
    </div>
</div>

This works fine but you'll have to inspect the source of existing pages to figure out the proper SVG file names.

Update 14 April 2019: this is now documented in SLDS website.

  • 1
    Salesforce does it like this, and asks us to use the whole code in documentation, great!! I didn't get the code what I needed (gone fishing one), but some more references just in case anybody needs are /projRes/ui-home-private/emptyStates/noEvents.svg, /projRes/ui-home-private/emptyStates/noTasks.svg, /projRes/ui-home-private/emptyStates/noAssistant.svg etc! – Aditya Vijay Aug 6 '18 at 10:43
  • @AdityaVijay Do you know the path for setup # ?? – Sagar Thoriya Aug 9 '18 at 7:33
  • @SagarThoriya not sure if I understood setup #? – Aditya Vijay Aug 9 '18 at 11:27
  • @AdityaVijay here in the document they have svg image for setup lightningdesignsystem.com/components/illustration/#Setup i am looking for the same. – Sagar Thoriya Aug 9 '18 at 11:39
  • @SagarThoriya no I didn't find any for this, I pasted in my comment above which I found, just 3 as of now! :-) – Aditya Vijay Aug 9 '18 at 13:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.