React, Symfony importer des image. probleme d'url

J'ai un probleme avec l'importation d'une image svg vers mon composant Alert et via l'attribut xlinkHref de la balise <use>.

Le composant

import React from 'react';
import {ResolvePath} from '../functions/resolver.js';
export class Alert extends React.Component{
    render() {
        return <div>
                <span className="alert-header">
                  <h6>{this.props.title}</h6>
                  <svg id="close-modal">
                    <use xlinkHref={ResolvePath('public/svg/alert.svg#close-modal')}/>
                  </svg>
                </span>
                <span className="alert-content">
                  <h6 className="text">
                    {this.props.message}
                  </h6>
                </span>
                <h6>
                <svg>
                  <use xlinkHref={ResolvePath(`public/svg/alert.svg#${this.props.iconName}`)} />
                </svg>
              </h6>
              </div>
    }
}

L'appel du composant

import React from 'react';
import * as ReactDOMClient from 'react-dom/client';
import {Alert} from '../components/Alert';

const root = ReactDOMClient.createRoot(document.querySelector('.Errors'));
root.render(<Alert
  iconName="close-modal"
  title="Danger"
  message="Votre fenetre est ouverte"
  />)

Ce que je veux

Je souhaite importer un svg depuis le chemin public/svg/alert.svg#close-modal.

Ce que j'obtiens

mais j'obtiens cette erreur en console alors que le chemin il est correct http://127.0.0.1:8000/public/svg/alert.svg net::ERR_ABORTED 404 (Not Found)