Hot answers tagged

4

Have you tried using the <lightning-icon> tag? Documentation can be found here. For your code, the HTML should look something like this: (you should modify the component call a little bit, so your text for "icon" satisfies the specification (i.e. "action:approval") <template if:true={icon}> <lightning-icon icon-name={icon} alternative-...


4

You can make it work using the <lighting-icon> tag. <template if:true={icon}> <lightning-icon icon-name={iconName} size="x-small" ></lightning-icon> </template>


3

You don't need SVG for this. You can use lightning:icon tag for this <span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right iconheight"> <lightning:icon class="slds-icon slds-icon slds-icon_small slds-icon-text-default" iconName="utility:search" size="x-small" alternativeText="icon" /> </span> ...


3

I got this to work. Your SVG should look more like the following: <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" display="none"> <symbol viewBox="0 0 100 100" id="requiredId"> <path fill="#f44" d="m54.3 74.1c-2.4 2.5-6.3 2.5-8.7 0-7.2-7.7-21-22.4-21-...


2

We can't use svg directly, you have to use lightning:icon . Now to convert your SVG into lightning:icon SVG : < svg class="slds-button__icon" aria-hidden="true"> < use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down">< /use> < /svg This if you read carefully, it means from utility type of icon use down icon. Thus ...


2

There is no native SVG component support in aura, you have to use a custom SVG Component or use lightning:icon <lightning:icon iconName="utility:arrowdown" alternativeText="Arrow Down" />


1

Your problem is that id values in Lightning are modified to be globally unique, so it can be challenging to get the Id fragment correct. It is true that SVGs are restricted, but this is mostly just a mismatched ID problem. I don't have a specific solution to this problem, as only ID values are supported, and LWC "manages" them for us, making it ...


1

SVGs are not img compatible. They will not display in an img tag at all. You have to use svg and use elements. Further, svg is not directly supported in Aura, so you'd have to do dynamic rendering. This is troublesome at best. You'd be better off writing an LWC component and exposing the image that way. I went ahead and made a playground for you to look at. ...


1

You need to use the lighting icon, in lighting components, you don't need to use SVG directly. Just specify icontype:iconname <lightning:icon iconName="utility:search" alternativeText="XML" />


1

For the desert illustration you were looking for: <img src="/img/chatter/Desert.svg" class="slds-illustration__svg" alt="Desert"/>


1

Unfortunately, Lightning still doesn't support svg tags. I haven't tried using <img src="/path-to-svg.svg"/> but it should work. Try saving your code as an svg file, uploading it as a static resource, and referencing it that way.


Only top voted, non community-wiki answers of a minimum length are eligible