How to use SVG in Salesforce Lightning Component ?

Lightning Component

Sharing is caring!

SVG stands for Scalable Vector Graphics. It is a custom icon resource for components used in Lightning App Builder or Community Builder.

Prerequisites : basic understanding of Lightning Component. and SVG [ You can learn more about SVG at  https://www.w3schools.com/graphics/svg_intro.asp ]

In Lightning Components, The default SVG looks like use SVG Brahmaji Tammanaand if we want to customize this icon to some other icon, we need to create a SVG for our lightning component.

Default SVG looks like below:

use SVG Brahmaji Tammana

What is the use of SVG in Component?  Where we can see it in the Lightning Application ?

SVG icons is used in Salesforce Lightning App Builder or Community Builder.

Navigation:

Go to Home > Settings > Edit Page

use SVG Brahmaji Tammana

Check the highlighted section (Custom components) in below screenshot

use SVG Brahmaji Tammana

 

Steps to follow to customize this SVG icon/logo:
Step 1:
  • Go to Lightning Component and it must be implemented with flexipage:availableForAllPageTypes.

Note: If you haven’t created any lightning component yet, create a component (SVGExample) and add below code.

SVGExample.cmp

 

Step 2:
  • Create a SVG from the component bundle. You just have to click on the SVG in Component bundle it automatically creates a section for you.
use SVG Brahmaji Tammana
Sample

Remove existing code and add below code in SVG then Save your lightning component.

Here we are adding the polygon/star as an icon for this component.

[ W3 Schools to apply SVG ( https://www.w3schools.com/graphics/svg_polygon.asp )  See Example 3. ]

SVGExample.svg

Step 3:

Now Go to Home > Settings > Edit Page

use SVG Brahmaji Tammana

Check the component which we created in earlier step and verify the icon.

use SVG Brahmaji Tammana

 

That’s it my friend.  Happy Coding.

Resources:

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference. ?

if you have any suggestions or issue with it, you can post in comment box 🙂

About The contributor: 

Sharing is caring!

(Visited 5,428 times, 7 visits today)

One thought on “How to use SVG in Salesforce Lightning Component ?

Leave a Reply