How I can make svg icons appear after spring-boot:run

Question

I'm trying to place som icons from sprite.svg file

That's the fragment of my component in react, where I want to place image. and webpack config. I placed sprite.svg in href, but it doesn't works. Am I need to change my webpack.config, or install some modules?

<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>

that's my webpack config

 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', ..... ] } }) ] }; 

How I can solve this problem, pls help!

Answer 1

I should use correct full path to sprite.svg file

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

It works for me