准备好svg文件
假设从iconfont-阿里巴巴矢量图标库下载了一个svg格式的图标,放在我们项目里,并重命名为ic_money.svg,相对路径为:src\assets\images\icons\ic_money.svg
安装vite-plugin-svg-icons插件
npm install vite-plugin-svg-icons -D
npm install vite-plugin-svg-icons@2 -D // 安装指定版本
本例插件版本如下
"vite-plugin-svg-icons": "^2.0.1"
vite.config.ts中加入以下代码
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
const svgIconsPlugin = createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/images/icons')],
symbolId: 'icon-[dir]-[name]',
});
export default defineConfig({
plugins: [
...
svgIconsPlugin,
],
...
})
新建SvgIcon.vue文件
在src\components目录下新建组件:SvgIcon.vue
<template>
<svg :style="iconStyle" aria-hidden="true">
<use :xlink:href="iconUrl" :fill="color"/>
</svg>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps({
name: {
type: String,
default: '',
},
size: {
type: String,
default: '14',
},
color: {
type: String,
default: '#3f99fa',
},
})
const iconUrl = `#icon-${props.name}`;
const iconStyle = computed(() => {
return {
height: `${props.size}px`,
width: `${props.size}px`,
};
})
</script>
<style scoped>
</style>
main.ts中将SvgIcon注册为全局组件
import 'virtual:svg-icons-register';
import SvgIcon from "@/components/SvgIcon.vue";
const app = createApp(App)
app.component("SvgIcon", SvgIcon);
页面中使用SvgIcon
// template中
<SvgIcon name="ic_money" size="20" color="#fbd95d"></SvgIcon>
// js中 导入组件
import SvgIcon from '@/components/SvgIcon.vue'