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