How to use without html-webpack-plugin ?

[ryuran]

I love you plugin but I have an issue.

I need to insert the svg sprite inline in some html without htmlWebpackPlugin.

By exemple using it in KSS documentation or insert sprite in Html from a php website (webpack is only used to make a bundle of a front module inserted in a bigger php website).

How to do, can we export svgsprite string or insert it by js only ?

[Epimodev]

Hello !

I haven't use KSS yet so I'm not sure the solution I suggest will work.

I've created another module to create svg sprite without webpack : https://github.com/Epimodev/sprite-svg-symbol
You just need to call this module with the folder containing svg files and it returns a promise with the svg sprite.
Then you can use posthtml (https://github.com/posthtml/posthtml) to inject this sprite in a html file.

For the moment this module doesn't set aria attribute but if this solution solves your problem I can update it.

[ryuran]

Hello,
I have try several solution for svg symboles

• svg-spritemap-webpack-plugin not able to put svg sprite inline
• svg-sprite-loader maybe the most universal, able to load inline and extract as external file with plugin

[Epimodev]

I haven't try those plugins but according to their documentation I've got same conclusion.

If you want to insert a sprite in a html file without html-webpack-plugin the only solution I've got in mind is to inject the sprite after webpack build.

[ryuran]

Yes, same conclusion but svg-sprite-html-webpack do not allow to export sprite as a string variable or as a file.
The only way is by html-webpack-plugin hook.

[Epimodev]

does an option onSpriteGenerated: (sprite: string) => void which will be a callback with the svg sprite as parameter is a solution which help you in your case ?

[ryuran]

Yes I think it can help, I'm not sure it it's enought to work with an othe webpack plugin like kss-webpack plugin because it will create an asynchrone issue.
I think the way to do that is using a webpack hook (but I‘m not sure).

[Epimodev]

Ok, for the moment this plugin doesn't emits any value for webpack hook.
But I can add a callback and emit a value with webpack hook, even if it doesn't solve your issue it can help other developers which use this plugin.

I'll work on this today or tomorrow.

[Epimodev]

Hello !

Sorry I've got more work than I expected during last days so I haven't implement callback and webpack hook yet.

But tomorrow I will have the morning to work on this.

[ryuran]

const { createSprite } = require('svg-sprite-html-webpack/src/spriteUtils')

I find a way using your createSprite function to get a sprite before webpack build.

[Epimodev]

ok happy to read you find a solution.

Sorry, I forgot to add onSpriteGenerated and try to add webpack hook.

I keep this issue open until I make those changes.