Icon 图标
基于 SVG 的图标组件，内置常用图标，支持自定义颜色、大小和扩展。
基础用法
通过 name 属性指定图标名称。
vue
<template>
<dr-icon name="home" />
<dr-icon name="user" />
<dr-icon name="setting" />
<dr-icon name="search" />
</template>图标颜色
通过 color 属性设置图标颜色。
vue
<template>
<dr-icon name="heart-fill" color="#ee0a24" />
<dr-icon name="star-fill" color="#ff976a" />
<dr-icon name="checkmark-circle-fill" color="#07c160" />
<dr-icon name="info-circle-fill" color="#1989fa" />
</template>图标大小
通过 size 属性设置图标大小，默认单位为 rpx。
vue
<template>
<dr-icon name="search" :size="32" />
<dr-icon name="search" :size="48" />
<dr-icon name="search" :size="64" />
<dr-icon name="search" size="40px" />
</template>旋转动画
设置 spin 属性可以让图标旋转，适用于加载状态。
vue
<template>
<dr-icon name="loading" :size="48" spin />
<dr-icon name="refresh" :size="48" spin />
</template>图片图标
name 属性支持传入图片 URL，可以使用网络图片或本地图片。
vue
<template>
<dr-icon name="https://example.com/icon.png" :size="48" />
<dr-icon name="/static/icon.png" :size="48" />
</template>自定义图标扩展
通过 Vue 的 provide/inject 机制，可以扩展自定义图标。
vue
<script setup>
import { provide } from 'vue'
// 注入自定义图标
provide('drIconCustomIcons', {
'my-icon': '<path d="M512 64C264.96 64 64 264.96..."/>',
'custom-logo': '<path d="..."/>'
})
</script>
<template>
<!-- 使用自定义图标 -->
<dr-icon name="my-icon" :size="48" />
</template>内置图标
点击图标可复制名称。
方向箭头
| 图标名 | 说明 |
|---|---|
| arrow-up | 向上箭头 |
| arrow-down | 向下箭头 |
| arrow-left | 向左箭头 |
| arrow-right | 向右箭头 |
| arrow-double-left | 双左箭头 |
| arrow-double-right | 双右箭头 |
操作类
| 图标名 | 说明 |
|---|---|
| close | 关闭 |
| close-circle | 关闭圆圈 |
| close-circle-fill | 关闭圆圈填充 |
| checkmark | 勾选 |
| checkmark-circle | 勾选圆圈 |
| checkmark-circle-fill | 勾选圆圈填充 |
| plus | 加号 |
| plus-circle | 加号圆圈 |
| plus-circle-fill | 加号圆圈填充 |
| minus | 减号 |
| minus-circle | 减号圆圈 |
提示类
| 图标名 | 说明 |
|---|---|
| info | 信息 |
| info-circle-fill | 信息填充 |
| warning | 警告 |
| warning-circle-fill | 警告填充 |
| question | 疑问 |
| question-circle-fill | 疑问填充 |
常用功能
| 图标名 | 说明 |
|---|---|
| search | 搜索 |
| edit | 编辑 |
| delete | 删除 |
| refresh | 刷新 |
| share | 分享 |
| setting | 设置 |
| home | 首页 |
| user | 用户 |
| user-fill | 用户填充 |
| star | 星星 |
| star-fill | 星星填充 |
| heart | 心形 |
| heart-fill | 心形填充 |
| image | 图片 |
| camera | 相机 |
| loading | 加载 |
| eye | 眼睛 |
| eye-off | 隐藏 |
| copy | 复制 |
| link | 链接 |
| phone | 手机 |
| calendar | 日历 |
| time | 时间 |
| location | 定位 |
| menu | 菜单 |
| more | 更多 |
| more-vertical | 更多（竖向） |
| download | 下载 |
| upload | 上传 |
| empty | 空状态 |
| scan | 扫描 |
| qrcode | 二维码 |
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 图标名称或图片 URL | string | - |
| color | 图标颜色 | string | currentColor |
| size | 图标大小，默认单位 rpx | string | number | 48 |
| spin | 是否开启旋转动画 | boolean | false |
| bold | 是否加粗 | boolean | false |
| custom-class | 自定义类名 | string | - |
| custom-style | 自定义样式 | string | object | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击图标时触发 | event |
Slots
| 名称 | 说明 |
|---|---|
| default | 自定义图标内容 |