How to use SVG Icon in Lightning Component Using Salesforce Lightning Design System

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.