Apex Code Development You need to sign in to do that
Don't have an account?
Chandan Kumar 100 How to use SVG path in Lightning !!!!
my org create first app and some error are occure
now code is Here......
<aura:application >
<ul class="slds-timeline">
<li>
<div class="slds-timeline__item">
<span class="slds-assistive-text">Task</span>
<div class="slds-media">
<div class="slds-media__body">
<div class="slds-media slds-timeline__media slds-timeline__media_task">
<div class="slds-media__figure slds-timeline__icon">
<div class="slds-icon_container slds-icon-standard-task" title="task">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-351">
<label class="slds-checkbox__label" for="checkbox-351">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">mark-complete</span>
</label>
</span>
</div>
<div class="slds-media__body">
<h3 class="slds-truncate" title="Review proposals for EBC deck with larger team and have marketing review this">
<a href="javascript:void(0);">Review proposals for EBC deck with larger team and have marketing review this</a>
</h3>
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-m-right_large">
<span class="slds-text-title">Contact:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Lei Chan</a>
</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">Assigned to:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Betty Mason</a>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="slds-media__figure slds-media__figure_reverse">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Task, Review proposals">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for Task, Review proposals</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slds-timeline__item">
<span class="slds-assistive-text">Event</span>
<div class="slds-media">
<div class="slds-media__body">
<div class="slds-media slds-timeline__media slds-timeline__media_event">
<div class="slds-media__figure slds-timeline__icon">
<div class="slds-icon_container slds-icon-standard-event" title="event">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#event"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<h3 class="slds-truncate" title="Company One — EBC Meeting">
<a href="javascript:void(0);">Company One — EBC Meeting</a>
</h3>
<p class="slds-truncate" title="Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.">Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.</p>
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-m-right_large">
<span class="slds-text-title">Time:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Feb 23, 2015 11:00am–12:00pm</a>
</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">Location:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">300 Pike St, San Francisco CA</a>
</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">Name:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Lei Chan</a>,
<a href="javascript:void(0);">Jason Dewar</a>,
<a href="javascript:void(0);">Gwen Jones</a> and
<a href="javascript:void(0);">Pete Schaffer</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="slds-media__figure slds-media__figure_reverse">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Event, Company One">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for Event, Company One</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slds-timeline__item">
<span class="slds-assistive-text">Call</span>
<div class="slds-media">
<div class="slds-media__body">
<div class="slds-media slds-timeline__media slds-timeline__media_call">
<div class="slds-media__figure slds-timeline__icon">
<div class="slds-icon_container slds-icon-standard-log-a-call" title="call">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#log_a_call"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<h3 class="slds-truncate" title="Mobile conversation on Monday">
<a href="javascript:void(0);">Mobile conversation on Monday</a>
</h3>
<p class="slds-truncate" title="Lei seemed interested in closing this deal quickly! Let’s move.">Lei seemed interested in closing this deal quickly! Let’s move.</p>
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-m-right_large">
<span class="slds-text-title">Name:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Lei Chan</a>
</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">Assigned to:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Betty Mason</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="slds-media__figure slds-media__figure_reverse">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Call, Mobile conversation">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for Call, Mobile conversation</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slds-timeline__item">
<span class="slds-assistive-text">Email</span>
<div class="slds-media">
<div class="slds-media__body">
<div class="slds-media slds-timeline__media slds-timeline__media_email">
<div class="slds-media__figure slds-timeline__icon">
<div class="slds-icon_container slds-icon-standard-email" title="email">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#email"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<h3 class="slds-truncate" title="Mobile conversation on Monday">
<a href="javascript:void(0);">Mobile conversation on Monday</a>
</h3>
<p class="slds-truncate" title="Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.</p>
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-truncate_container_50 slds-m-right_large slds-grid">
<span class="slds-text-title">To:</span>
<span class="slds-text-body_small slds-m-left_xx-small slds-truncate" title="Lei Chan with Long Name that might go on for quite some distance futher than you might expect">
<a href="javascript:void(0);">Lei Chan with Long Name that might go on for quite some distance futher than you might expect</a>
</span>
<span class="slds-no-flex slds-text-body_small"> + 44 more</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">From:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Jason Dewar</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="slds-media__figure slds-media__figure_reverse">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Email, Mobile conversation">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for Email, Mobile conversation</span>
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</aura:application >
AND ERROR MSG is
now code is Here......
<aura:application >
<ul class="slds-timeline">
<li>
<div class="slds-timeline__item">
<span class="slds-assistive-text">Task</span>
<div class="slds-media">
<div class="slds-media__body">
<div class="slds-media slds-timeline__media slds-timeline__media_task">
<div class="slds-media__figure slds-timeline__icon">
<div class="slds-icon_container slds-icon-standard-task" title="task">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-checkbox">
<input type="checkbox" name="options" id="checkbox-351">
<label class="slds-checkbox__label" for="checkbox-351">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label slds-assistive-text">mark-complete</span>
</label>
</span>
</div>
<div class="slds-media__body">
<h3 class="slds-truncate" title="Review proposals for EBC deck with larger team and have marketing review this">
<a href="javascript:void(0);">Review proposals for EBC deck with larger team and have marketing review this</a>
</h3>
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-m-right_large">
<span class="slds-text-title">Contact:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Lei Chan</a>
</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">Assigned to:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Betty Mason</a>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="slds-media__figure slds-media__figure_reverse">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Task, Review proposals">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for Task, Review proposals</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slds-timeline__item">
<span class="slds-assistive-text">Event</span>
<div class="slds-media">
<div class="slds-media__body">
<div class="slds-media slds-timeline__media slds-timeline__media_event">
<div class="slds-media__figure slds-timeline__icon">
<div class="slds-icon_container slds-icon-standard-event" title="event">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#event"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<h3 class="slds-truncate" title="Company One — EBC Meeting">
<a href="javascript:void(0);">Company One — EBC Meeting</a>
</h3>
<p class="slds-truncate" title="Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.">Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.</p>
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-m-right_large">
<span class="slds-text-title">Time:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Feb 23, 2015 11:00am–12:00pm</a>
</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">Location:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">300 Pike St, San Francisco CA</a>
</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">Name:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Lei Chan</a>,
<a href="javascript:void(0);">Jason Dewar</a>,
<a href="javascript:void(0);">Gwen Jones</a> and
<a href="javascript:void(0);">Pete Schaffer</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="slds-media__figure slds-media__figure_reverse">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Event, Company One">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for Event, Company One</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slds-timeline__item">
<span class="slds-assistive-text">Call</span>
<div class="slds-media">
<div class="slds-media__body">
<div class="slds-media slds-timeline__media slds-timeline__media_call">
<div class="slds-media__figure slds-timeline__icon">
<div class="slds-icon_container slds-icon-standard-log-a-call" title="call">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#log_a_call"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<h3 class="slds-truncate" title="Mobile conversation on Monday">
<a href="javascript:void(0);">Mobile conversation on Monday</a>
</h3>
<p class="slds-truncate" title="Lei seemed interested in closing this deal quickly! Let’s move.">Lei seemed interested in closing this deal quickly! Let’s move.</p>
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-m-right_large">
<span class="slds-text-title">Name:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Lei Chan</a>
</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">Assigned to:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Betty Mason</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="slds-media__figure slds-media__figure_reverse">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Call, Mobile conversation">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for Call, Mobile conversation</span>
</button>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="slds-timeline__item">
<span class="slds-assistive-text">Email</span>
<div class="slds-media">
<div class="slds-media__body">
<div class="slds-media slds-timeline__media slds-timeline__media_email">
<div class="slds-media__figure slds-timeline__icon">
<div class="slds-icon_container slds-icon-standard-email" title="email">
<svg class="slds-icon slds-icon_small" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#email"></use>
</svg>
</div>
</div>
<div class="slds-media__body">
<h3 class="slds-truncate" title="Mobile conversation on Monday">
<a href="javascript:void(0);">Mobile conversation on Monday</a>
</h3>
<p class="slds-truncate" title="Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.</p>
<ul class="slds-list_horizontal slds-wrap">
<li class="slds-truncate_container_50 slds-m-right_large slds-grid">
<span class="slds-text-title">To:</span>
<span class="slds-text-body_small slds-m-left_xx-small slds-truncate" title="Lei Chan with Long Name that might go on for quite some distance futher than you might expect">
<a href="javascript:void(0);">Lei Chan with Long Name that might go on for quite some distance futher than you might expect</a>
</span>
<span class="slds-no-flex slds-text-body_small"> + 44 more</span>
</li>
<li class="slds-m-right_large">
<span class="slds-text-title">From:</span>
<span class="slds-text-body_small">
<a href="javascript:void(0);">Jason Dewar</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="slds-media__figure slds-media__figure_reverse">
<div class="slds-timeline__actions">
<p class="slds-timeline__date">Feb 24</p>
<button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="true" title="More Options for Email, Mobile conversation">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
</svg>
<span class="slds-assistive-text">More Options for Email, Mobile conversation</span>
</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</aura:application >
AND ERROR MSG is
remove <svg> and <use> tags in your code and for display SVG icons you can use
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
or you can create custom lightning component for show SVG icons in lightning component
here is the sample code [see the Step 0 : Create Support SVG Lightning component. part] :-
http://www.sfdcmonkey.com/2017/01/07/custom-lookup-lightning-component/
Hopes it helps
if it helps you, closed your query with choosing best answer so it make proper solution for others in future
thanks ][sfdcmonkey.com (http://sfdcmonkey.com)]
I tried the slution you provided but I am still not able to see the path
<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">
RRF
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
<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">
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
<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">
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
<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">
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
</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">
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/></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">
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
Mark Status as Complete</button>
</div>
</div>
Although no error is coming but I am not getting the desired path.
This is what the result looks like.
Chandan Kumar 100
I think you are missing extends in your application
<aura:application extends="force:slds">
</aura:application>
Let me know if it solves your problem
Markup:
<div id="someDiv"> <img src="{!$Resource.Asset_Name+'/somesvg.svg'}"/> </div>Then in your .css:.THIS #someDiv img{ height:someNumberOfpx; width:someNumberOfpx; }Something to note about lightning:icon: It can only have a maximum size of about 32px and cannot be resized (I think).