<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 }, }, })
1. --封装svg图标 ---需要的插件 2. pnpm i vite-plugin-svg-icons 3. pnpm i fast-glob
main.js引入