Icon 图标
用于显示图标。
何时使用
需要显示图标时。
所有内置的图标可在 DevUI 官网进行查看：https://devui.design/icon/ruleResource
基本用法
附带描述信息
Logo颜色
尺寸
图标组
可操作图标
静态图标
自定义字体图标
Icon 组件默认引用 DevUI 图标库的图标，如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。
@font-face { font-family: 'my-icon'; src: url('./my-icon.ttf') format('truetype'); } .my-icon { font-family: 'my-icon'; } .my-icon-right::before { content: '\E03F'; } 引入字体图标的 css
@import 'my-icon.css'; 使用
<d-icon class-prefix="my-icon" name="right"></d-icon> 自定义 svg
可以借助 vite-plugin-vue-svg，将 svg component 传入，实现自定义 svg。
<template> <d-icon :component="MySvgIcon"></d-icon> </template> <script> import { defineComponent } from 'vue'; import MySvgIcon from '../../assets/logo.svg'; export default defineComponent({ setup() { return { MySvgIcon, }; }, }); </script> Icon 参数
| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
|---|---|---|---|---|
| name | string | -- | 必选，图标名称 | 基本用法 |
| size | string | '16px' | 可选，图标尺寸 | 尺寸 |
| color | string | '#252b3a' | 可选，图标颜色 | 颜色 |
| class-prefix | string | 'icon' | 可选，自定义字体图标前缀 | 自定义字体图标 |
| component | VueComponent | null | 可选，自定义 svg 图标 | 自定义 svg |
| operable | boolean | false | 可选，图标是否可操作 | 附带描述信息 |
| disabled | boolean | false | 可选，图标是否禁用 | 附带描述信息 |
| rotate | number | 'infinite' | -- | 可选，infinite表示设置图标自动旋转，数字值表示图标旋转角度 | 附带描述信息 |
Icon 插槽
| 插槽名 | 说明 |
|---|---|
| prefix | 图标前置内容 |
| suffix | 图标后置内容 |
