[SalesForce] How to refer SVG/Images from Lightning Design System static resource to Lightning app

Please guide me in using SVG/Icons given in Lightning Design system in Lightning component. Is it through ltng:require?

EDIT:

I need to refer SVGs in the LDS Bundle(static resource).

Best Answer

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400">
  <circle cx="100" cy="100" r="50" stroke="black"
    stroke-width="5" fill="red" />
</svg>

Here is an sample code for you.

Reference 1

Reference 2

Related Solutions

[SalesForce] Refer static resource in css of lightning component

you can certainly refer the static resource contents in your app/component.css using /resource/resource_name format.

Here's a sample app which I tried in my org to set div's background-image property by referring the slds loading image in the static resource.

testVFPage.app

<aura:application access="GLOBAL">
  <div>
     <div class="loading" style="height: 166px;width: 189px;">
     </div>
  </div>
</aura:application>

testVFPage.css

.THIS .loading{
    background-image: url(/resource/loading) 
}

Output:

[SalesForce] Lightning Design System SVG Path Issues

for icons I would recommend using standard salesforce provided components instead:

<lightning:icon iconName="utility:right"/>

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_icon.htm

linked to the icons in that doc -

https://lightningdesignsystem.com/icons/

Best Answer

Related Solutions

[SalesForce] Refer static resource in css of lightning component

[SalesForce] Lightning Design System SVG Path Issues

Related Topic