Icon

项目中关于Icon的使用方式有三种

• Iconify
• Svg Icon
• Ant Design Icon

Iconify

对Iconify的二次封装

使用方式如下

import { Iconify } from '@/components/icon';

<Iconify icon="solar:emoji-funny-square-bold-duotone" size={24} color={colorPrimary} />

提示

如果你使用的是vscode编辑器，推荐安装Iconify IntelliSense

Svg Icon

通过vite-plugin-svg-icons vite插件将本地src/assets/icons目录下的svg生成svg雪碧图。只需在vite.config.ts中按如下方式配置

vite.config.ts

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

// https://vitejs.dev/config/
export default defineConfig({
  // ...
  plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
  // ...
});

其使用方式如下：

import { SvgIcon } from '@/components/icon';

// icon是svg文件名
<SvgIcon icon="ic_file_audio" size={48} />

Ant Design Icon

使用 Ant Design 语义化的矢量图标，详细内容请参考官方文档

import { StepBackwardOutlined } from '@ant-design/icons';

<StepBackwardOutlined />