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 and 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:
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.
Go to Home > Settings > Edit Page
Check the highlighted section (Custom components) in below screenshot
Steps to follow to customize this SVG icon/logo:
- 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.
<aura:component implements="flexipage:availableForAllPageTypes"> <p>SVG Example</p> </aura:component>
- 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.
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. ]
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg height="450" width="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <polygon points="200,20 80,396 380,156 20,156 320,396" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>
Now Go to Home > Settings > Edit Page
Check the component which we created in earlier step and verify the icon.
That’s it my friend. Happy Coding.
- Learn SVG
- W3 Schools to apply SVG ( https://www.w3schools.com/graphics/svg_polygon.asp ) Example 3.
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:
Name: Brahmaji Tammana
Email: [email protected]
Post By Brahmaji :
- Spring 18 Lightning Components Features/Enhancement/Critical Updates – Highlights
- How To Detect a Device In Salesforce Lightning Component ?
- Powerful Lightning Datatable base component – Example Using Fieldset
- How to use design resource in Lightning Component ?
- Use Lightning Data Service – No To Apex Controller In Lightning Components
- Override Standard Buttons With Lightning Component – Lightning Experience
- Custom Record Type Selection Lightning Component with force:createRecord event
- How to Add Lightning Component as a Quick Action in Salesforce
- How to use SVG in Salesforce Lightning Component ?
- Work Fast With Keyboard Shortcuts in Salesforce Lightning Experience