Icon

封装的图标组件，可以参考：https://iconify.design/

基础用法

基础用法基础用法基础用法基础用法基础用法基础用法。

basic.vue

<template>
  <p>当前是支持饿了么图标、van图标、云端图标</p>
  <dk-icon
    v-for="item in _icons"
    :key="item"
    :icon="item"
    :size="36"
    hover-color="#f00"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const icons = [
  'Bottom', // 饿了么
  'icon-park-outline:ad-product', // 云端
  'like', // Vant
]
const _icons = ref(icons)
</script>

鼠标悬停

hover.vue

<template>
  <dk-icon
    v-for="item in _icons"
    :key="item"
    :icon="item"
    :size="36"
    hover-color="#f00"
    color="#2196F3"
  />
</template>
<script setup lang="ts">
import { icons } from './icons'
import { ref } from 'vue'
const _icons = ref(icons)
</script>

多彩图标

同时可以使用多彩图标。

color.vue

<template>
  <dk-icon v-for="item in _icons" :key="item" :icon="item" :size="36" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { iconColors } from './icons'
const _icons = ref(iconColors)
</script>

使用element-plus图标

同时也可以使用element-plus图标。并且支持使用插槽和Props方式填写图标。具体可以查看源码

element.vue

<template>
  <dk-icon
    v-for="item in _icons"
    :key="item"
    :icon="item"
    :size="36"
    hover-color="#2196F3"
  >
  </dk-icon>
  <p>使用插槽：</p>
  <dk-icon :size="36"><ChatDotRound /></dk-icon>
  <p>使用Props：</p>
  <dk-icon :size="36" icon="ChatDotRound"></dk-icon>
</template>
<script setup lang="ts">
import { elIcons } from './icons'
import { ref } from 'vue'
const _icons = ref(elIcons)
</script>

使用Vant图标

同时也可以使用Vant图标。具体可以查看源码

vant.vue

<template>
  <dk-icon
    v-for="item in _icons"
    :key="item"
    :icon="item"
    :size="36"
    hover-color="#2196F3"
  >
  </dk-icon>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const vantIcons = ['location', 'like', 'star', 'phone', 'good-job-o']
const _icons = ref(vantIcons)
</script>

组件配置

Icon Props

属性	说明	类型	默认值
icon	图标	string	-
color	图标颜色	string	-
hoverColor	hover图标颜色	string	-
size	图标大小	number	16

Icon Events

事件名	说明	参数
click	点击触发的事件	(event: MouseEvent) => void

Icon Slots

插槽名	说明
default	自定义默认内容

类型定义

组件导出以下类型定义

import type { IconProps } from '@vipl520/dk-ui'