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

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

var containerClassName = [
    ].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?

  • Have you set the Renderer as well .There is currently sort of bug for SVG and hence you will need to set the Renderer as well Nov 23 '15 at 1:07
  • Yes I do have renderer as well. It's just certain cases where SVG won't be visible, because it's style class not being set correctly.
    – dzh
    Nov 23 '15 at 4:21

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 = [
    ].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"));

    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.


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


<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">
            <svg aria-hidden="true" class="{!v.class}">
                <use xlink:href="/resource/1440648424000/mynamespace__LightningDesignSystem/assets/icons/{!v.svgPath}"></use>


    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" />
  • FYI, you have a cross site scripting issue here when you assign the value of outerText to outerHTML. This will be exploitable if svgPath can be influenced by the attacker (e.g. passed in as a non-private attribute or app event). Aug 26 '16 at 4:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.