Not able to load svg images in LWC

Question

I have loaded svg in static resource in salesforce and need to use the same in lwc.We were using <lightning-icon> to render it.This was working previously but now it throws the following error.

Unsafe attempt to load URL https://test-example.visualforce.com/resource/998787876/iconbill from frame with URL https://test-example.lightning.force.com/lightning/n/lwc_page. Domains, protocols and ports must match.

I have tried the methods from documentation like below <svg xmlns="http://www.w3.org/2000/svg"> <use xlink:href={icon_img}></use> </svg>

but that also throws the following error Access to XMLHttpRequest at 'https://test-example.lightning.force.com/visualforce/session?url=httpsexample-test--c.visualforce.com8979687iconimg' (redirected from 'https://example-test--c.visualforce.com/resource/998787876/iconimg') from origin 'https://test-example.lightning.force.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Can anyone please let me know if there is any way to import svg from static resource and display it in LWC.We have a req where we the image changes based on different value so we cannot hardcode the svg in the html also.

It works in classic rendered lwc but in lightning it gives error and it is not rendered.

Thanks

Answer 1

So in an LWC component, this is how you load the static resource:

import CC_Assets from '@salesforce/resourceUrl/XX_Assets';

export default class xxComponent {
    
    ICON = `${XX_Assets}/img/profile/Chevron-Right.svg`;
}

and then to refer the icon in template file:

<template>
    ...
    <img data-id="chevron-right" src={ICON}>
</template>

Now as per your usecase, you need to define ICON variable based on some condition, and then use it in your template.