vue3增加阿里云字体图标

在现有的字体里增加一个自定义的图标

一、阿里云字体所在目录

二、在阿里云网站里找到你想要的图标

丢到svg目录下

 也可以直接复制SVG代码

注意：因为找的图标有的是有默认颜色的不是纯颜色。所以要设置

如下中fill="#CCCCCC"  就是有个默认灰色。将其用stroke="#979797" 替换或是删除

<svg t="1751952413202" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19125" width="200" height="200"><path d="M903.712 853.952c-45.184-136.128-158.976-235.552-296.992-267.2A223.808 223.808 0 0 0 736 384a224 224 0 1 0-448 0 223.872 223.872 0 0 0 129.312 202.784c-138.016 31.584-251.808 131.04-297.024 267.136a32.032 32.032 0 0 0 60.736 20.16C227.552 734.048 360.576 640 512 640c151.488 0 284.48 94.048 330.944 234.048a32 32 0 0 0 60.768-20.096zM352 384c0-88.224 71.776-160 160-160 88.192 0 160 71.776 160 160s-71.776 160-160 160-160-71.776-160-160z" fill="#ADADAD" p-id="19126"></path></svg>

转为

 三、使用方法

 <svg-icon  icon-class="simple-user" :color="scope.row.sex==='1'? '#409EFF':'#F56C6C'"></svg-icon>

 期中simple-user就是自定义的图片，color是自定义的颜色（前提是纯色svg）

四、期中<svg-icon组件代码

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
</template>

<script>
// 引入阿里云字体图标css
import "assets/font/iconfont.css";
import "assets/font/iconfont.js";
export default defineComponent({
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
  },
  setup(props) {
    return {
      iconName: computed(() => `#icon-${props.iconClass}`),
      // iconName: computed(() => `#${props.iconClass}`),
      svgClass: computed(() => {
        if (props.className) {
          return `svg-icon ${props.className}`
        }
        return 'svg-icon'
      })
    }
  }
})
</script>

<style scope lang="scss">
.sub-el-icon,
.nav-icon {
  display: inline-block;
  font-size: 15px;
  margin-right: 12px;
  position: relative;
}

.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}

</style>

五、最终效果