How to change the color of an image via CSS properties

Question

https://www.figma.com/file/ZTyE9nUqVrZ9VFIXhZXL53/Superhuman-v1.0-(DEMO)?node-id=542%3A3625&mode=dev

The above link is a design draft, I want to make a Head male component, change the CSS by changing the skin prop. But I don't know how to do it. I tried using filter or mix-blend-mode properties, but it didn't solve the problem. please help me.

Answer 1

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>