nuxt3 使用 svg 插件

安装依赖

yarn add vite-plugin-svg-icons -D

目录结构

在nuxt.config.ts中配置

import { loadEnv } from 'vite';
import { createVitePlugins } from './vite/plugins';
import { createViteBuild } from './vite/build';

export default defineNuxtConfig({
    devtools: { enabled: true },
    srcDir: './src',
    ssr: true,
    devServer: {
        port: 3000,
    },
    css: ['element-plus/dist/index.css', '~/assets/scss/reset.scss'],
    vite: {
        plugins: createVitePlugins(),
        build: createViteBuild(),
    }
});

createVitePlugins()函数代码

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

export function createVitePlugins() {
    const plugins = [
        // svg插件
        createSvgIconsPlugin({
            iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
            symbolId: 'icon-[dir]-[name]',
        }),
    ];
    return plugins;
}

编写SvgIcon组件，根据情况进行微调

<script setup lang="ts">
const props = defineProps({
    // 颜色
    color: {
        type: String,
        default: '',
    },
    // class
    className: {
        type: String,
        default: '',
    },
    // svg名称
    name: {
        type: String,
        required: true,
    },
});

const iconName = computed(() => {
    if (props.name) return `#icon-${props.name}`;
    return '';
});
const svgClass = computed(() => {
    if (props.className) return `svg-icon ${props.className}`;
    return 'svg-icon';
});
</script>

<template>
    <svg :class="svgClass" v-bind="$attrs" aria-hidden="true">
        <use :xlink:href="iconName" :fill="color" />
    </svg>
</template>

<style scoped lang="scss">
.svg-icon {
    width: 1em;
    height: 1em;
    position: relative;
    fill: currentColor;
    vertical-align: bottom;
}
</style>

组件全局使用

在plugins文件下创建一个svg-icon.ts或者svg-icon.client.ts（作用于客户端）

import SvgIcon from '~/components/SvgIcon/index.vue';
import 'virtual:svg-icons-register';

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.component('svg-icon', SvgIcon);
});

注意 import 'virtual:svg-icons-register'; 一定要引入

页面中使用

其中name属性对应svg目录下的svg文件

<template>
    <svg-icon name="photovoltaic" color="#337ecc"></svg-icon>
</template>