search

cascornelissen / svg-spritemap-webpack-plugin

SVG spritemap plugin for webpack
MIT License
207 stars 50 forks source link

Can this work without importing SVGs into your JS or using them in the HTML? #158

Closed Jakobud closed 3 years ago

Jakobud commented 3 years ago

Can this work with using SVGs as entry files instead of expecting to import them into your JS or using them in static HTML files? Like, I just have a bunch of SVGs and I want to use Webpack to build a sprite.svg. I use Webpack for all my JS and SCSS and it would be nice to be able to use Webpack to do that as well.

cascornelissen commented 3 years ago

Yes, at least I think so because I'm not really sure what you're trying to achieve... The main part I'm confused about is "as entry files", if you're specifically talking about Webpack's entry points then no because Webpack has to be able to parse them either by itself or through loaders and this is a plugin.

But you can just add this plugin, point it to some source SVG sprites and it will generate a spritemap in the build directory. How you then consume that generated spritemap is up to you.

Jakobud commented 3 years ago

What I'm trying to achieve is "I have 100 svg icons and I want to make 1 svg sprite that contains all of them".

What do you mean exactly "point it to some source SVG sprites" ? If you aren't talking about Webpack entry points I'm unsure what you are referring to here.

cascornelissen commented 3 years ago

Yes, just use the plugin as documented. If your 100 SVG icons are in a directory just add the following to your Webpack configuration under plugins, let Webpack do its magic and it should create a single spritemap.svg in your output directory.

new SVGSpritemapPlugin('path-to-100-svgs/*.svg');

That's also what I meant with "point it to some source SVG sprites", tell the plugin where to look for your 100 SVG icons as shown in the example above. This plugin doesn't need Webpack entry points, you directly tell the plugin where to look for source files.

amiut commented 3 years ago

Yes, just use the plugin as documented. If your 100 SVG icons are in a directory just add the following to your Webpack configuration under plugins, let Webpack do its magic and it should create a single spritemap.svg in your output directory.

new SVGSpritemapPlugin('path-to-100-svgs/*.svg');

That's also what I meant with "point it to some source SVG sprites", tell the plugin where to look for your 100 SVG icons as shown in the example above. This plugin doesn't need Webpack entry points, you directly tell the plugin where to look for source files.

I did the same but it only generates sprites.svg on build, is there a way that it can generate sprites file on watch?

cascornelissen commented 3 years ago

It should (re)generate the file on watch as well/update it when changes are made to the source sprites. If it doesn't do that on your end it might be a bug.

If you have a repository that can be used to reproduce the issue you're running into I'd like to take a look at it.

cascornelissen commented 3 years ago

Closing this due to inactivity, feel free to comment if anything pops up ❤️