vue3 + TypeScript 实现 引入使用svg ，使用第三方插件 unplugin-icons

在 Vue 3 项目中使用 TypeScript 并引入 unplugin-icons 来处理 SVG 图标，可以按照以下步骤进行设置和实现：

1. 安装依赖

首先，确保你已经安装了 unplugin-icons 以及相关的依赖：

npm install unplugin-icons  -D

2. 配置 unplugin-icons

在 vite.config.ts 中配置 unplugin-icons 插件：

import path from 'node:path'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Icons({
      autoInstall: true,
      compiler: 'vue3',
      customCollections: {
        base: FileSystemIconLoader(path.resolve('src', 'assets/icons'), svg => svg),
      },
    }),
  ],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
})

3. 图标放到对应目录

4. 使用 SVG 图标

你可以在 Vue 组件中直接使用图标。例如：

<script setup lang="ts">
import LoginLeftImg from '~icons/base/login-left-img'

</script>


<template>
  <div class="layout">
     <login-left-img class="left-icon" />
  </div>
</template>

但是要注意 ： 会报下面错误

进行如下配置就可以了

通过上述步骤，你就可以在 Vue 3 项目中使用 unplugin-icons 来引入和使用 SVG 图标了。

今日份分享就到这里了，希望对你们有所帮助~