SVG Sprite not working in the consuming app

I implemented an SVG sprite file generation for all my SVG icons. It works and I have a fully working file within components/icons/sprites/icons.svg. Then inside my Index.tsx file I have:

import { SvgIcon } from '@mui/material';

<SvgIcon
  viewBox={viewBox}
  sx={sx}
  aria-label={label}
  data-test={dataTest}
  {...rest}
>
  <use xlinkHref={`${sprite}#${iconName}`} />
</SvgIcon>'

It all works fine in my Storybook, so I’m sure that this implementation should be fine. If I inspect the element in the storybook it is:

<use xlink:href="static/media/icons.svg#text-aa"></use>

The issue starts to exist when I’m building my package. It struggles in the consuming app to get the icon. In my webpack config for the package I have:

{
  test: /components/icons/sprites/icons.svg$/,
  type: 'asset/resource',
  generator: {
    filename: 'sprites/icons.svg',
    publicPath: '/',
  },
},

I also have publicPath: '/', within the webpack output object.

This ends with such selector in the consuming app:

<use xlink:href="/assets/icons.svg#warning"></use>

It renders nothing

If I expect node_modules, the file is there – node_modules/@company/packageName/dist/assets/icons.svg

I can see in the Chrome network tab that it’s trying to reach /assets/icons.svg but ends up with 404 Not Found.

When I remove the publicPath: '/', from the webpack output object, and just keep:

{
  test: /components/icons/sprites/icons.svg$/,
  type: 'asset/resource',
},

for the rules object, I end up with some svg generated file in the main dist folder in the consuming app node modules: node_modules/@company/packageName/dist/db6b1fc5dea1759a88ef.svg

And then within the app running in the browser:

<use xlink:href="file:///Users/marcus/Desktop/repos/sso-playground/node_modules/@company/packageName/dist/components/badge/../../db6b1fc5dea1759a88ef.svg#warning"></use>

This time it is

Not allowed to load local resource:

Basically I’ve already experimented a lot with publicPath or filename and the build bundle in the consuming app follow all the settings, however then the import does not work. I’m a bit surprised, because there is another package running in my app, also design system with icons sprite from it, there’s no special config in the app for that and the icons just work out of the box with such tag:

<use xlink:href="/images/vendor/@company/anotherPackage/components/icons/icons.svg?16c5895e4b93fe53247be390dfbb7ba1#alert-circle"></use>

What am I missing, what could be done to get the icons working in my consuming app?