What are the ways to connect the svg sprite in the background?

To connect using this method
<svg class="icon icon-figure">
 <use xlink:href="img/sprite.svg#icon-figure"></use>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

 <symbol id="icon-down" viewBox="0 0 12 6">
 <path d="M6 4l4.8-4L12 1 6 6 0 1l1.2-1L6 4z"/>
</symbol>

 <symbol id="icon-figure" viewBox="0 0 100 100" preserveAspectRatio= "none">
 <path d="M0 100L100 0v100z"/>
</symbol>

 <symbol id="icon-search" viewBox="0 0 17 17">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M10.335 11.749a6.5 6.5 0 1 1 1.414-1.414l4.615 4.615-1.414 1.414-4.615-4.615zM11 6.5a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0z"/>
</symbol>

</svg>

But to do so in the css, does not work
background: url('../img/sprite.svg#icon-figure') center

I tried to find ways but they're more like crutches and not allowed to set the color of the svg.
Are there normal ways to connect the svg sprite in the img and in the background, while having the ability to stylize?
Or maybe better cost to use svg as separate files and not sprite?
March 19th 20 at 09:19
1 answer
March 19th 20 at 09:21
Solution
in the svg file must be specified
<view id="icon-figure" viewBox="0 0 30 30" />
here is an example inserts
https://dbushell.com/demos/svg/2015-01-29/svg-spri...
Pay attention to the sprite file.svg

Find more questions by tags SVGCSS