My code looks like this.
And i want to make this as minified as possible. I am also okay if any of my code can be separated from this file to separate new file.
Thanks in Advance.
<template>
<span v-html="svg" class="icon-wrapper" ref="iconWrapper"></span>
</template>
<script setup lang="ts">
import type { tycon } from "test-icons";
import { computed, onMounted, ref } from "vue";
import { completeDataSet } from "test-icons";
const props = defineProps<{
icon: tycon;
class: string;
color: string;
height: string;
width: string;
}>();
const iconPassed = completeDataSet.find((item) => item.name === props.icon);
const svg = computed(() => iconPassed?.data);
const iconWrapper = ref<HTMLElement | null>(null);
onMounted(() => {
iconWrapper.value?.lastElementChild?.firstElementChild?.setAttribute(
"class",
props.class
);
iconWrapper.value?.firstElementChild?.setAttribute(
"style",
"width:" + props.width + "px;height:" + props.height + "px;"
);
iconWrapper.value?.firstElementChild?.firstElementChild?.setAttribute(
"fill",
props.color
);
});
</script>