[SalesForce] How to use custom svg icons in a lightning component

I have svg icons uploaded as static resource. How can I use these icons in a lightning component?

Best Answer

You can use SFDC svgIcon component https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/

There may be some adaptation if u don't use SLDS svgs but it should do the job :)

Related Solutions

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

<?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

[SalesForce] How to use custom SVG icons in Lightning Component with LockerService enabled

SVG support is coming in the Summer'16 .5 patch scheduled to deploy 1 week from Tuesday. We've been working to verify that libraries like HightCharts, LeafletJS, D3 and other work nicely when running inside a locker.

Best Answer

Related Solutions

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

[SalesForce] How to use custom SVG icons in Lightning Component with LockerService enabled

Related Topic