51 lines
1.5 KiB
Vue
51 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { createVNode, resolveComponent, defineComponent, computed, type CSSProperties } from 'vue'
|
|
import svg from '@/components/icon/svg/index.vue'
|
|
import { isExternal } from '@/utils/common'
|
|
export default defineComponent({
|
|
name: 'Icon',
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: '18px'
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: '#000000'
|
|
}
|
|
},
|
|
setup(props) {
|
|
const iconStyle = computed((): CSSProperties => {
|
|
const { size, color } = props
|
|
let s = `${size.replace('px', '')}px`
|
|
return {
|
|
fontSize: s,
|
|
color: color
|
|
}
|
|
})
|
|
if (props.name) {
|
|
if (props.name.indexOf('el-icon-') === 0) {
|
|
return () =>
|
|
createVNode('el-icon', { class: 'icon el-icon', style: iconStyle.value }, [
|
|
createVNode(resolveComponent(props.name))
|
|
])
|
|
} else if (props.name.indexOf('local-') === 0 || isExternal(props.name)) {
|
|
return () => createVNode(svg, { name: props.name, size: props.size, color: props.color })
|
|
} else {
|
|
return () => createVNode('i', { class: [props.name, 'icon'], style: iconStyle.value })
|
|
}
|
|
}
|
|
}
|
|
})
|
|
</script>
|