Vue3中使用svg文件图标（TS）

1、写入vue.config.js，设置svg-sprite-loader

在vue3项目的根目录创建vue.config.js文件，写入如下：

import path from "path";

function resolve(dir) {
    return path.join(__dirname, '.', dir)
}

module.exports = {
    chainWebpack: config => {
        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude
            .add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include
            .add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
    }
}

2、创建icons文件

在src文件下创建一个icons的文件，如图所示：

这里的svg文件夹，存放*.svg的矢量图

在/src/icons/index.js 代码如下：

const req = require.context('./svg', false, /\.svg$/)
req.keys().map(req)

3、创建 全局组件

在/src/components/ 下创建文件SvgIcon.vue, 代码如下

<template>
<svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
</svg>
</template>
<script lang="ts" setup>
import { computed, defineProps } from 'vue'

const props = defineProps<{
    iconClass: string;
    className?: string;
    [prop: string]: unknown;
}>();

const iconName = computed(() => {
    return props.iconClass ? `#icon-${props.iconClass}` : "#icon"
})
const svgClass = computed(() => {
    return props.className ? `svg-icon ${props.className}` : "svg-icon"
})
</script>

<style scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

4、注册全局组件

在main.ts中注册全局组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// svg-icon
import SvgIcon from '@/components/SvgIcon.vue';
import "@/icons/index";

const app = createApp(App)
app.component("svg-icon", SvgIcon)
app.use(router)
app.mount('#app')

5、使用

<!-- 这里的icon-calss的值为存放在icons/svg文件下的文件名称 -->
<svg-icon icon-class="CSS3" />
<svg-icon icon-class="HTML5" />
<svg-icon icon-class="Bootstrap" />
<svg-icon icon-class="javascript" />
<svg-icon icon-class="jQuery" />
<svg-icon icon-class="uniapp" />