Issue with using sprite.svg

[alexljamin]

@ben-rogerson I have a use-case which looks something like this:

.class{
 &:before{
  content: url("sprite.svg#icon-email");
 }
}

The email.svg is placed under icons directory. What will be a correct way to refer to SVG in SCSS?

I have also noticed that running npm run dev or npm run build will not generate sprite.svg. Not sure what could be the reason.

[ben-rogerson]

Hey Alek, I believe you'll need to reference the SVG sprite in HTML (not SCSS) when using the laravel-mix-svg-sprite loader (which my config uses):

Eg:

<svg><use xlink:href="#icon-email"/></svg>

While you can access the built sprite in SCSS, I don't believe it's built into the right format to use in the way you want.

If you were to create the sprite in a slightly different format like this sprite then you should be able to get it working in CSS.

This would require you to create the sprite manually or find a different package that could build it for you.

I have also noticed that running npm run dev or npm run build will not generate sprite.svg. Not sure what could be the reason.

When you run npm run dev the file is held in memory and so an actual file won't be created - this is how webpack-dev-server works by default. See https://localhost:8080/webpack-dev-server for a list of files it's holding in memory.

When you run npm run build it'll create the sprite at /web/dist/sprite.svg by default.

[ben-rogerson]

Closing this for now, but let me know if there are still any issues generating that sprite.