使用svg-icon组件，快速使用svg图片

1. 首先，安装并导入 vue-svgicon 库。在项目目录下执行以下命令：

   pnpm install vite-plugin-svg-icons -D
   

2. 配置插件(vite.config.ts)

   // #1
   import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
   // #2
   import path from 'path'
   
   export default defineConfig({
       plugins: [
           vue(),
           // #3
           createSvgIconsPlugin({
               iconDirs: [path.resolve(process.cwd(), 'src/icons')]
           })
       ],
   })
   

3. 从main.ts导入

    // mark
    import 'virtual:svg-icons-register'

测试使用 svg 精灵地图

<svg aria-hidden="true">
    <!-- #icon-文件夹名称-图片名称 -->
    <use href="#icon-login-eye-off" />
</svg>