All what i need to do - add import in my app.js and write id in use tag:
app.js:
import delivery from '../images/svg/icons/delivery.svg';
webpack.config.js:
.addRule({
test: /\.svg$/,
use: [{
loader: 'svg-sprite-loader',
options: {
extract: false, // Extract the sprite into its own file
}
}, 'svgo-loader'] // Optionally, you can use svgo-loader to optimize SVG files
})
base.html.twig:
<svg>
<use xlink:href="#delivery"></use>
</svg>
but nothing's happening.
One more thing, ur examples is not full, pls rewrite this examples if it's possible...
I trying to use spriteModule, as well. But I getting empty svg tag:
import BrowserSprite from 'svg-baker-runtime/src/browser-sprite';
import domready from 'domready';
import '../images/svg/icons/delivery.svg';
const sprite = new BrowserSprite();
domready(() => sprite.mount('#sprite-icons-custom'));
export default sprite; // don't forget to export!
But if I will use
sprite.add(delivery);
I getting error:
sprite.js:71 Uncaught TypeError: s.stringify is not a function
at sprite.js:71:1
at Array.map (<anonymous>)
at BrowserSprite.stringify (sprite.js:71:1)
at BrowserSprite.render (browser-sprite.js:220:17)
at BrowserSprite.mount (browser-sprite.js:202:1)
at icons-sprite.js:9:23
code:
import BrowserSprite from 'svg-baker-runtime/src/browser-sprite';
import domready from 'domready';
import delivery from '../images/svg/icons/delivery.svg';
const sprite = new BrowserSprite();
sprite.add(delivery);
domready(() => sprite.mount('#sprite-icons-custom'));
export default sprite; // don't forget to export!
According to doc: Default browser runtime example
All what i need to do - add import in my app.js and write id in use tag:
app.js:
webpack.config.js:
base.html.twig:
but nothing's happening.
One more thing, ur examples is not full, pls rewrite this examples if it's possible...
I trying to use spriteModule, as well. But I getting empty svg tag:
But if I will use
I getting error:
code: