Step 1: Create the Lightning Component
Log into your org, and open the Developer Console. Create a new Lightning component from the menu: File > New > Lightning Component
Name your component: svgIcon
Step 2: Write code in svgIcon.cmp using Component tab
<aura:component> <aura:attribute name="svgPath" default="" type="String" description="the path for the icon in the static resource, this will be use in a SVG use tag" /> <aura:attribute name="name" default="" type="String" description="Symbol name of icon" /> <aura:attribute name="class" default="" type="String" description="the class of this SVG tag, can be use for CSS purpose" /> <aura:attribute name="containerClass" default="" type="String" description="Container class name for span container of icon" /> <aura:attribute name="category" default="" type="String" description="Category of icon- action, standard, utility etc." /> <aura:attribute name="size" default="" type="String" description="Size of icon-- small, medium, large" /> <aura:attribute name="assistiveText" default="" type="String" description="Description name of icon" /> <span aura:id="container" class="{!v.containerClass}"> <span aura:id="assistiveText" class="slds-assistive-text">{!v.assistiveText}</span> </span> </aura:component>
Step 3: Write code in svgIconHelper.js using Helper tab
({ renderIcon: function(component) { var prefix = "slds-"; var svgns = "http://www.w3.org/2000/svg"; var xlinkns = "http://www.w3.org/1999/xlink"; var size = component.get("v.size"); var name = component.get("v.name"); var classname = component.get("v.class"); var category = component.get("v.category"); var containerClassName = [ prefix+"icon__container", prefix+"icon-"+category+"-"+name, classname ].join(' '); var iconClassName = prefix+"icon "+prefix+"icon--" + size; component.set("v.containerClass", containerClassName); var svgroot = document.createElementNS(svgns, "svg"); svgroot.setAttribute("aria-hidden", "true"); svgroot.setAttribute("class", iconClassName); svgroot.setAttribute("name", name); // Add an "href" attribute (using the "xlink" namespace) var shape = document.createElementNS(svgns, "use"); shape.setAttributeNS(xlinkns, "href", component.get("v.svgPath")); svgroot.appendChild(shape); var container = component.find("container").getElement(); container.insertBefore(svgroot, container.firstChild); } })
Step 4: Write code in svgIconRenderer.js using Renderer tab
({ render: function(component, helper) { // By default, after the component finished loading data/handling events, // it will call this render function this.superRender() will call the // render function in the parent component. var ret = this.superRender(); // Calls the helper function to append the SVG icon helper.renderIcon(component); return ret; } })
Step 5: Use the New Component
Now we create new Lightning Component and paste svg component like as below image:
And Now write below code in component:
<aura:component> <ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css"/> <div class="slds"> <div class="slds-page-header"> <div class="slds-grid"> <div class="slds-col slds-has-flexi-truncate"> <div class="slds-media"> <div class="slds-media__figure"> <c:svgIcon svgPath="/resource/SLDS/assets/icons/standard-sprite/svg/symbols.svg#process" category="standard" size="large" name="user" /> </div> <div class="slds-media__body"> <p class="slds-text-heading--label">SVG Icon</p> <div class="slds-grid"> <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle">Set your SVG</h1> </div> </div> </div> </div> <!-- /slds-col--> </div> <!-- /slds-grid--> </div> <!-- /slds-page-header--> </div> <!-- /slds--> </aura:component>
After the above step, now its time to show preview using Application and this preview is viewing like below image:
Note: Here Static Resource is named SLDS.
Thanks.
Pingback: How to Nested Components in Lightning Component Using Salesforce Lightning Design System | Sushil Kumar
Hi Sushil,
This is great. I do have one question though, how would you go about adding this component to a VF page? Here’s what I have tried but have not had success. Any assistance you could provide will be appreciated.
LikeLike
Hi Dustin
I think you should use lightning out for adding lightning component in visualforce page and you can see below link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm
Thanks
LikeLike
Sorry – here is what I have tried so far…
$Lightning.use(“c:svgIcon”, function() {
$Lightning.createComponent(“c:svgIcon”,
{ svgPath : “/resource/LightningDesignSystem/assets/icons/standard-sprite/svg/symbols.svg#user”,
category=”standard”,
size=”large”,
name=”user” },
“lightning”,
function(cmp) {
// do some stuff
});
});
LikeLike
Hi Dustin
i dont know what you want to do but i think this blog post link will solve your problem see in blow:
https://balkishankachawa.wordpress.com/2015/10/31/lightning-component-remote-objects-and-visualforce-page/
LikeLike
Hi Friends
please refer this link . it will be helpfull
https://developer.salesforce.com/docs/atlas.en-us.204.0.lightning.meta/lightning/aura_compref_lightning_buttonIcon.htm?search_text=onclick
LikeLiked by 1 person
Hi, I have done all the above steps but I keep getting this error “Uncaught TypeError: Cannot read property ‘expando’ of undefined
throws at /resource/jquerymin:5:8057”
LikeLiked by 1 person
Hi Akshata
you no need to include jQuerymin
LikeLike