关于Nuxt3使用svg

官方的不好用，还是用vite自己自定义的好用
具体如下：
1、自定义svg组件

<template>
  <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon',
    },
    icon: {
      type: String,
      required: false,
      default: '',
    },
    color: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: '1em',
    },
  });

  const symbolId = computed(() => `#${props.prefix}-${props.icon}`);
</script>

2、nuxt.config.ts
安装vite-plugin-svg-icons

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';

vite:{
	plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
}

3、plugin引入 virtual:svg-icons-register，然后nuxt plugin配一下就行

import 'virtual:svg-icons-register';

自定义不管是大小颜色都比官方module那个好用太多