Can I put two routes into scr attribute? about svg-spritemap-webpack-plugin HOT 15 CLOSED

The src option supports globbing, which also supports something like (a|b) for ORs, or use sets using curly braces.

Either that or you could add two seperate instances of the plugin to your plugins array in your configuration if you want two seperate SVGs as output.

Let me know!

from svg-spritemap-webpack-plugin.

@ctkc, any updates on this?

from svg-spritemap-webpack-plugin.

I wanted merge two different inputs into the same output file. If I put two instances of the same plugin with the same output, the second instance override the file so it is not what I need but thank you very much for your answer and sorry for the delay.

from svg-spritemap-webpack-plugin.

If you're still trying to do that, it's possible to do this through globbing, something like the following should work:

{
    src: '{path/to/one/directory,path/to/another/directory}/**/*.svg'
    // ...
}

If you need any more info; this glob primer explains it pretty well.

Update: 2.4.0 supports arrays for the src option.

from svg-spritemap-webpack-plugin.

It works!. Thank you so much!

from svg-spritemap-webpack-plugin.

Great! No problem at all! 😄

from svg-spritemap-webpack-plugin.

For anyone looking for this feature, 2.4.0 has just been released which adds array support to the src option.

The example I posted in #13 (comment) could be rewritten like this:

{
    src: [
        'path/to/one/directory/**/*.svg',
        'path/to/another/directory/**/*.svg'
    ]
    // ...
}

from svg-spritemap-webpack-plugin.

Hello @cascornelissen relateted to this! IF I have SVGs grouped into folders for each page and I want to create one Sprite for each page, u recommend to do it with multiple separate instances?

I guess that's the way to go, thanks in advance

from svg-spritemap-webpack-plugin.

Yeah, if you want to create separate spritemaps then multiple instances would be the way to go 😉

from svg-spritemap-webpack-plugin.

@cascornelissen hey sorry, another questions, how can I make the Id value the same as the svg element that gets into the sprite?

Right now I have flags and I would like to use them by the locale like en, es, fr for the IDs, and the plugin assigns numbers to the Sprites. Do you have an advice about this? I'm in 1.2.0 because my webpack version is not the last one

from svg-spritemap-webpack-plugin.

Just providing more info: The files that are in the folder, have the locale name like en.svg es.svg etc and I would like to preserve it for the IDs

from svg-spritemap-webpack-plugin.

By default the id is the svg files name, if you want to have separate sprites per locale you can use the prefix similar to what I've done here, this way you can have a directory per locale.

from svg-spritemap-webpack-plugin.

@gabolecointere, I'm afraid you'll have to update to the latest major version for this.

from svg-spritemap-webpack-plugin.

I just upgraded and I have two issues: npm run dev and watch produces the build but npm run prod returns an issue like: Unknown Word

When the build runs with npm run dev, my sprites.svg file it's empty :( This is my webpack config:

plugins: [ new CopyWebpackPlugin([{ from: 'resources/assets/img', to: 'img', // Laravel mix will place this in 'public/img' }]), new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i, plugins: [ imageminMozjpeg({ quality: 80, }) ] }), new SVGSpritemapPlugin('resources/assets/img/header/round-flags/*.svg', { output: { filename: 'img/sprites.svg', chunk: { name: 'img/spritemap', keep: true } } }) ]

from svg-spritemap-webpack-plugin.

@gabolecointere, can you create a new (well-formatted) issue with a minimal test case that fails for you?

from svg-spritemap-webpack-plugin.