Any way to use SVG Sprite from CSS?

Question

HTML:

<svg>
    <use xlink:href="/assets/images/icons-sprite.svg#icon-name"></use>
</svg>

SVG sprite:

<svg width="0" height="0" class="hidden">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-name">
        <path ... fill="currentColor"></path>
    </symbol>
</svg>

Is there any way to use SVG sprite from CSS

Like this

<div class=“icon”></div>

.icon {
background-image: “/assets/images/icons-sprite.svg#icon-name”
height: 30px

}

Answer 1

Never too late!

May be you can consider to use the <view> tag instead of the <symbol> tag in your svg (an automatic transformation using a script is more or less possible).

For instance, if one supposes your svg with <symbol> tags contains two icons (a "triangle" and a "square"), the code in icons-sprite.svg is something like:

<svg class="hidden" xmlns="http://www.w3.org/2000/svg">
    <symbol id="triangle" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 24H24L16 8z"/>
    </symbol>
    <symbol id="square" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path d="M8 8H24V24H8z"/>
    </symbol>
</svg>

You can replace the content of icons-sprite.svg by a svg with <view> tags such as:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 64">
    <view id="triangle" viewBox="0 0 32 32"/>
    <g><path d="M8 24H24L16 8z"/></g>
    <view id="square" viewBox="0 32 32 32"/>
    <g transform="translate(0,32)"><path d="M8 8H24V24H8z"/></g>
</svg>

The corresponding css could be:

span {
    display: inline-block;
    height: 32px;
    width: 32px;
    background-repeat: no-repeat;
    background-size: 32px 32px;
}
span.triangle {
    background-image: url("icons-sprite.svg#triangle");
}
span.square {
    background-image: url("icons-sprite.svg#square");
}

And the html is in this case:

<span class="triangle"></span>
<span class="square"></span>

Answer 2

I’m using the technique for including SVGs described here whereby you create a doc that looks something like this…

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

    <symbol id="arrow-left" viewBox="0 0 10 16">
        <path d="M9.4 1.4L8 0 0 8l8 8 1.4-1.4L2.8 8z"/>
    </symbol>

    <symbol id="arrow-right" viewBox="0 0 10 16">
        <path d="M0 14.6L1.4 16l8-8-8-8L0 1.4 6.6 8z"/>
    </symbol>

</svg>

Include it in the top of your HTML and then insert the SVG icons in your markup like this…

<svg class="arrow-right">
  <use xlink:href="#arrow-right" />
</svg>

It’s easy and works great. However, I’m trying to use the same icons in my CSS pseudo classes :before and :after using an empty content attribute and the SVG in the background. Something like this…

.title:after {
    float: right;
    width: 16px;
    height: 10px;
    content: "";
    background: url('#arrow-right');
}