tethys.backend/resources/js/Components/IconRounded.vue

<script setup>
import { colorsText, colorsBgLight } from '@/colors.js';
import BaseIcon from '@/Components/BaseIcon.vue';

defineProps({
    icon: {
        type: String,
        required: true,
    },
    type: {
        type: String,
        default: null,
    },
    w: {
        type: String,
        default: 'w-12',
    },
    h: {
        type: String,
        default: 'h-12',
    },
    bg: Boolean,
});
</script>

<template>
    <BaseIcon
        :path="icon"
        :w="w"
        :h="h"
        size="24"
        class="rounded-full"
        :class="bg ? colorsBgLight[type] : [colorsText[type], 'bg-gray-50 dark:bg-slate-800']"
    />
</template>