+ Start a Discussion
\dev\null\dev\null 

Build a basic SVG Icon Component

Can anyone actually get this trailhead to work?
https://developer.salesforce.com/trailhead/project/slds-lightning-components-workshop/slds-lc-4

​I've been trying to learn lightning / lds and maybe i'm missing something?

Component Code:
<aura:component >
  <aura:attribute name="class" type="String" description="CSS classname for the SVG element" />
  <aura:attribute name="xlinkHref" type="String" description="SLDS icon path. Ex: /assets/icons/utility-sprite/svg/symbols.svg#download" />
  <aura:attribute name="ariaHidden" type="String" default="true" description="aria-hidden true or false. defaults to true" />
</aura:component>
Render code:
({
	//Overwrite default render function for svg component
	render: function(component, helper){
		var classname = component.get("v.class");
		var xlinkhref = component.get("v.xlinkHref");
		var ariaHidden = component.get("v.ariaHidden");

		var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
		svg.setAttribute('class', classname);
		svg.setAttribute('aria-hidden', ariaHidden);
		svg.innerHTML = '<use xlink:href="'+ xlinkhref +'"></use>';
		return svg;
	}
})
App Code
<aura:application >
  <div class="slds">
    <ltng:require styles="/resource/SLDS0120/assets/styles/salesforce-lightning-design-system-ltng.css" />
    <span class="slds-icon__container slds-icon-standard-account">
      <c:svg class="slds-icon" xlinkHref="/resource/SLDS0120/assets/icons/standard-sprite/svg/symbols.svg#account" />
        <span class="slds-assistive-text">Account Icon</span>
    </span>
  </div>
</aura:application>
Error:
Error during init : Object doesn't support property or method 'replace'

​Also, enabling debug on lightning components doesn't seem to make a difference, no error is thrown in console so I'm not sure really how to even find my JS in the console sources.
 
Best Answer chosen by \dev\null
SattibabuSattibabu
Using developer edition won't make difference. I don't find any clue resolve your issue and I don't see any reference to a replace property in your code. I had similar kind of experience with trailhead examples where evrything looks good but code won't run. In such scenario i used to try in completely new developer edition and that time it works.  Please make sure you don't have any reference to property called 'replace' in your code and as a suggestable workaround give a try in new developer account. 

All Answers

James LoghryJames Loghry
I don't see any reference to a replace property.  Is it possible there's a handler or controller you're not showing us?  Or perhaps another lightning component in the same app that's throwing the error?  Have you tried this in a different browser (e.g. Chrome instead of IE11)?
\dev\null\dev\null
Tried in edge, IE 11 and chrome, oddly enough chrome's error is:

Error during init : (value || "").replace is not a function

sooo, dunno ... can you make this example work?
SattibabuSattibabu
I have completed this trail without any error.  I did the same as you did. Only difference i noticed is that the SLDS version. Trailhead examples using SLDS090 version , however you are using SLDS0120.  But i am not sure does this make difference.  Please give try by using SLDS090.  
\dev\null\dev\null
I just updated my component / app to use SLDS090 and it's the same error. I even just copied all the code straight from the trailhead and redeployed. I am using a developer environment, i'm not sure if that matters.

​I was also able to get the trailhead step to complete and get the points, but the code just won't actually run.
SattibabuSattibabu
Using developer edition won't make difference. I don't find any clue resolve your issue and I don't see any reference to a replace property in your code. I had similar kind of experience with trailhead examples where evrything looks good but code won't run. In such scenario i used to try in completely new developer edition and that time it works.  Please make sure you don't have any reference to property called 'replace' in your code and as a suggestable workaround give a try in new developer account. 
This was selected as the best answer
\dev\null\dev\null
OK, as long as someone else out there has had a similar experience. Just knowing that there are oddities like this out there is enough for me. Thanks for taking the time to look into this.
jlangjlang
im definitely having the same issue.. problem is im actually trying to use SVGs in a lightning component by using the child component.. bleh what a mess! 
\dev\null\dev\null
Jlang: Yeah we actually gave up on lightning, we were spending too much time with too little results. IMO it is a mess that needs another year or so of development.
isalewisalew
Just ran into this as well. It works in a newer org, but not my original dev org, even though Lightning is fully operational.