记录如何在arco-design-pro-vue中将图标库里面的字体图标放入侧边栏里面

前言

由于业务需求需要将一些图标放到侧边栏里面，但是由于ui框架里面的图标有限。因此需要将阿里巴巴图标库里面的图标导入到侧边栏展示

代码实现

1.在路由模块中定义这个图标的名字

例如：

2.将需要用到的svg突变放入assets文件夹里面

3. 找到 components/menu/index.vue 文件

a.导入这个图标

b.使用h函数渲染这个图标

将

const icon = element?.meta?.icon
      ? () => h(compile(`<${element?.meta?.icon}/>`))
      : null;

变为

let icon;
if (element?.meta?.icon === 'authorization') {
  icon = () => h(authorization);
} else if (element?.meta?.icon === 'algorithmModel') {
  icon = () => h(algorithmModel);
}

设置侧边栏svg图标颜色可以随选中而发生颜色变化

1. 首先将svg里面的fill属性去掉
2. 然后在 @/components/menu/index.vue 文件中添加一下css代码

.arco-menu-selected {
   .arco-menu-icon {
     fill: rgb(var(--primary-6));
   }
}