Caramel-CRM/resources/js/components/ui/social-icon/SocialIcon.vue

<script setup lang="ts">
import type { PrimitiveProps } from "reka-ui"
import { socialIconVariants, SocialIconVariant } from '.';
import { cn } from "@/lib/utils"
import type { HTMLAttributes } from "vue"
import { computed } from "vue"

const props = defineProps<PrimitiveProps & {
    variant?: string,
    class?: HTMLAttributes["class"]
}>();

const currentVariant = computed<SocialIconVariant>(() => {
    const v = props.variant?.toLowerCase() as SocialIconVariant; // Konvertiere zu lowercase
    return v && socialIconVariants[v] ? v : 'default';
});

</script>

<template>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" data-supported-dps="24x24" stroke="currentColor"
        fill="transparent"  :class="cn(props.class)" width="24" height="24" focusable="false">
        <g v-html="socialIconVariants[currentVariant]"></g>
    </svg>
</template>