如何从CSS中使用SVG Sprite ？

HTML:

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

SVG雪碧:

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

有没有办法从CSS中使用SVG精灵

像这样

<div class=“icon”></div>
.icon {
background-image: “/assets/images/icons-sprite.svg#icon-name”
height: 30px
}

###我使用的技术包括svg在这里描述，你创建的文档看起来像这样……

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

将其包含在HTML的顶部，然后在标记中插入SVG图标，如下所示……

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

这很简单，而且效果很好。然而，我试图在我的CSS伪类中使用相同的图标:之前和:之后使用空内容属性和SVG在后台。是这样的……

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