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" />