Mixing
How to use slds illustration?
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
2
down vote
favorite
I looked into this to use illustration in my component.
https://lightningdesignsystem.com/components/illustration/
As we can't use svg tag in lightning component, so is there any way by which we can make a use of this?
One solution I thought is copying the svg code in a file and added it to resource, and use the path in lightning:icon src attribute. Is there any other good solution for that if framework recommends?
lightning-components slds svg-icon
asked Aug 6 at 6:44
Aditya Vijay
1299
add a comment |Â
up vote
2
down vote
favorite
I looked into this to use illustration in my component.
https://lightningdesignsystem.com/components/illustration/
As we can't use svg tag in lightning component, so is there any way by which we can make a use of this?
One solution I thought is copying the svg code in a file and added it to resource, and use the path in lightning:icon src attribute. Is there any other good solution for that if framework recommends?
lightning-components slds svg-icon
asked Aug 6 at 6:44
Aditya Vijay
1299
lightning:icon is recommended way to use SVGs
– Raul
Aug 6 at 7:00
add a comment |Â
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I looked into this to use illustration in my component.
https://lightningdesignsystem.com/components/illustration/
As we can't use svg tag in lightning component, so is there any way by which we can make a use of this?
One solution I thought is copying the svg code in a file and added it to resource, and use the path in lightning:icon src attribute. Is there any other good solution for that if framework recommends?
lightning-components slds svg-icon
asked Aug 6 at 6:44
Aditya Vijay
1299
I looked into this to use illustration in my component.
https://lightningdesignsystem.com/components/illustration/
As we can't use svg tag in lightning component, so is there any way by which we can make a use of this?
One solution I thought is copying the svg code in a file and added it to resource, and use the path in lightning:icon src attribute. Is there any other good solution for that if framework recommends?
lightning-components slds svg-icon
asked Aug 6 at 6:44
Aditya Vijay
1299
asked Aug 6 at 6:44
Aditya Vijay
1299
asked Aug 6 at 6:44
Aditya Vijay
1299
asked Aug 6 at 6:44
Aditya Vijay
1299
1299
lightning:icon is recommended way to use SVGs
– Raul
Aug 6 at 7:00
add a comment |Â
lightning:icon is recommended way to use SVGs
– Raul
Aug 6 at 7:00
lightning:icon is recommended way to use SVGs
– Raul
Aug 6 at 7:00
lightning:icon is recommended way to use SVGs
– Raul
Aug 6 at 7:00
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
3
down vote
accepted
I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:
<div class="slds-illustration slds-illustration_large" aria-hidden="true">
<img src="/img/chatter/OpenRoad.svg" class="slds-illustration__svg" alt=""/>
<div class="slds-text-color_weak">
<h3 class="slds-text-heading_medium">Some title</h3>
</div>
</div>
This works fine but you'll have to inspect the source of existing pages to figure out the proper SVG file names.
answered Aug 6 at 8:18
POZ
1,04129
Salesforce does it like this, and asks us to use the whole code in documentation, great!! I didn't get the code what I needed (gone fishing one), but some more references just in case anybody needs are /projRes/ui-home-private/emptyStates/noEvents.svg, /projRes/ui-home-private/emptyStates/noTasks.svg, /projRes/ui-home-private/emptyStates/noAssistant.svg etc!
– Aditya Vijay
Aug 6 at 10:43
@AdityaVijay Do you know the path for setup # ??
– Sagar Thoriya
Aug 9 at 7:33
@SagarThoriya not sure if I understood setup #?
– Aditya Vijay
Aug 9 at 11:27
@AdityaVijay here in the document they have svg image for setup lightningdesignsystem.com/components/illustration/#Setup i am looking for the same.
– Sagar Thoriya
Aug 9 at 11:39
@SagarThoriya no I didn't find any for this, I pasted in my comment above which I found, just 3 as of now! :-)
– Aditya Vijay
Aug 9 at 13:17
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
accepted
I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:
<div class="slds-illustration slds-illustration_large" aria-hidden="true">
<img src="/img/chatter/OpenRoad.svg" class="slds-illustration__svg" alt=""/>
<div class="slds-text-color_weak">
<h3 class="slds-text-heading_medium">Some title</h3>
</div>
</div>
This works fine but you'll have to inspect the source of existing pages to figure out the proper SVG file names.
answered Aug 6 at 8:18
POZ
1,04129
Salesforce does it like this, and asks us to use the whole code in documentation, great!! I didn't get the code what I needed (gone fishing one), but some more references just in case anybody needs are /projRes/ui-home-private/emptyStates/noEvents.svg, /projRes/ui-home-private/emptyStates/noTasks.svg, /projRes/ui-home-private/emptyStates/noAssistant.svg etc!
– Aditya Vijay
Aug 6 at 10:43
@AdityaVijay Do you know the path for setup # ??
– Sagar Thoriya
Aug 9 at 7:33
@SagarThoriya not sure if I understood setup #?
– Aditya Vijay
Aug 9 at 11:27
@AdityaVijay here in the document they have svg image for setup lightningdesignsystem.com/components/illustration/#Setup i am looking for the same.
– Sagar Thoriya
Aug 9 at 11:39
@SagarThoriya no I didn't find any for this, I pasted in my comment above which I found, just 3 as of now! :-)
– Aditya Vijay
Aug 9 at 13:17
add a comment |Â
up vote
3
down vote
accepted
I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:
<div class="slds-illustration slds-illustration_large" aria-hidden="true">
<img src="/img/chatter/OpenRoad.svg" class="slds-illustration__svg" alt=""/>
<div class="slds-text-color_weak">
<h3 class="slds-text-heading_medium">Some title</h3>
</div>
</div>
This works fine but you'll have to inspect the source of existing pages to figure out the proper SVG file names.
answered Aug 6 at 8:18
POZ
1,04129
Salesforce does it like this, and asks us to use the whole code in documentation, great!! I didn't get the code what I needed (gone fishing one), but some more references just in case anybody needs are /projRes/ui-home-private/emptyStates/noEvents.svg, /projRes/ui-home-private/emptyStates/noTasks.svg, /projRes/ui-home-private/emptyStates/noAssistant.svg etc!
– Aditya Vijay
Aug 6 at 10:43
@AdityaVijay Do you know the path for setup # ??
– Sagar Thoriya
Aug 9 at 7:33
@SagarThoriya not sure if I understood setup #?
– Aditya Vijay
Aug 9 at 11:27
@AdityaVijay here in the document they have svg image for setup lightningdesignsystem.com/components/illustration/#Setup i am looking for the same.
– Sagar Thoriya
Aug 9 at 11:39
@SagarThoriya no I didn't find any for this, I pasted in my comment above which I found, just 3 as of now! :-)
– Aditya Vijay
Aug 9 at 13:17
add a comment |Â
up vote
3
down vote
accepted
up vote
3
down vote
accepted
I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:
<div class="slds-illustration slds-illustration_large" aria-hidden="true">
<img src="/img/chatter/OpenRoad.svg" class="slds-illustration__svg" alt=""/>
<div class="slds-text-color_weak">
<h3 class="slds-text-heading_medium">Some title</h3>
</div>
</div>
This works fine but you'll have to inspect the source of existing pages to figure out the proper SVG file names.
answered Aug 6 at 8:18
POZ
1,04129
I was wondering about it this weekend and I found out that you can simply use an image tag that points to a SVG file like this:
<div class="slds-illustration slds-illustration_large" aria-hidden="true">
<img src="/img/chatter/OpenRoad.svg" class="slds-illustration__svg" alt=""/>
<div class="slds-text-color_weak">
<h3 class="slds-text-heading_medium">Some title</h3>
</div>
</div>
This works fine but you'll have to inspect the source of existing pages to figure out the proper SVG file names.
answered Aug 6 at 8:18
POZ
1,04129
answered Aug 6 at 8:18
POZ
1,04129
answered Aug 6 at 8:18
POZ
1,04129
answered Aug 6 at 8:18
POZ
1,04129
1,04129
Salesforce does it like this, and asks us to use the whole code in documentation, great!! I didn't get the code what I needed (gone fishing one), but some more references just in case anybody needs are /projRes/ui-home-private/emptyStates/noEvents.svg, /projRes/ui-home-private/emptyStates/noTasks.svg, /projRes/ui-home-private/emptyStates/noAssistant.svg etc!
– Aditya Vijay
Aug 6 at 10:43
@AdityaVijay Do you know the path for setup # ??
– Sagar Thoriya
Aug 9 at 7:33
@SagarThoriya not sure if I understood setup #?
– Aditya Vijay
Aug 9 at 11:27
@AdityaVijay here in the document they have svg image for setup lightningdesignsystem.com/components/illustration/#Setup i am looking for the same.
– Sagar Thoriya
Aug 9 at 11:39
@SagarThoriya no I didn't find any for this, I pasted in my comment above which I found, just 3 as of now! :-)
– Aditya Vijay
Aug 9 at 13:17
add a comment |Â
Salesforce does it like this, and asks us to use the whole code in documentation, great!! I didn't get the code what I needed (gone fishing one), but some more references just in case anybody needs are /projRes/ui-home-private/emptyStates/noEvents.svg, /projRes/ui-home-private/emptyStates/noTasks.svg, /projRes/ui-home-private/emptyStates/noAssistant.svg etc!
– Aditya Vijay
Aug 6 at 10:43
@AdityaVijay Do you know the path for setup # ??
– Sagar Thoriya
Aug 9 at 7:33
@SagarThoriya not sure if I understood setup #?
– Aditya Vijay
Aug 9 at 11:27
@AdityaVijay here in the document they have svg image for setup lightningdesignsystem.com/components/illustration/#Setup i am looking for the same.
– Sagar Thoriya
Aug 9 at 11:39
@SagarThoriya no I didn't find any for this, I pasted in my comment above which I found, just 3 as of now! :-)
– Aditya Vijay
Aug 9 at 13:17
Salesforce does it like this, and asks us to use the whole code in documentation, great!! I didn't get the code what I needed (gone fishing one), but some more references just in case anybody needs are /projRes/ui-home-private/emptyStates/noEvents.svg, /projRes/ui-home-private/emptyStates/noTasks.svg, /projRes/ui-home-private/emptyStates/noAssistant.svg etc!
– Aditya Vijay
Aug 6 at 10:43
Salesforce does it like this, and asks us to use the whole code in documentation, great!! I didn't get the code what I needed (gone fishing one), but some more references just in case anybody needs are /projRes/ui-home-private/emptyStates/noEvents.svg, /projRes/ui-home-private/emptyStates/noTasks.svg, /projRes/ui-home-private/emptyStates/noAssistant.svg etc!
– Aditya Vijay
Aug 6 at 10:43
@AdityaVijay Do you know the path for setup # ??
– Sagar Thoriya
Aug 9 at 7:33
@AdityaVijay Do you know the path for setup # ??
– Sagar Thoriya
Aug 9 at 7:33
@SagarThoriya not sure if I understood setup #?
– Aditya Vijay
Aug 9 at 11:27
@SagarThoriya not sure if I understood setup #?
– Aditya Vijay
Aug 9 at 11:27
@AdityaVijay here in the document they have svg image for setup lightningdesignsystem.com/components/illustration/#Setup i am looking for the same.
– Sagar Thoriya
Aug 9 at 11:39
@AdityaVijay here in the document they have svg image for setup lightningdesignsystem.com/components/illustration/#Setup i am looking for the same.
– Sagar Thoriya
Aug 9 at 11:39
@SagarThoriya no I didn't find any for this, I pasted in my comment above which I found, just 3 as of now! :-)
– Aditya Vijay
Aug 9 at 13:17
@SagarThoriya no I didn't find any for this, I pasted in my comment above which I found, just 3 as of now! :-)
– Aditya Vijay
Aug 9 at 13:17
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f227833%2fhow-to-use-slds-illustration%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
lightning:icon is recommended way to use SVGs
– Raul
Aug 6 at 7:00