Resources

Lightning SVG Icon Component Helper

Currently, you will need to install a helper Lightning Component to render the Lightning Design System sprited icons. This is for several reasons:

  • Sprited non-inline SVGs are not supported in Lightning yet
  • Accessibility compatibility
  • Fill coloring can be styled with CSS

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 new component: svgIcon

Step 2: Paste the Following 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;
  }
})

Step 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 slds222 you might use:

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