B端系统菜单栏中使用阿里图标
1.需求说明
由于组件库自带的图标数量和内容有限，采用丰富多样的阿里图标是不错的选择
2.阿里图标使用
2.1官网
iconfont-阿里巴巴矢量图标库
2.2使用
2.2.1.先根据关键词搜索并选择对应的图标
注意：若只是少量的svg图片加载建议下载使用，若是svg图片数量过多并不建议采用。
也可以采用其他的方式使用，注意引入对应的iconfont.js和css文件
注意：vite中可以配置svg图标目录
2.2.2封装组件用来显示svg图标
<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName"></use></svg>
</template><script lang="ts">import { computed } from 'vue'export default {name: 'BaseSvgIcon',props: {iconClass: { type: String },className: { type: String },},setup(props) {const iconName = computed(() => {return props.iconClass ? `#icon-${props.iconClass}` : '#icon'})const svgClass = computed(() => {return props.className ? 'svg-icon ' + props.className : 'svg-icon'})return { iconName, svgClass }},}
</script><style scoped lang="scss">.svg-icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>2.2.3.安装vite-plugin-svg-icons 插件，并在main.js中进行注册并导入
注意：Vite插件vite-plugin-svg-icons可以加载svg小图标。其原理是在Vite编译的时候通过DOM操作将SVG插入DOM结构中，然后通过使用内联SVG进行加载访问，方便了小图标引用模式。
// svg-icons注册导入
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue'
2.2.4.使用组件
<!--class-name是为了方便添加样式 icon-class是对应的svg的名字，方便添加样式-->
<SvgIcon :icon-class="svg文件名字" class-name="icon" />
