Including SVG in a Lightning Component

This is a helper Lightning Component to render the Lightning Design System sprited icons.

1. Create svgIcon component.

<aura:component access="global">
  <aura:attribute name="class" type="String" access="global"/>
  <aura:attribute name="xlinkHref" type="String" access="global"/>
  <aura:attribute name="ariaHidden" type="String" default="true" access="global"/>
</aura:component>



({
    render: function(component, helper) {
        var classname = component.get("v.class");
        var xlinkhref = component.get("v.xlinkHref");
        var ariaHidden = component.get("v.ariaHidden");
        
        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute('class', classname);
        svg.setAttribute('aria-hidden', ariaHidden);
        svg.innerHTML = '<use xlink:href="'+xlinkhref+'"></use>';
        return svg;
    }
})

2. Upload the SLDS zip file as static resource.

3. Use this new component whenever you need an Lightning Design System SVG icon like below:

<c:svgIcon class="slds-icon slds-icon_x-small" xlinkHref="/resource/slds232/assets/icons/utility-sprite/svg/symbols.svg#user" />

Reference: https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/