Question: when using components, how can I pass props like color?

[rowild]

I use a json to assign styles to html sections. Icons are affected by those, too. As long as I use Nuxt/Icon "the normal way", I can pass down colors. But when I use a component, the Icon is displayed, but I cannot pass down a color nor a size. I have a component like this, with defineProps defined in the script setup:

<template>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128" xml:space="preserve" :class="color">
  <path d="M92.72656,79.97754c.937,0,1.92548.061,2.94318.16162a5.91724,5.91724,0,0,1-.95-.85889,6.01325,6.01325,0,0,1-1.43457-3.29077c-.18591-.0036-.37537-.012-.55859-.012-12.07129,0-22.53125-5.67187-22.63574-5.72949a2.00409,2.00409,0,0,0-.91223-.24542,5.76562,5.76562,0,0,1,.59625,4.562A56.156,56.156,0,0,0,92.72656,79.97754Z" />
  <circle cx="63.97919" cy="32" r="2" />
  ...
</svg>
</template>

<script setup>
defineProps({
  color: {
    type: String,
    default: 'text-current' // Default to inheriting color
  }
})
</script>

And i use it like this:

 <Icon :name="service.icon" size="10rem" :color="service.iconColor" />

where service.iconColor comes from a JSON and is a tailwindcss class like text-yellow-300.

It does not work, though.

What do I have to do to get the icon colored the way I want?
BTW: I must use the same syntax, since I do not only use Components for svgs, but also the regular svg.