1

I am stuck at 1 place where SVG an USE are used. I got to 1 link Mentioned below which says : This method is deprecated. https://www.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper/

Is this saying SVG and USE are depriciated and we cant or we should use them . In that case what we can do ? How to get the desired lightning look and feel.?

Can someone give an example where we are using SVG & USE and getting same look and feel like Lightning. Please bear the pain to explain from all basic things to start. Like any Static resource is need etc etc ....

Like I tried to make a Path or a tree example . I copied code from :https://www.lightningdesignsystem.com/components/path/ But contains SVG and USE

Below code is my component and I used this Component on an application and seeing the preview I am not getting what I expected. Its not coming in correct UI. Only test I can see.

Failed to save undefined: No COMPONENT named markup://use found : [markup://NBLight:SLDS_EG_PATH_COMPONENT]: Source

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<div class="slds-path-coach">
  <div class="slds-grid">
    <div class="slds-tabs_path" role="application">
      <ul class="slds-tabs_path__nav" role="listbox" aria-orientation="horizontal">
        <li class="slds-tabs_path__item slds-is-complete slds-is-incomplete slds-is-current" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <c:svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </c:svg>
              <span class="slds-assistive-text">Stage Complete</span>
            </span>
            <span class="slds-tabs_path__title">Contacted</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-complete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-2" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <c:svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </c:svg>
              <span class="slds-assistive-text">Stage Complete</span>
            </span>
            <span class="slds-tabs_path__title">Open</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-current" role="presentation">
          <a aria-selected="true" class="slds-tabs_path__link" href="javascript:void(0);" id="path-3" role="option" tabindex="0">
            <span class="slds-tabs_path__stage">
              <c:svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </c:svg>
              <span class="slds-assistive-text">Current Stage:</span>
            </span>
            <span class="slds-tabs_path__title">Unqualified</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-incomplete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-4" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <c:svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </c:svg>
            </span>
            <span class="slds-tabs_path__title">Nurturing</span>
          </a>
        </li>
        <li class="slds-tabs_path__item slds-is-incomplete" role="presentation">
          <a aria-selected="false" class="slds-tabs_path__link" href="javascript:void(0);" id="path-5" role="option" tabindex="-1">
            <span class="slds-tabs_path__stage">
              <c:svg class="slds-icon slds-icon_x-small" aria-hidden="true">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </c:svg>
            </span>
            <span class="slds-tabs_path__title">Closed</span>
          </a>
        </li>
      </ul>
    </div>
    <button class="slds-button slds-button_brand slds-path__mark-complete slds-no-flex slds-m-horizontal_small">
      <c:svg class="slds-button__icon slds-button__icon_left" aria-hidden="true">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
      </c:svg>Mark Status as Complete</button>
  </div>
</div>
< / aura:component >

But I am getting desired display. How can I get the desired look and feel?

Improve this question
1
  • I tried to display components mentioned in lightningdesignsystem.com Many of those contain SVG and USE tags . For eg PATH , tree, tooltip to name a few. I am either getting error or geting a test which is not aligned properly and has a very bad look and feel. How can i get the Look that is mentioned in the Example.
    – NITIN
    Commented Jun 14, 2017 at 10:01

1 Answer 1

Reset to default
2

SVG isn't directly supported in Lightning at this time, although you can do so by way of using an afterRender or the Lightning SVG component helper. However, what that documentation is saying is that the SVG component helper should no longer be used, because we now have lightning:icon and lightning:buttonIcon; the correct method for using a Lightning Icon is to use lightning:icon, as follows:

<lightning:icon size="x-small" iconName="utility:check" />

This emits the appropriate SVG/USE tags on your behalf. If you need to include custom SVG icons, such as those in a static resource, you'd still need to use the SVG helper, or a variant of the helper for including SVG elements, but you should not use the SVG helper component to include Lightning icons.

As a full example, let's say you want to implement Tooltips. To modify the code to be used in a Lightning Component, you would simply do this:

<div style="padding-left:2rem;padding-top:5rem;position:relative;">
    <div class="slds-form-element">
        <div class="slds-form-element__icon slds-align-middle">

            <button class="slds-button slds-button_icon slds-button slds-button_icon" aria-describedby="help" title="Help">
                <lightning:icon iconName="utility:info" size="xx-small" />
                <span class="slds-assistive-text">Help</span>
            </button>
        </div>
    </div>
    <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left" role="tooltip" id="help" style="position:absolute;top:0px;left:15px;">
        <div class="slds-popover__body">Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi.</div>
    </div>
</div>
Improve this answer
3
  • Thanks @ sfdcfox for ur reply . I have further query . If I need to use components that still have SVG and USE please give a simple example of how u are doing it using lightning:icon . like if u go to lightningdesignsystem.com/components/tooltips there you will see svg and use , Now as u are saying Lightning:Icon should be used . 1) How will i use it in this particular example ? 2)Also Do i need to load any static resource to get look and feel . ? 3)If yes then where do I need to give the path/reference of static resource,if atall.
    – NITIN
    Commented Jun 14, 2017 at 11:44
  • @NITIN (1) Provided example in answer, (2) lightning:icon works without any static resources automatically, but if writing your own "aura:application", remember that you must use extends="force:slds" to import the correct assets.
    – sfdcfox ♦
    Commented Jun 14, 2017 at 13:09
  • Thanks @ sfdcfox appreciate ur help , it fixed my issue. Now i am getting the desired result. Also I was missing extends="force:slds" in my app . Thanks alot
    – NITIN
    Commented Jun 14, 2017 at 16:28

You must log in to answer this question.

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