@cimom/vben-icons

用于多个 app 公用的图标文件，继承了 @cimom/vben-core-icons 的所有能力。业务上有通用图标可以放在这里。

安装

# 进入目标应用目录，例如 apps/xxxx-app
# cd apps/xxxx-app
pnpm add @cimom/vben-icons

使用方式

基本使用

<template>
  <div>
    <!-- 使用 SVG 图标 -->
    <SvgAvatar1Icon />
    <SvgDownloadIcon />

    <!-- 使用 Iconify 图标 -->
    <MdiGithub />
    <MdiWechat />

    <!-- 使用空图标占位 -->
    <EmptyIcon />
  </div>
</template>

<script setup lang="ts">
import {
  SvgAvatar1Icon,
  SvgDownloadIcon,
  MdiGithub,
  MdiWechat,
  EmptyIcon,
} from '@cimom/vben-icons';
</script>

设置图标属性

<template>
  <div>
    <!-- 设置图标大小 -->
    <SvgAvatar1Icon :size="24" />

    <!-- 设置图标颜色 -->
    <MdiGithub color="#1890ff" />

    <!-- 设置旋转角度 -->
    <SvgDownloadIcon :rotate="180" />

    <!-- 设置水平/垂直翻转 -->
    <MdiWechat :flip="horizontal" />
  </div>
</template>

可用图标

SVG 图标

这些图标是项目内置的 SVG 图标，可以直接导入使用：

import {
  SvgAntdvLogoIcon,
  SvgAvatar1Icon,
  SvgAvatar2Icon,
  SvgAvatar3Icon,
  SvgAvatar4Icon,
  SvgBellIcon,
  SvgCakeIcon,
  SvgCardIcon,
  SvgDownloadIcon,
} from '@cimom/vben-icons';

Iconify 图标

这些图标是基于 Iconify 的图标，可以直接导入使用：

import {
  MdiKeyboardEsc,
  MdiWechat,
  MdiGithub,
  MdiGoogle,
  MdiQqchat,
} from '@cimom/vben-icons';

特殊图标

// 空图标占位组件
import { EmptyIcon } from '@cimom/vben-icons';

图标属性

所有图标组件都支持以下属性：

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | size | number \| string | 16 | 图标大小，单位为像素 | | color | string | - | 图标颜色 | | rotate | number | 0 | 旋转角度，单位为度 | | spin | boolean | false | 是否旋转动画 | | flip | 'horizontal' \| 'vertical' \| 'both' \| null | null | 翻转方向 |

自定义图标

如果需要使用其他 Iconify 图标，可以使用 createIconifyIcon 函数创建：

import { createIconifyIcon } from '@cimom/vben-icons';

// 创建自定义图标
const MyCustomIcon = createIconifyIcon('mdi:account');

// 在组件中使用
export default defineComponent({
  components: {
    MyCustomIcon,
  },
  setup() {
    return {};
  },
});

与其他组件配合使用

与按钮组件配合

<template>
  <a-button type="primary">
    <template #icon>
      <MdiGithub />
    </template>
    GitHub
  </a-button>
</template>

<script setup lang="ts">
import { MdiGithub } from '@cimom/vben-icons';
</script>

与菜单组件配合

<template>
  <a-menu>
    <a-menu-item>
      <template #icon>
        <SvgDownloadIcon />
      </template>
      下载
    </a-menu-item>
    <a-menu-item>
      <template #icon>
        <SvgBellIcon />
      </template>
      通知
    </a-menu-item>
  </a-menu>
</template>

<script setup lang="ts">
import { SvgDownloadIcon, SvgBellIcon } from '@cimom/vben-icons';
</script>

扩展图标

如果需要添加新的图标，可以在项目中创建新的图标文件，然后导出：

// 在项目中创建 src/icons/custom-icons.ts
import { createIconifyIcon } from '@cimom/vben-icons';

export const CustomIcon1 = createIconifyIcon('mdi:home');
export const CustomIcon2 = createIconifyIcon('mdi:account');

// 在项目中使用
import { CustomIcon1, CustomIcon2 } from './icons/custom-icons';
import { MdiGithub } from '@cimom/vben-icons';