正如Robert Longson所说：你不能在<img>源代码中引用<symbol>-这同样适用于CSS背景图像。
对于图片，你可以使用fragment identifiers-这需要调整你的sprite svg。
与片段标识符一起使用的精灵需要呈现的元素。
下面是一个混合sprite svg的例子，它同时使用<use>和<img>元素。

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
/**
* show only targeted element
* as definded by fragment identifier
* e.g: sprite.svg#use_up_down
*/
    use {
      display: none;
    }
    use:target {
      display: block;
    }
</style>
<!-- icons for use with <use> references -->
    <symbol fill="none" viewBox="0 0 24 24" id="arrow-up-and-down" >
      <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>
    <symbol fill="none" viewBox="0 0 24 24" id="arrow-up" >
      <path d="M10.45 6.72 6.73 3 3.01 6.72M6.73 21V3"
         stroke="#29354D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </symbol>

    <symbol fill="none" viewBox="0 0 24 24" id="arrow-down" >
      <path d="M13.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>
<!-- icons for use with images - hidden by default -->
    <use id="use_up_down" href="#arrow-up-and-down"  />
    <use id="use_up" href="#arrow-up"  />
    <use id="use_down" href="#arrow-down"  />
   </svg>

基本上，您需要为每个符号添加一个<use>示例。
然后添加一个样式表来隐藏除目标元素之外的所有use元素。

use {
  display: none;
}
use:target {
  display: block;
}

现在我们可以使用这两个sprite概念：

<svg class="arrow-link__icon" viewBox="0 0 24 24">
  <use href="sprite.svg#arrow-up-and-down" />
</svg>
<img src="sprite.svg#use_up" />
<img src="sprite.svg#use_down" />
<!-- nothing selected -->
<img src="sprite.svg" />

plnkr example。

在所有现代浏览器中，您都可以跳过Symbol/Use（及其问题）并定义<svg-icon> Web组件，该组件生成<svg>

<style>
  svg-icon {
    width:90px;
    background:pink;
  }
</style>

<svg-icon is="arrows"></svg-icon>
<svg-icon is="up"></svg-icon>
<svg-icon is="down" stroke="red"></svg-icon>
<svg-icon is="down" stroke="yellow"></svg-icon>
<svg-icon is="down" stroke="blue"></svg-icon>

<script>
  customElements.define("svg-icon", class extends HTMLElement {
    connectedCallback() {
      let d = {
          arrows: `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`,
          up:     `M10.45 6.72 6.73 3 3.01 6.72M6.73 21V3`,
          down:   `M13.55 17.281l3.72 3.72 3.72-3.72M17.27 3v18`,
        }[  this.getAttribute("is")  ];
        
      this.style.display = "inline-block";
      this.innerHTML = 
       `<svg viewBox="0 0 24 24" style="vertical-align:top">` + 
        `<path d="${d}" stroke="${this.getAttribute("stroke")||"#29354D"}"` + 
        `      stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"`+
        `      fill="none"></path>`+
       `</svg>`;
    }
  });
</script>

看起来您希望使用sprite文件中的SVG图标，不仅用于显示图像，还用作CSS样式的背景图像。根据您提供的代码片段，看起来您已经走上了正确的道路，但是您需要确保以下几点才能使其正确工作：

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="arrow-up-and-down" viewBox="0 0 24 24">
    <!-- Your icon paths here -->
  </symbol>
  <symbol id="main-cards-bg" viewBox="0 0 24 24">
    <!-- Your icon paths here -->
  </symbol>
  <!-- Add more symbols for other icons -->
</svg>

SVG用法：在HTML中，您已经使用元素来正确引用图标。确保您使用的id与SVG精灵中定义的id匹配。举例来说：

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

要在CSS中使用SVG作为背景图像，您应该能够像这样做：

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