hvac-web/src/components/SvgIcon.vue

<script setup lang="ts">
import { computed } from 'vue';

import { addUnit } from '@/utils';
import { IconfontPrefix } from '@/icons/fonts/iconfont';

import type { CSSProperties } from 'vue';
import type { IconObject } from '@/types';

interface Props extends IconObject {
  marginTop?: number;
}

const props = defineProps<Props>();

defineEmits<{
  click: [e: MouseEvent];
}>();

const iconClass = computed(() => {
  return IconfontPrefix + props.name;
});

const iconStyle = computed<CSSProperties>(() => {
  return {
    fontSize: props.size && addUnit(props.size),
    color: props.color,
    marginTop: props.marginTop && addUnit(props.marginTop),
  };
});
</script>

<template>
  <i :class="iconClass" :style="iconStyle" @click="$emit('click', $event)"></i>
</template>