<template>
<svg aria-hidden="true" :style="{ width: size + 'px', height: size + 'px' }">
<use :xlink:href="symbolId" :fill="color" />
</svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
iconName: {
type: String,
required: true
},
color: {
type: String,
default: ''
},
size: {
type: [Number, String],
default: 20
}
})
const symbolId = computed(() => `#icon-${props.iconName}`);
</script>
<style scoped>
.svg-icon {
fill: currentColor;
vertical-align: middle;
}
</style>
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path, { resolve } from 'path'
//图标
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
createSvgIconsPlugin({
iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
symbolId: 'icon-[dir]-[name]',
}),
],
//scss全局变量一个配置
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [],
},
},
//配置跨域
server: {
port: 8080, //默认启动端口号
// open:true ,//自动打开浏览器
cors: true, //允许跨域
},
//
resolve: {
alias: {
'@': path.resolve('./src'), // 相对路径别名配置,使用 @ 代替 src
},
},
})
--封装svg图标 ---需要的插件
pnpm i vite-plugin-svg-icons
pnpm i fast-glob
main.js引入