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?

  • Would you mind showing us your current code? – sfdcfox Oct 24 '16 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 ? – StormBr34ker Oct 24 '16 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 '16 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 '16 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/… – StormBr34ker Oct 24 '16 at 19:56
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

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.