vue3.0 引入iconfont

1. 打开阿里巴巴矢量图标库
2. 我的项目下的xxx项目
3. 图标选择symbol模式
4. 查看在线链接, 双击xxxxxxx.js会打开一个新标签页内容是js文件,保存到项目(后续图标有更新的话,重新替换这个js文件就行)
5. 项目中写一个icon组件

   <template>
     <svg :class="svgClass" aria-hidden="true">
       <use :xlink:href="iconClassName" :fill="color" />
     </svg>
   </template>
   <script setup lang="ts">
   import { computed } from "vue";
   const props = defineProps({
     iconName: {
       type: String,
       required: true,
     },
     class: {
       type: String,
       default: "",
     },
     color: {
       type: String,
       default: "#FFFFFF",
     },
   });
   
   // 图标在 iconfont 中的名字
   const iconClassName = computed(() => {
     return `#icon-${props.iconName}`;
   });
   // 给图标添加上类名
   const svgClass = computed(() => {
     if (props.class) {
       return `svg-icon ${props.class}`;
     }
     return "svg-icon";
   });
   </script>
   <style scoped>
   .svg-icon {
     /* 我的1rem-10px */
     width: 1.6em;
     height: 1.6em;
     position: relative;
     fill: currentColor;
     vertical-align: -2px;
   }
   </style>
   

6. 全局引入icon组件

   // 引入iconFont
   import SvgIcon from 'icon组件路径'
   import '下载的js文件路径';
   app.component('SvgIcon', SvgIcon);

7. 页面中使用icon组件

   <!-- 不用加前缀 'icon-' , 在组件中同意拼接了 -->
   <svg-icon iconName="search" />