Question

我正在尝试放置sprite.svg文件中的som图标

这是我组件中要放置图像的片段。和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"/>

对我有用

我如何使svg图标在spring-boot：run之后出现

1 个答案: