1

I'm trying to build a design system where users can click on various SVGs and have them set as the background of their page. They need to be able to change the colour of the SVGs so I thought I would have them as components like so: 

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

But I need to set this component as the background image of another div (the page). How could I do this? So far I tried this to no avail: 

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

I'm not confident that would work as I don't think Vue components can be set as backgrounds right? Any help much appreciated!

Thanks, Isaac

Isaac Joy
  • 85
  • 4
  • 14
  • Is there any reason why you can't have svg files in the assets folder and dynamically change the background image of your app? – user10543119 Apr 06 '20 at 15:55
  • @user10543119 I want to change the fill of the svg too! – Isaac Joy Apr 06 '20 at 18:03
  • I'm sorry, I didn't realize that. People have had [success](https://stackoverflow.com/questions/24933430/img-src-svg-changing-the-styles-with-css) with either fill or filter css attributes. – user10543119 Apr 07 '20 at 16:45
  • I also need to do this. so is there a solution? thanks – Swordword Apr 13 '21 at 05:24
  • I finally use a function to generate a svg string, and use `background: 'url(data:image/svg+xml;utf8,${encodeURIComponent([svgIcon]) } )'` – Swordword Apr 13 '21 at 09:20

0 Answers0