How to use svg sprite?

Need Help
#1

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 }}"
/use
/svg
/div

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

#2

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 }}
</div>
#3

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.

Screenshot 2023-07-29 230429
Screenshot 2023-07-29 2304291449×812 173 KB

#4

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

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

Or a full SVG library, like this one:

#5

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

#6

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
#7

Yes, this is a much better solution!