Icon 以图形的形式表达含义
import { UIcon } from 'ungeui';
关于图标资源，我们采取了与组件库分离的形式，你可以在此处选取你想要的图标，并引入你的项目中
当然，我们预置了一些常用的 Icon，并提供您安装
yarn add -D @ungeui/icons
导入 Icon 示例：
import { IconClock } from @ungeui/icons
🔥基本用法你可以自定义图标大小<template>
<div>
<u-icon :size="15">
<IconChevronLeft />
</u-icon>
<u-icon size="2em">
<IconChevronLeft />
</u-icon>
<u-icon :size="45">
<IconChevronLeft />
</u-icon>
</div>
</template>
<script setup>
import { UIcon } from 'ungeui';
import { IconChevronLeft } from 'ungeicons';
</script>
🌈基本用法不同的颜色也可以代表不同的心情<template>
<div>
<u-space>
<u-icon color="red" :size="30">
<IconClock />
</u-icon>
<u-icon color="#987654" :size="30">
<IconClock />
</u-icon>
<u-icon color="rgb(55,45,78)" :size="30">
<IconClock />
</u-icon>
</u-space>
</div>
</template>
<script setup>
import { UIcon, USpace } from 'ungeui';
import { IconClock } from 'ungeicons';
</script>
<template>
<iconDemo />
</template>
<script setup>
import iconDemo from '../util/icons.vue';
</script>
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size | 自定义大小 | number | string | 30px |
| color | 自定义颜色 | string | undefind |