[SalesForce] Lightning SVG Icon Component Helper – SVG class not being set

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?

Best Answer

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.

Related Topic