nuxt3批量引入svg文件

nuxt3引入svg的方法和viet的差不多，只是细节上有些不同

同样是两步，引入svg组件和引入svg文件

第一步：引入svg组件

在components文件夹下创建SvgIcon.vue组件

<template>
    <svg aria-hidden="true">
        <use :xlink:href="symbolId" :fill="color" />
    </svg>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
    name: 'SvgIcon',
    props: {
        prefix: {
            type: String,
            default: 'icon',
        },
        name: {
            type: String,
            required: true,
        },
        color: {
            type: String,
            default: '#333',
        },
    },
    setup(props) {
        const symbolId = computed(() => `#${props.prefix}-${props.name}`)
        return { symbolId }
    },
})
</script>

在plugins文件夹下创建svgicon.client.ts引入

import svgIcon from '@/components/SvgIcon.vue'
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.component('svg-icon', svgIcon)
})

第二步：引入svg文件

这里用到vite-plugin-svg-icons这个库，官方介绍：https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md

npm i vite-plugin-svg-icons -D

在nuxt.config.ts里面添加以下内容，注意文件夹路径要填对

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default defineNuxtConfig({
...
    vite: {
        plugins: [
            createSvgIconsPlugin({
                iconDirs: [path.resolve(process.cwd(), 'assets/svg')]
            })
        ],
    }
...
})

在plugins文件夹下的svgicon.client.ts文件中添加注入脚本

import 'virtual:svg-icons-register'

如果使用 Typescript,你可以在tsconfig.json内添加

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vite-plugin-svg-icons/client"]
  }
}

第三步：使用

传入svg文件夹中的名称就可以了

 效果