0

I've made custom svgIcon component from SLDS tutorial to use icons in my Lightning components and apps.

I want to write controller that updates "svgPath" attribute after clicking, so my picture of my icon will change. I've impleneted var with my svgIcon component and used set method for this attribute but it doesn't worked.

<aura:component > 
  <c:svgIcon aura:id="icon" svgPath="/resource/slds213/assets/icons/standard-sprite/svg/‌​symbols.svg#account" category="standard" size="small" name="account" /> 
   <button class="slds-button slds-button--icon" aria-haspopup="true" onclick="{!c.changeIcon}"> 
      <c:svgIcon class="slds-icon-text-default" svgPath="/resource/slds213/assets/icons/utility-sprite/svg/s‌​ymbols.svg#down" category="utility" size="xx-small" name="down" /> 
   </button> 
 </aura:component >

Controller class

({ changeIcon : 
      function(cmp) { 
       var item = cmp.find('icon'); 
       item.set("v.svgPath", "/resource/slds213/assets/icons/standard-sprite/svg/symbols.‌​svg#user"); 
      } 
 })

Do you have any suggestions?

8
  • Would you mind showing us your current code?
    – sfdcfox
    Oct 24, 2016 at 19:17
  • I assume you are using a custom component for the svg creation and i believe you are using renderer method for creating the svg icon ?? Is this the case ?
    – Sumuga
    Oct 24, 2016 at 19:31
  • <aura:component > <c:svgIcon aura:id="icon" svgPath="/resource/slds213/assets/icons/standard-sprite/svg/symbols.svg#account" category="standard" size="small" name="account" /> <button class="slds-button slds-button--icon" aria-haspopup="true" onclick="{!c.changeIcon}"> <c:svgIcon class="slds-icon-text-default" svgPath="/resource/slds213/assets/icons/utility-sprite/svg/symbols.svg#down" category="utility" size="xx-small" name="down" /> </button> </aura:component >
    – fabtosz
    Oct 24, 2016 at 19:33
  • ({ changeIcon : function(cmp) { var item = cmp.find('icon'); item.set("v.svgPath", "/resource/slds213/assets/icons/standard-sprite/svg/symbols.svg#user"); } })
    – fabtosz
    Oct 24, 2016 at 19:33
  • Looks like you are making use of the trial head module which shows how to render svg as a custom component. However what it does not mention is the use of this.superRender and this.superReRender() .. kindly ensure you return this.superRender and this.superRerender() from the render and reRender methods respectively. Reference : developer.salesforce.com/docs/atlas.en-us.lightning.meta/…
    – Sumuga
    Oct 24, 2016 at 19:56

1 Answer 1

3

Again the easiest way to do it is to use lightning:Icon from winter 17 release. Reference : lightning:Icon. This component will give you access to almost all the common svg icons used in the standard lightning design libraries ( includes action, custom, standard and utitly icons ) and also it gives you control over the size and variants.

So the implementation goes something like follows

enter image description here Lihgnting Icon Controller

As mentioned earlier this would work well for almost all lightning design system icons. However if you want to use custom svg icons, then you must implement a custom implementation like follows

Reference : Custom Svg Icons using Renderer Methods

If you notice this version of svg icon custom component uses helper methods to render the svg icon and append it to the DOM element and it returns this.superRender() as recommended in the documents below

Reference : Renderer Life Cycle

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .