如何将Vue.js SVG组件设置为背景图像？

Question

我正在尝试构建一个设计系统，用户可以单击各种SVG并将其设置为页面背景。它们需要能够更改SVG的颜色，所以我想我会将它们作为如下组件：

<template>
<svg xmlns='http://www.w3.org/2000/svg' 
viewBox='0 0 80 80' width='80' height='80'>
<g fill='#9C92AC' fill-opacity='0.4'>
    <path d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 1 0-30 15 15 0 0 1 0 30z' opacity='.5'></path>
    <path d='M15 15h50l-5 5H20v40l-5 5V15zm0 50h50V15L80 0v80H0l15-15zm32.07-32.07l3.54-3.54A15 15 0 0 1 29.4 50.6l3.53-3.53a10 10 0 1 0 14.14-14.14zM32.93 47.07a10 10 0 1 1 14.14-14.14L32.93 47.07z'></path>
</g>
</svg>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'black'
    }
  }
}
</script>

<style>
</style>

但是我需要将此组件设置为另一个div（页面）的背景图像。我该怎么办？到目前为止，我尝试这样做均无济于事：

.test{
  background-image:url('~/components/svg/1.vue')
}

我不确定是否可行，因为我认为Vue组件不能设置为背景吗？任何帮助，不胜感激！

谢谢， 以撒