左侧边栏自定义 svg 图标与 element-ui 图标大小、布局不一致

[springbear2020]

Bug report（问题描述）

左侧边栏自定义 svg 图标与 element-ui 图标大小、布局不一致。如下图，视觉上明显感觉两种图标大小不一致，P、D、R 三个字母在垂直方向也未对齐

Steps to reproduce（问题复现步骤）

任意修改路由配置中的两个图标名称，一个使用自定义 svg 图标名称，另一个使用 element-ui 图标名称即可复现问题

{
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    alwaysShow: true, // will always show the root menu
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      roles: ['admin', 'editor'] // you can set roles in root nav
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: {
          // element-ui icon
          icon: "el-icon-user-solid",
          title: 'Page Permission',
          roles: ['admin'] // or you can only set roles in sub nav
        }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'DirectivePermission',
        meta: {
          // svg icon
          icon: "user",
          title: 'Directive Permission'
          // if do not set roles, means: this page does not require permission
        }
      },
      {
        path: 'role',
        component: () => import('@/views/permission/role'),
        name: 'RolePermission',
        meta: {
          // element-ui icon
          icon: "el-icon-user-solid",
          title: 'Role Permission',
          roles: ['admin']
        }
      }
    ]
  }

Screenshot or Gif（截图或动态图）

Link to minimal reproduction（最小可在线还原demo）

无

Other relevant information（额外信息）

• Your OS: Windows 11
• Node.js version: v16.18.0
• vue-element-admin version: 4.4.0