如何在CSS/SCSS中直接使用SVG Sprite中的图标（含背景图场景）？

问题场景 #

使用SVG Sprite管理图标时，通过<use>标签调用图标可以正常显示：

<svg class="arrow-link__icon">
  <use xlink:href="./src/images/svg/symbol/sprite.svg#arrow-up-and-down" />
</svg>

但尝试在CSS/SCSS中通过锚点引用Sprite内的图标作为背景图时，无法生效：

&-item__text {
  background: url('../images/svg/symbol/sprite.svg#arrow-up-and-down') top left/cover no-repeat, $darkBlue;
  height: 100%;
}

当前使用的SVG Sprite结构如下：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol fill="none" viewBox="0 0 24 24" id="arrow-up-and-down" xmlns="http://www.w3.org/2000/svg">
    <path d="M10.45 6.72 6.73 3 3.01 6.72M6.73 21V3M13.55 17.281l3.72 3.72 3.72-3.72M17.27 3v18"
      stroke="#29354D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
  </symbol>
</svg>

可行解决方法 #

方法1：替换<symbol>为<g>并包裹在<defs>中 #

<symbol>是专为<use>标签设计的元素，浏览器处理CSS背景图的锚点引用时支持性有限。将Sprite结构修改为<defs>包裹<g>的形式：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="arrow-up-and-down" fill="none" viewBox="0 0 24 24">
      <path d="M10.45 6.72 6.73 3 3.01 6.72M6.73 21V3M13.55 17.281l3.72 3.72 3.72-3.72M17.27 3v18"
        stroke="#29354D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </g>
  </defs>
</svg>

修改后原CSS引用代码即可正常生效。

方法2：编码URL中的锚点符号 #

如果不想修改Sprite结构，需将URL中的#编码为%23，避免浏览器解析错误：

&-item__text {
  background: url('../images/svg/symbol/sprite.svg%23arrow-up-and-down') top left/cover no-repeat, $darkBlue;
  height: 100%;
}

同时注意清理浏览器缓存，可在URL后添加版本参数（如?v=1）确保加载最新文件。

方法3：导出独立SVG文件 #

将需要作为背景图的图标单独导出为单个SVG文件，直接引用该文件：

&-item__text {
  background: url('../images/svg/arrow-up-and-down.svg') top left/cover no-repeat, $darkBlue;
  height: 100%;
}

这种方式兼容性最好，也方便单独调整图标的样式属性。

内容的提问来源于stack exchange，提问作者Mark