1. 增加svg组件
<template>
<svg
class="svg-icon"
aria-hidden="true"
:style="{
width: props.size + 'px',
height: props.size + 'px',
color: props.color
}"
>
<use :xlink:href="`#icon-${props.name}`" :fill="props.color" />
</svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
/**
* @description: svg图标组件
* @use {*} <SvgIcon name="home" :size="14" color="red" />
*/
export default defineComponent({
name: 'SvgIcon',
props: {
name: {
type: String,
required: true
},
size: {
type: Number,
default: 14
},
color: {
type: String,
default: '#000'
}
},
setup(props) {
return {
props
}
}
})
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: middle;
fill: currentColor;
overflow: hidden;
}
</style>
2. 安装插件 npm i vite-plugin-svg-icons --save-dev
3. 修改 vite.config.js 配置文件
// 配置全局加载svg图标为组件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import path from 'path';
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
// 要缓存的图标文件夹
iconDirs: [path.resolve(__dirname, 'src/assets/svg')],
// 执行 icon name 的格式
symbolId: 'icon-[name]'
})
]
})
4. main.ts
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// svg组件
import 'virtual:svg-icons-register'
import SvgIcon from './SvgIcon.vue'
app.component('SvgIcon', SvgIcon)
