index/components/ui/Icon.vue

59 lines
935 B
Vue

<script setup lang="ts">
import type { IconifyRenderMode } from 'iconify-icon'
import type { PropType } from 'vue'
const props = defineProps({
name: {
type: String,
required: true,
},
color: {
type: String,
default: 'white',
},
mode: {
type: String as PropType<IconifyRenderMode>,
default: 'svg',
},
inline: {
type: Boolean,
default: false,
},
width: {
type: String,
default: '1em',
},
height: {
type: String,
default: '1em',
},
flip: {
type: String,
default: '',
},
rotate: {
type: [String, Number],
default: '',
},
})
</script>
<template>
<iconify-icon
class="icon"
:icon="props.name"
:mode="props.mode"
:inline="props.inline"
:width="props.width"
:height="props.height"
:flip="props.flip"
:rotate="props.rotate"
/>
</template>
<style scoped lang="scss">
.icon {
color: v-bind(color);
}
</style>