Is it possible to shorten this Vue + Typescript Code

Viewed 30

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>
0 Answers
Related