How I Can Make Svg Icons Appear After Spring-Boot: Run
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...
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="">
<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!
1 Answer
I should use correct full path to sprite.svg file
<use href="./resources/static/sprite.svg#icon-rating"/>
It works for me
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
