Plus Vben5

主题

图标 ​

可参考官方: https://doc.vben.pro/guide/essentials/icons.html

或者我的文章: https://juejin.cn/post/7434178908986769449

菜单图标(在线) ​

直接在https://icon-sets.iconify.design/ 搜索 然后粘贴到图标

alt text

菜单图标(离线) 版本>=1.1.0 支持 ​

如上图的ic:baseline-15mp为例:

注意: ic为图标集名称 baseline-15mp为图标名

安装图标包

shell
cd packages/icons
pnpm i @iconify/icons-图标集 -D

添加离线图标 文件位置: packages\icons\src\iconify-offline\menu-icons.ts

ts
// 导入规则大概是这样的 @iconify/icons-图标集/图标名称
import 图标 from "@iconify/icons-ic/baseline-15mp";

addIcon("ic:baseline-15mp", 图标);

注意事项:

  1. addIcon 的第一个参数图标名需要与上面对应, 图标导入可以随取名
  2. 如果未找到相关导入 需要手动安装图标集
  3. 可能会存在安装不上(404)图标集情况(极少， 基本不可能) 那就换图标吧

然后在菜单配置填写ic:baseline-15mp即可

这种方式粒度最小(单图标) 对打包体积友好

图标集安装 ​

提示

个人不推荐此方式 会对打包体积有很大影响

安装图标集 全量

shell
cd packages/icons
pnpm i @iconify/icons-json -D

添加图标集

js
import antDesign from "@iconify/json/json/ant-design.json";

addCollection(antDesign);

相当于

js
import xxx from "@iconify/json/json/图标集名称.json";

然后你就可以使用该图标集下的全部图标

本地 svg 图标 ​

路径 packages/icons/src/svg

将 svg 图标粘贴到packages/icons/src/svg/icons 然后在 index.ts 添加

js
// 比如现在的job图标
// 格式: svg:上面图标名称(不带拓展名)
const SvgSnailJobIcon = createIconifyIcon("svg:snail-job");

export {
  ...
  SvgSnailJobIcon
}

然后在菜单填写svg:snail-job即可

注意

要重启 vite 才能生效!

要重启 vite 才能生效!

要重启 vite 才能生效!