安装插件
1.在vue3.x中安装createSvgIconsPlugin插件
2.在vite.config.ts中使用
// 2.1引用
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 2.2 使用插件
export default defineConfig(({ command }) => {
const prodMock = true
return {
plugins: [
vue(),
// 把src/icons 下的所有svg 自动加载到body下,供组件使用
createSvgIconsPlugin({
// 绑定需要存放的图标文件夹
iconDirs: [resolve(process.cwd(), 'src/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]',
}),
}
})
[注意:插件绑定了放置icon的文件路径]
创建svg组件
在components文件夹下面创建svgIcon文件夹,里面包含SvgIcon.vue和index.ts
// SvgIcon.vue
<template>
<svg aria-hidden="true" :class="svgClass">
<use :href="symbolId" :fill="color" />
</svg>
</template>
<script lang="ts" name="SvgIcon" setup>
import { computed } from 'vue'
const props = defineProps({
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
color: {
type: String,
default: '',
},
className: {
type: String,
default: '',
},
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`
}
return 'svg-icon'
})
</script>
<style scoped>
.svg-icon {
width: 40px;
height: 40px;
}
</style>
// index.ts
import type { App } from 'vue'
import SvgIcon from './SvgIcon.vue'
import 'virtual:svg-icons-register'
const svgIconPlugin = {
install(app: App): void {
// 全局挂载
app.component('svg-icon', SvgIcon)
},
}
export default svgIconPlugin
全局注册
// svg封装插件
import svgIcon from '@/components/svgIcon'
const app = createApp(App)
app.use(router).use(pinia).use(ElementPlus).use(svgIcon)
在页面使用
<svg-icon name="user" color="#fff"></svg-icon>
// name="user"中的user是下载来的svg图