Alternative to ligtning:icon in Lightning Component (Reusable SVG Lighting Component)

Requirement:
Multiple rows with close option should be displayed. On click on close icon beside a specific row it should be cleared. There is a need to give index for the icon if you use lightning:icon you cannot assign dynamic id as aura:id won't support dynamic value.

To achieve the above requirement it should be a html button/ html icon. To should the svg icon without using lighting:icon following approach will be helpful.

Reusable Lighting Component for svg icon -

	<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="id" default="" type="String" description="Component Id" />
	<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" />
	<aura:attribute name="pathd" default="" type="String" />
	<span aura:id="container" class="{!v.containerClass}">
	<span aura:id="assistiveText" class="slds-assistive-text">{!v.assistiveText}</span>
	</span>
	</aura:component>

view raw svgIcon.cmp hosted with ❤ by GitHub

	({
	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 id = component.get("v.id");
	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 = classname;
	component.set("v.containerClass", containerClassName);
	var svgroot = document.createElementNS(svgns, "svg");
	svgroot.setAttribute("aria-hidden", "true");
	svgroot.setAttribute("class", iconClassName);
	svgroot.setAttribute("name", name);
	svgroot.setAttribute("id", id + ':svg');
	svgroot.setAttribute("viewBox", "0 0 24 24");
	svgroot.setAttribute("name", name);
	var shape = document.createElementNS(svgns, "path");
	shape.setAttribute("d", component.get("v.pathd"));
	shape.setAttribute("id", id + ':use');
	svgroot.appendChild(shape);
	var container = component.find("container").getElement();
	container.insertBefore(svgroot, container.firstChild);
	}
	})

view raw svgIconHelper.js hosted with ❤ by GitHub

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

view raw svgIconRenderer.js hosted with ❤ by GitHub

Usage for the above component -

<c:svgIcon id="clear" pathd="M 22.4 14.3 H 21 c -0.4 0 -0.7 0.3 -0.7 0.7 v 4.6 c 0 0.4 -0.3 0.7 -0.7 0.7 H 4.4 c -0.4 0 -0.7 -0.3 -0.7 -0.7 V 15 c 0 -0.4 -0.3 -0.7 -0.7 -0.7 H 1.6 c -0.4 0 -0.7 0.3 -0.7 0.7 v 6.2 c 0 1 0.9 1.9 1.9 1.9 h 18.4 c 1 0 1.9 -0.9 1.9 -1.9 V 15 c 0 -0.4 -0.3 -0.7 -0.7 -0.7 Z m -10.9 3.1 c 0.3 0.2 0.7 0.2 1 0 l 6.2 -6.3 c 0.3 -0.3 0.3 -0.7 0 -0.9 l -0.9 -1 c -0.3 -0.3 -0.7 -0.3 -1 0 l -2.6 2.6 c -0.3 0.2 -0.8 0.1 -0.8 -0.4 V 1.6 c 0 -0.4 -0.4 -0.7 -0.7 -0.7 h -1.4 c -0.4 0 -0.7 0.3 -0.7 0.7 v 9.8 c 0 0.4 -0.5 0.6 -0.8 0.3 L 7.2 9.1 c -0.2 -0.2 -0.6 -0.2 -0.9 0 l -1 1.1 c -0.3 0.2 -0.3 0.6 0 0.9 l 6.2 6.3 Z" class="slds-button__icon slds-icon--x-small"></c:svgIcon> <span class="slds-assistive-text">Clear</span>

view raw svgIcon usage html hosted with ❤ by GitHub

Note:
Go to LightingDesignSystem Website > Icons > save as the icon in IE browser (It should be saved in svg format). You can open the file in note pad and copy the pathd.