[Vuejs]-How to change the color of an image via CSS properties

by

0👍

You can use svg as a component to render your image and pass the color as prop to it, something similar like this

<template>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" :fill="props.color" />
  </svg>
</template>

<script setup lang="ts">
const props = defineProps({
  color: {
    type: String,
    required: false,
    default: 'yellow',
  },
});
</script>

And in your parent component

<template>
  <MyImage color="red"/>
</template>

Leave a comment