vue3项目怎么引用iconfont图标

1. 在iconfont官网上找到需要使用的图标，将其加入购物车。

2. 在购物车中选中需要使用的图标，然后点击右上角的“下载代码”，选择“Symbol”类型，下载代码包。

3. 解压下载的代码包，可以看到其中包含了一个名为“symbol-defs.svg”的文件。

4. 在Vue项目中的public文件夹下创建一个名为“icons”的文件夹，并将“symbol-defs.svg”文件复制到该文件夹中。

5. 在main.js文件中，引入“svg-sprite-loader”和“icons”文件夹中的“symbol-defs.svg”文件：

   import { createApp } from 'vue'
   import App from './App.vue'

   // 引入svg-sprite-loader
   import 'svg-sprite-loader/dist/cjs.js!./icons/symbol-defs.svg'

   createApp(App).mount('#app')

6. 在需要使用图标的组件中，使用“svg”标签和“use”标签来引用图标。例如，引用id为“icon-home”的图标：

   <template>
     <div>
       <svg class="icon">
         <use xlink:href="#icon-home"></use>
       </svg>
     </div>
   </template>

注意：在“use”标签中，使用“xlink:href”属性来指定要引用的图标的id，且该id需要加上“#”前缀。