B端系统菜单栏中使用阿里图标

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