function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Brennon Williams 5Brennon Williams 5 

Using the svg and use html tags in Lightning?

Hi,

I'm using svg and use tags in a lightning component. I get the error:
  
Failed to save undefined: No COMPONENT named markup://use found

For the code: 
  
<svg aria-hidden="true" class="icon icon--large icon-standard-user">
                  			<use xlink:href="assets/icons/standard-sprite/svg/symbols.svg#user" />
                		</svg>

What am I doing wrong here?

Thanks!
AshwaniAshwani
Try by wrapping it in  
<![CDATA[

Ex:
  
<![CDATA[
<svg aria-hidden="true" class="icon icon--large icon-standard-user">
                  			<use xlink:href="assets/icons/standard-sprite/svg/symbols.svg#user" />
                		</svg>

]]>
Also, most probably lightning doesn't support <use/> tag. You would workaround this.
 
Brennon Williams 5Brennon Williams 5
Thanks for the reply Ashwani! Wrapping it as CDATA doesn't run the code, unfortunately (it just appears as plaintext at the top of the HTML page). I tried this workaround: http://salesforce.stackexchange.com/questions/77459/including-svg-in-a-lightning-component
but it didn't change anything. Any thoughts on what else I should try?
mmeyers.ax1612mmeyers.ax1612
Take a look at this trailhead tutorial.
https://developer.salesforce.com/trailhead/project/slds-lightning-components-workshop/slds-lc-4
Kevin AkermanisKevin Akermanis
You need to build an SVG helper component.

See this page on the Lightning Design System site: https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/
anilg.sforceanilg.sforce
I have build an SVG helper as per url above, but when i change the code for Lookup at: https://www.lightningdesignsystem.com/components/lookups/ 

It does not work! deep inside javascript, it throws 404 !! what is exact URL i have to use??

To following code: 
<aura:component >
    <div class="slds-form-element slds-lookup" data-select="single">
        <label class="slds-form-element__label" for="lookup-330">Account Name</label>
        <div class="slds-form-element__control">
            <div class="slds-input-has-icon slds-input-has-icon--right">
                <c:svgIcon svgPath="/assets/icons/utility-sprite/svg/symbols.svg#search" category="utility" size="small" name="search" />
                <input id="lookup-330" class="slds-lookup__search-input slds-input" type="search" placeholder="Search Accounts" aria-owns="lookup-330" role="combobox" aria-activedescendent="" aria-expanded="false" aria-autocomplete="list" />
            </div>
        </div>
    </div>
</aura:component>

OR to following
  
<aura:component >
    <div class="slds-form-element slds-lookup" data-select="single">
        <label class="slds-form-element__label" for="lookup-330">Account Name</label>
        <div class="slds-form-element__control">
            <div class="slds-input-has-icon slds-input-has-icon--right">
                <c:svgIcon svgPath="/resource/slds214/assets/icons/utility-sprite/svg/symbols.svg#search" category="utility" size="small" name="search" />
                <input id="lookup-330" class="slds-lookup__search-input slds-input" type="search" placeholder="Search Accounts" aria-owns="lookup-330" role="combobox" aria-activedescendent="" aria-expanded="false" aria-autocomplete="list" />
            </div>
        </div>
    </div>
</aura:component>
User-added image
 
David Murillo DíezDavid Murillo Díez
Once built the SVG helper component, I have it working by uploading SLDS to the static resources (you can upload only the icons: https://www.lightningdesignsystem.com/assets/downloads/salesforce_icons.zip?)
Hope this help!

Anyway I'm pretty sure there would be another way to reference the icons without uploading them, since you are Woking in Salesforce with Lightning components
David
Santosh KumbarSantosh Kumbar
Using <lightning:icon iconName="utility:dash" size="xx-small"/> tag inside lightning component would resolve this issue, if we trying show icons mentioned in  https://lightningdesignsystem.com/icons


--Santosh
Donato Baonguis 1Donato Baonguis 1
Thanks Santosh.. your reply helped me with the issue I was having.