1

My case scenario is, I'm creating a list element dynamically which displays few contact names. Besides this I want to display the Account svg icon of slds too. I was wondering if it is possible to create a svg tag dynamically and then pass the parameters to it.

let ispan2   = document.createElement('span');
        ispan2.className = 'slds-icon_container slds-icon-standard-'+parentObj;
        ispan2.id    = 'sssssssssssssssd';
        let svg      = document.createElement('svg');
        let use      = document.createElement('use');
        let link     = document.createElementNS("http://www.w3.org/2000/svg", "a");
        //let profUrl  = {!URLFOR('$Asset.SLDS') + 'assets/icons/utility-sprite/svg/symbols.svg#account'};
        //link.setAttributeNS('http://www.w3.org/1999/xhtml', 'xlink:href',profUrl);
        //link.setAttributeNS('http://www.w3.org/1999/xhtml', 'xlink:href',{!URLFOR($Asset.SLDS, assets/icons/utility-sprite/svg/symbols.svg#account)});
        /*link.setAttributeNS('http://www.w3.org/1999/xhtml', 'xlink:href',$A.get('$Asset.SLDS, assets/icons/utility-sprite/svg/symbols.svg#account'));*/

        //link.setAttributeNS('http://www.w3.org/1999/xhtml', 'xlink:href', '/apexpages/slds/latestassets/icons/utility-sprite/svg/symbols.svg#account');
        //link.setAttributeNS('http://www.w3.org/2000/xhtml', 'xlink:href',"{URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#account')}");
        use.appendChild(link);
        svg.appendChild(use);
        ispan2.appendChild(svg);

Now the problem here in all of the commented and uncommented code is I think I cannot get the proper URL for the icons. I tried to use the image tag too to get the icon but that too failed.

/*let image = document.createElement('img');
        image.src   = {!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#account')} ;
        //image.src = profUrl;
        ispan2.appendChild(image);*/

The above code works in VisualForce pages as it gets proper URL from $Assest.SLDS, but the same doesn't works in the lighting.

PS: One solution that I thought was to create a new component dynamically and then add lightning:icon tag in it and append this component to the list tag, but I think it's not righteous to create a new component just for icons.

1

For simple SLDS, use lightning:icon.

$A.createComponents([["lightning:icon",{iconName:"standard:account"}]],
  function(components) { component.set("v.body", components); });

I haven't found any legitimate way to render SVGs using the use attribute; I believe it's currently filtered/blacklisted as a security restriction. You can use other elements, like path, rect, etc if you wanted to render icons that are not in the library, for example, how I rendered a lightning:progressRing.

  • Thanks @sfdcfox. You said we cannot use it under the <use>, can we render them in the <img> tag. I tried to give it in the img.src tag too, It didn't worked either. – Krishnan Mishra Sep 3 '18 at 6:55
  • @KrishnanMishra no, img doesn't support SVG, you need to use the SVG tag. – sfdcfox Sep 3 '18 at 10:23

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.