How to use svg sprite?

I uploaded svg sprite to the media folder, but when I’m truing to link the file from the page it shows me the next error: An exception has been thrown during the rendering of a template (“Вказано неприпустимий шлях до файлу: “/generalSprite.svg#up”.”).

Here is the code, I used for svg sprite:

div class="cont-way"
svg class="up"
use xlink:href="{{ 'generalSprite.svg#up'|media }}"

Is it possible to use svg sprites in my project? How to do that?

Hi @Golembivskyi

Assuming you are using the local driver, you can extract the contents in PHP and access it as a variable. Here is an example:

function onStart()
    $this['svgContents'] = File::get(storage_path('app/media/generalSprite.svg'));
<div class="cont-way">
    {{ svgContents|raw }}

Hi @daft

Thank you for the answer.

I used this code in my header partial but it added the whole svg sprite to the html of the page. You can see in on the screenshoot.

But I cannot understand of how to display one of the icons from the sprite on the page. Can you help me with advice? What should I write to see one of the icons?

Thank yo in advance.

There are many ways to handle this, you could use regex

preg_match_all('...', $svgcontents, $output);

Or a full SVG library, like this one:

Thank you for the answer.
It is new information for me. I will study it.

you probably looking for something like this

this is a way, where you can use svg sprite with css. in this case you will be probably able to use symbols as u wish

1 Like

Yes, this is a much better solution!