Right way to use static files in UI-kit library

Question

I'm creating my own test UI-kit library and encountered a display problem in components of static files such as logos and icons

here is an example of a component that uses a static icon internally:

import React from "react";
import logo from './Add_small.svg';

export const Logo = () => {
  return (
    <img src={logo} alt={'test logo'}/>
  );
};

here is my webpack.config.js :

const path = require('path')

module.exports = {
    mode: 'production',

    entry: './src/index.ts',
    output: {
        filename: "index.js",
        libraryTarget: "umd",
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'auto',
        clean: true
    },

    module: {
        rules: [
            {
                test: /\.(png|jp(e*)g|svg|gif)$/,
                type: "asset/resource",
                generator: {
                    filename: 'assets/images/[name].[ext]',
                },
            },
            {
                test: /\.(ts|tsx)?$/,
                use: ['ts-loader'],
                exclude: /node_modules/
            }
        ]
    },

    resolve: {
        extensions: ['.ts', '.tsx']
    },

    externals: {
        react: 'react'
    }
}

I compiled and allocated the library into a separate npm package and when I use this component in my other projects, this icon appears as broken

import { Logo } from "UI_Kit"
import './App.css';

function App() {
  return (
    <div className="App">
      <Logo/>
    </div>
  );
}

export default App;

the problem is that the project (simple CRA) is knocking on the URL http://localhost:3000/static/js/e0141ba2aab7fa848cb0.svg

but in fact the icon is in node_modules/UI_Kit/dist/assets/images/.

please tell me how to solve this problem, what are the best practices?