Display SVG Icon in Lightning Component ( Lightning Component Helper)

Hi ,



To display icons from salesforce.com in lightning we have to follow the below steps.



1) Creating the Lightning Component with the name "svgIcon"



 Create a new Lightning component from the menu: File > New > Lightning Component



2)Paste the following the code



Click on the COMPONENT tab, then paste:



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



Click on the HELPER tab, then paste:

({
  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 containerclass = component.get("v.containerClass");
    var category = component.get("v.category");

    var containerClassName = [
        prefix+"icon_container",
        prefix+"icon-"+category+"-"+name,
        containerclass
        ].join(' ');
    component.set("v.containerClass", containerClassName);

    var svgroot = document.createElementNS(svgns, "svg");
    var iconClassName = prefix+"icon "+prefix+"icon--" + size+" "+classname;
    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);
  }
})



Click on the RENDERER tab, then paste:



({
  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;
  }
})







3.Use the New Component



Use your new component whenever you need an Lightning Design System SVG icon. For example, if your Static Resource is named SLDS you might use:



<c:svgIcon svgPath="/resource/SLDS/assets/icons/standard-sprite/svg/symbols.svg#user" category="standard" size="large" name="user" />


Example Component:
------------------------------

<aura:component >
<div class="slds-icon_container"> 
    <c:svgIcon svgPath="/resource/SLDS/assets/icons/standard-sprite/svg/symbols.svg#user" category="standard" size="large" name="user" />
    </div>
    <div class="slds-icon_container"> 
    <c:svgIcon svgPath="/resource/SLDS/assets/icons/standard-sprite/svg/symbols.svg#account" category="standard" size="large" name="account" class="slds-icon"/>
    </div>
     <div class="slds-icon_container"> 
    <c:svgIcon svgPath="/resource/SLDS/assets/icons/standard-sprite/svg/symbols.svg#contact" category="standard" size="large" name="contact" />
    </div>
</aura:component>

Output:
--------

References:

https://archive-2_1_4.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper

https://trailhead.salesforce.com/en/modules/lightning_design_system/units/lightning-design-system5

https://www.lightningdesignsystem.com/icons/