在 Vue JS 中使用 SVG Sprite 作为 CSS 背景图片答案

【问题标题】：Use SVG Sprite in Vue JS as CSS Background Image在 Vue JS 中使用 SVG Sprite 作为 CSS 背景图片
【发布时间】：2020-08-20 22:08:17
【问题描述】：

如果我像这样在 Vue JS HTML 模板中设置 SVG sprite 文件，效果会很好：

<svg class="icon">
  <use xlink:href="~@/assets/images/icons.svg#edit"></use>
</svg>

icons.svg 文件看起来像这样：

<svg style="display: none;">
  <symbol id="edit" viewbox="0 0 15 15">
    <g>...</g>
  </symbol>
</svg>

但如果我尝试在这样的 Vue CSS 文件中使用相同的 SVG 片段：

.edit-icon{
  background:url('~@/assets/images/icons.svg#edit') no-repeat;
  background-size: 15px 15px;
}

...它不起作用。我的假设是浏览器只能遍历到 HTML 中的#edit 符号。

有没有办法在 CSS 背景中使用相同的 SVG sprite 方法？

【问题讨论】：

【解决方案1】：

尽量不要在css导入中同时使用~和@。

.edit-icon{
  background:url('@/assets/images/icons.svg#edit') no-repeat;
  background-size: 15px 15px;
}

【讨论】：