svg-sprite-loader
svg-sprite-loader copied to clipboard
How to define spriteFilename and outputPath ?
- Node.js version: v12.14.0
- webpack version: ^5.11.0
- svg-sprite-loader version: ^5.2.1
- OS type & version: Mac OS Mojave (10.14.6)
Current output
dist/manifest.json
dist/img/sprite.[hash].js
dist/img/sprite.svg
Expected output
dist/manifest.json
dist/img/icons.[hash].svg
Github repo issue
Here is a repo to reproduce this issue: https://github.com/zeckaissue/svg-sprite-loader-issue
My webpack config
/* eslint-env node */
const path = require("path");
const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
const glob = require("glob").sync;
module.exports = {
entry: {
sprite: glob(path.resolve(__dirname, "src/img/svg/*.svg")),
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[hash].js",
},
resolve: {
extensions: [".js", ".scss", ".json", "svg"],
alias: {
"@": path.resolve(__dirname, "src/"),
},
},
optimization: {
splitChunks: {
chunks: "all",
},
},
module: {
rules: [
{
test: /src\/img\/svg\/.*\.svg$/,
use: [
{
loader: "svg-sprite-loader",
options: {
extract: true,
spriteFilename: "icons.[hash].svg",
runtimeCompat: true,
outputPath: "img/",
},
},
"svg-transform-loader",
"svgo-loader",
],
},
],
},
plugins: [
new CleanWebpackPlugin(),
new WebpackManifestPlugin({
publicPath: "",
}),
new SpriteLoaderPlugin({
plainSprite: true,
}),
],
};
Same issue here after updating to Webpack 5. Looks like critical, can't update our project to webpack 5 because of this...
The same here, still no luck on finding a solution.
Same here :(
Same here 😢
same here :(
same here :(
Not the same issue, I missread, but very worth knowing for other fellow googlers if they stumble on the same issue as me updating from webpack4 to webpack5, you cannout use 'style-loader' as it causes the css file to point to a '[non-existant-hash].svg' instead of 'icons.svg' which was configured like below
{
test : /\.svg$/,
include : path.resolve( './assets/icons' ),
use : [
{
loader : 'svg-sprite-loader',
options : {
extract : true,
spriteFilename : 'images/icons.svg',
esModule : false
}
},
'svgo-loader'
]
},
{
test : /\.scss|\.css$/,
use : [
{
loader : MiniCssExtractPlugin.loader, // <- fixes it
options : {
publicPath : '../'
}
// loader: 'style-loader', // <- caused the '[hash].svg' instead of 'icons.svg'
},
{
loader : 'css-loader'
},
{
loader : 'postcss-loader'
},
{
loader : 'sass-loader'
}
]
},
Still having this issue. Has anybody got any workaround?