Skip to main content
首先你应该阅读Vben官方文档关于图标部分的设计：https://doc.vben.pro/guide/essentials/icons.html 在此前端项目中，Icon创建有三种方式：

​
图标创建的方式

​
IconifyIcon 图标

// packages/icons/src/iconify/index.ts
import { createIconifyIcon } from '@vben-core/icons';

export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
这种方式可以直接引入基于 Iconify 的图标，图标的来源可以是 Iconify 的图标库，也可以是第三方图标库。 对应的图标库：https://icon-sets.iconify.design/ 缺点： 这种方式必须依赖Iconify，进入页面首先会请求Iconify的图标库，然后才能显示图标。如果断网图标就加载不出来。

​
SVG 图标

还可以手动复制svg源码创建图标，创建方式如下：
  1. 进入 langchat-ui/packages/icons/src/svg/icons 这个目录，把svg文件拷贝到这里
  2. 进入 langchat-ui/packages/icons/src/svg/index.ts 这个文件，把svg文件引入
  3. 最后export这个Icon对象
例如这样，手动引入 zhipu.svg 这个图标 image-20260228104212790 如上引入完成后，就可以在任意vue页面使用如下方式使用这个icon： 
import { SvgZhipuIcon } from '@vben/icons';

<SvgZhipuIcon class="w-2 h-2"/>
SvgZhipuIcon 作为一个vue对象可以在任意位置使用 优点： 这种方式可以完全自定义icon svg源码，不依赖任何框架，而且你在langchat很多位置都在使用 icon: 'svg:xxx' 这种写法，就是来源于这里的svg文件

​
Lucide 图标

Lucide 是一个开源图标库，你可以在这里查看图标：https://lucide.dev/icons/ 优点： 引入完成后，也不需要联网加载icon，会在编译期就把这个svg打到包文件

​
推荐

  • 首先完全不推荐使用 createIconifyIcon 方式，因为这样一旦断网，图标就加载不出来。
  • 对于单独使用Icon组件的场景，推荐使用 Lucide图标库，图标库地址：https://lucide.dev/icons/
  • 对于例如代码中使用 icon: 'svg:xxx' 这种场景，一定是需要手动引入SVG文件的方式，其他方式都用不了。

​
场景案例

​
前端创建新工作流节点

在创建新的工作流节点，每个节点都要指定一个svg，例如 config.ts 如下： 
import type { WorkflowNode } from '../../types/nodeConfig';
import { GroupEnum, NodeTypeEnum } from '../../types/nodeConfig';
const config: WorkflowNode = {
  type: 'BaiduSearchNode',
  nodeType: NodeTypeEnum.Common,
  label: '百度搜索',
  group: GroupEnum.Tool,
  description: '调用百度搜索引擎',
  icon: 'svg:baidu',
  data: {
    paramSchemas: [
      {
        fieldName: 'input',
        label: '搜索关键词',
        help: '要调用搜索引擎的关键词',
        componentProps: {
          placeholder: '请输入关键词',
        },
        rules: 'required',
        component: 'Input',
        defaultValue: '',
      },
      {
        fieldName: 'num',
        label: '搜索条数',
        help: '搜索条数，默认为5',
        componentProps: {
          placeholder: '请输入搜索条数',
        },
        rules: 'required',
        component: 'InputNumber',
      },
    ],
    params: {
      input: '',
      num: 5,
    },
    outputs: [{ field: 'text', type: 'string', description: '百度搜索结果' }],
  },
};

export default config;
这种方式你就需要在 langchat-ui/packages/icons/src/svg/icons 引入 baidu.svg 这个图标