Stenciljs assets not accessible in reactjs application

Question

Current Behavior

Hi,

In stenciljs i am building a design system where i have huge amount of icons so i have created a svg sprite file.

Steps to Reproduce

Method1 :
Tried importing the svg sprite file and calling it with id is converting to base64 format which is not supported in safari.

import altiIcons from "../../assets/altiIcons.svg"; <use
xlinkHref={${altiIcons}#Search}
href={${altiIcons}#Search}>

2. Method 2:
   In this method gave the path directly which is perfectly working in chrome and safari when i run in stenciljs.

Related code:

<use
xlinkHref={/assets/altiIcons.svg#Search}
href={/assets/altiIcons.svg#Search}>

so now as this method 2 is working i published it and tried using this component in react but not able to see the icon as the path is checking in react but not on stenciljs. Please help . I need to resolve immediately .

Thanks Mounika

Expected Behavior

Ultimately the icon must work in all browsers

System Info

MAC

Expectation: need to work in all browsers

Stencil Version

2.22.3