svg-sprite-loader

svg-sprite-loader copied to clipboard

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:

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!

• Node.js version: v20.3.0
• webpack version: 5.74.0
• svg-sprite-loader version: 6.0.11
• OS type & version: MacOs Ventura