10

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?

Improve this question
2
  • lightning:icon is recommended way to use SVGs
    – Raul
    Commented Aug 6, 2018 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
    Commented May 10, 2019 at 11:57

2 Answers 2

Reset to default
12

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.

Update 30 April 2021: This no longer seems to be documented in the SLDS website. I attempted to check the wayback machine to verify the change, but the snapshot from April 2019 didn't have the full page.

Let's catalog the image paths that everyone has found so far; if anyone finds more, please add them to this answer.

  • Open Road: /img/chatter/OpenRoad.svg
  • Desert: /img/chatter/Desert.svg
  • No Events: /projRes/ui-home-private/emptyStates/noEvents.svg
  • No Tasks: /projRes/ui-home-private/emptyStates/noTasks.svg
  • No Assistant: /projRes/ui-home-private/emptyStates/noAssistant.svg
Improve this answer
6
  • 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
    Commented Aug 6, 2018 at 10:43
  • @AdityaVijay Do you know the path for setup # ??
    – Sagar Thoriya
    Commented Aug 9, 2018 at 7:33
  • @SagarThoriya not sure if I understood setup #?
    – Aditya Vijay
    Commented Aug 9, 2018 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
    Commented Aug 9, 2018 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
    Commented Aug 9, 2018 at 13:17
1

Found another one (No Access): /img/globalnav/NoNavItems.svg OR /projRes/ui-home-private/errorStates/noAccess.svg

Improve this answer
1

You must log in to answer this question.

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