浏览器控制台报错：不识别a-icon

网上推荐使用循环遍历每一个组件，进行注册

在main.js写这个循环，多少有点奇怪

并且我在下方这行代码就已经报错了，不太懂这个语法。

const  icons: any = Icons;

一筹莫展之际，我决定自己写一个a-icon组件。

<template>
  <span ref="icon" v-html="code" style="width:25px;height:25px;overflow:hidden;"></span>
</template>

<script>
export default {
  name: "AIcon",
  props: {
    type: String,
    theme: String,
    line:String,//双色图标的线条颜色，使用主题为双色图标时才有效
    fill:String,//双色图标的填充颜色，使用主题为双色图标时才有效
    component:String,
  },
  data() {
    return {
      code: "",
      path: "",
    }
  },
  methods: {
    /**
     * 更新svg属性，同步span的长度，高度，颜色，根据需要自行添加
     * @param code
     * @returns {string|*}
     */
    updateAttributes(code){
      let span=this.$refs.icon;
      code=this.insertCode(code,"<svg",`style="width:${span.style.width};height:${span.style.height};"`)
      let color="";
      if(this.theme==='twoTone'){
        if(this.line!=null){
          code=code.replaceAll('fill="#333"','fill="'+this.line+'"');
        }else{
          code=code.replaceAll('fill="#333"','fill="#1890ff"');
        }

        if(this.fill!=null){
          code=code.replaceAll('fill="#E6E6E6"','fill="'+this.fill+'"');
        }else{
          code=code.replaceAll('fill="#E6E6E6"','fill="#e6f7ff"');
        }
        return code;
      }else if(span.style.color==null){
        color='#ffffff';
      }else if(span.style.color.length<1){
        color='#ffffff';
      }else{
        color=span.style.color;
      }
      return this.insertCode(code,"<path",`fill="${color}"`)
    },
    /**
     * 指定代码后面插入需要的代码
     * @param text
     * @param str
     * @param insert
     * @returns {string}
     */
    insertCode(text,str,insert){
      let p=text.indexOf(str)+1;
      return text.substring(0,p+str.length)+" "+insert+" "+text.substring(p+str.length,text.length);
    }
  },
  mounted() {
    //如果有自定义svg代码，就展示自定义svg图形
    if(this.component!=null){
      this.code=this.updateAttributes(this.component);
      return;
    }
    //主题其实就是svg路径，没有主题，默认就是这个线条的svg
    if (this.theme == null || this.theme.length < 1) this.path = "outlined";
    else this.path = this.theme;
    //通过下载指定路径svg资源代码，进行处理
    this.$axios({
      method: 'get',
      url: require("@ant-design/icons-svg/inline-namespaced-svg/" + this.path.toLowerCase() + "/" + this.type + ".svg")
    }).then((response) => {
      this.code=this.updateAttributes(response.data);
    });
  }


}
</script>

<style scoped>


</style>

在main.js引入这个组件，作为全局组件即可，

import AIcon from './components/AIcon'
const app = createApp(App);
app.component("a-icon",AIcon);

代码中正常使用即可

  <a-icon type="menu" style="color: #ffffff;width:22px;height: 29px;"/>
  <a-icon type="up-circle" theme="twoTone" />
  <a-icon type="right-circle" theme="twoTone" />
  <a-icon type="up-square" theme="twoTone" />