Vben Adminicon 图标组件
Icon
用于项目内组件的展示，基本支持所有图标库（支持按需加载，只打包所用到的图标）
icon 组件位于 src/components/Icon 内
Usage
<template>
<Icon icon="gg:loadbar-doc"></Icon>
</template>
<script>
import { defineComponent } from 'vue';
import { Icon } from '/@/components/Icon';
export default defineComponent({
components: { Icon },
});
</script>
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| icon | string | - | 图标名 |
| color | string | - | 图标颜色 |
| size | number | 16 | 图标大小 |
| prefix | string | - | 图标前缀 |
提示
如果 icon 值以 |svg 结尾，则会渲染成 SvgIcon 组件
SvgIcon
用于使用项目 svg 雪碧图
Usage
<template>
<div>
<SvgIcon name="test"> </SvgIcon>
</div>
</template>
<script>
import { SvgIcon } from '/@/components/Icon/Icon.vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { SvgIcon },
});
</script>
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| name | string | - | svg 图标名 |
| size | number | 16 | 图标大小 |
IconPicker
本组件详细说明请参阅图标选择器
Usage
<template>
<div>
<IconPicker />
</div>
</template>
<script>
import { IconPicker } from '/@/components/Icon';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IconPicker },
});
</script>
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | string | 100% | 宽度 |
| pageSize | number | 140 | 每页显示的图标数 |
| copy | boolean | false | 是否可以复制 |
| mode | string | iconify | 备选图标池，为 svg 时，会读取所有 svg sprite 图标。详见下方说明 |
mode 说明
mode为iconify时，会使用预生成的图标集数据作为备选图标池mode为svg时，会使用/src/assets/icons下的所有svg图标（可包含一级子目录）作为备选图标池，详见vite-plugin-svg-icons。