I have created an SVG Lightning component that takes 3 attributes, namely, "class","xlinkHref" and "areaHidden".
<aura:component >
<aura:attribute name="class" type="String" description="CSS classname for the SVG element" />
<aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#download" />
<aura:attribute name="ariaHidden" type="String" default="false" description="aria-hidden true or false. defaults to true" />
</aura:component>
The renderer.js given below does the ground-work to render the SVG icon provided through xlinkHref attribute.
({
render: function(component, helper) {
//grab attributes from the component markup
var classname = component.get("v.class");
var xlinkhref = component.get("v.xlinkHref");
var ariaHidden = component.get("v.ariaHidden");
//return an svg element w/ the attributes
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;
}
})
Here is the example use case:
<c:svg class="slds-icon" xlinkHref="/resource/SLDS100/assets/icons/standard-sprite/svg/symbols.svg#home" />
All this work fine, as long as I provide path to any icon within SLDS Sprite maps (Action, custom, standard, Utility). However, the list is not exhaustive. I'm looking for a "pause" icon and I couldn't find it in SLDS sprite maps.
I tried to use a pause SVG from here, saved it under static resources and in the xlinkHref parameter I used "/resources/name_of_the_static_resource_for_pause_icon". The icon didn't turn up on the UI.
Can anyone point out what's wrong?