54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<span
|
|
ref="refIcon"
|
|
:style="{ color }"
|
|
:class="[prefixCls]"
|
|
class="!flex"
|
|
v-html="tempIcon"
|
|
></span>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import icons from '@/components/BasicPacks/tools/icons/icons.json'
|
|
import {usePrefix} from "@/utils/usePrefix";
|
|
import {computed, onMounted, ref, withDefaults, defineProps} from "vue";
|
|
|
|
interface Props {
|
|
icon: string
|
|
color?: string | null
|
|
size?: string | number
|
|
strokeWidth?:string | number
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
color: null,
|
|
})
|
|
|
|
const { prefixCls } = usePrefix('icons')
|
|
const tempIcon = ref<string>()
|
|
const refIcon = ref<HTMLDivElement>()
|
|
tempIcon.value = icons[`${props.icon}`] as string
|
|
const color = computed(() => {
|
|
return props.color
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (props.size) {
|
|
const svg: SVGElement = refIcon.value?.children[0] as SVGElement
|
|
svg.setAttribute('width', props.size as string)
|
|
svg.setAttribute('height', props.size as string)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
@prefix: ~'@{prefixCls}-icons';
|
|
|
|
.@{prefix} {
|
|
& :deep(svg path) {
|
|
stroke: currentColor;
|
|
stroke-width: v-bind("props.strokeWidth");
|
|
}
|
|
}
|
|
</style>
|