Как сделать так, чтобы значки svg появлялись после весенней загрузки: run

Question

Я пытаюсь разместить иконки сома из файла sprite.svg

Это фрагмент моего компонента в реаги, где я хочу разместить изображение.и конфиг вебпака.Я поместил sprite.svg в href, но он не работает.Мне нужно изменить мой webpack.config или установить некоторые модули?

<div className="product__actions">
    <div className="rating">
        <svg width="20px" height="20px" xmlns="http://www.w3.org/1999/xlink">
            <use xlinkHref="#icon-rating"/>
        </svg>
        <span className="rating__result">{this.props.product.money_value}</span>
    </div>
 </div>

это моя конфигурация webpack

const path = require('path');

module.exports = {
    entry: {
        home: './src/main/js/home/home.js',
        products: './src/main/js/products/products.js',
        ....
        _catalog: './src/main/resources/styles/_catalog.scss',
        ....

    },
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/[name].bundle.js'
    },
    module: {
        rules: [
            ...
            {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                include: [path.join(__dirname, "src/assets")],
                loader: "file-loader?name=assets/[name].[ext]"
            }
            ...
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './src/main/resources/static/css/[name].css'
        }),
        new MergeIntoSingleFilePlugin({
            files: {
                "./src/main/resources/static/styles/styles.css": [
                    './src/main/resources/static/css/_catalog.css',
                    .....
                ]
            }
        })
    ]
};

Как я могу решить эту проблему, пожалуйста, помогите!

Answer 1

Я должен использовать правильный полный путь к файлу sprite.svg

<use href="./resources/static/sprite.svg#icon-rating"/>

Это работает для меня