Lightning SVG Icon Component Helper - SVG class not being set

Question

I am quite lame with CSS, but noticed something about this helper.

var classname = component.get("v.class");

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("class", iconClassName);

As you can see, SVG element class is actually generated for you, while in component itself it says:

  <aura:attribute name="class" description="the class of this SVG tag, can be use for CSS purpose" />
  <aura:attribute name="containerClass" description="Container class name for span container of icon" />

So if I put something like:

<c:svg svgPath="/resource/SLDS0102/assets/icons/utility-sprite/svg/symbols.svg#delete" 
                   category="utility" name="delete" class="slds-button__icon" />

It won't actually be visible on my screen. classname is actually getting sent on the container.

Is this correct or do just don't know how to set the styles correctly?

Answer 1

This is a bug in the helper code -- I submitted a pull request with a fix for this several weeks ago, and it's been approved but hasn't been merged yet.

It changes the renderIcon code to:

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

Here's the pull request -- hopefully they'll get around to merging it soon.

UPDATE: the helper code on the SLDS site is now showing the corrected code.

Answer 2

Here's a working example that I've been using:

Component:

<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="class"          default="" type="String" description="the class of this SVG tag, can be use for CSS purpose" />
    <div aura:id="svg_content">
        <![CDATA[
            <svg aria-hidden="true" class="{!v.class}">
                <use xlink:href="/resource/1440648424000/mynamespace__LightningDesignSystem/assets/icons/{!v.svgPath}"></use>
            </svg>
        ]]>
    </div>
</aura:component>

Renderer:

({
    afterRender: function(component, helper) {
        var svg = component.find("svg_content");
        var value = svg.getElement().innerText;
        value = value.replace("<![CDATA[", "").replace("]]>", "");
        svg.getElement().outerHTML = value;        
    }
})

An example of calling the svgIcon component:

<c:svgIcon class="slds-icon slds-icon-text-default slds-icon--small" svgPath="utility-sprite/svg/symbols.svg#search" />