javascript - 如何让 svg 图标在 spring-boot :run 后出现

Question

我正在尝试从 sprite.svg 文件中放置一些图标

这是我的 React 组件的片段，我想在其中放置图像。 和 webpack 配置。我将 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"/>

这对我有用