vue3中使用svg图标

目录

1.下载vite-plugin-svg-icons

2.在src/assets下创建icons文件，里面是svg图标

3.在vit.config.ts中引入vite-plugin-svg-icons

4.在src/components下创建icon文件夹，创建svgIcon.vue文件

5.在src/components下创建index.ts文件，引入svgIcon.vue文件

 6.在main.ts中引入components/index.ts文件，同时引入virtual:svg-icons-registervirtual:svg-icons-register作用是处理和注册svg图标

7.现在就可以在页面直接使用svg图标  name为svg图标名称

1.下载vite-plugin-svg-icons

npm install vite-plugin-svg-icons

2.在src/assets下创建icons文件，里面是svg图标

3.在vit.config.ts中引入vite-plugin-svg-icons

import { fileURLToPath, URL } from \'node:url\'import { defineConfig, loadEnv } from \'vite\'import vue from \'@vitejs/plugin-vue\'//引入import { createSvgIconsPlugin } from \'vite-plugin-svg-icons\'//引入import path from \'path\'import packageJSON from \'./package.json\'export default defineConfig(({ mode }) => { // 加载当前模式下的环境变量 const env = loadEnv(mode, process.cwd()) return { plugins: [ vue(), //导入 createSvgIconsPlugin({ // 指定 SVG 图标目录（绝对路径） iconDirs: [path.resolve(process.cwd(), \'src/assets/icons\')], // 指定 symbolId 格式 symbolId: \'icon-[dir]-[name]\', // 自定义插入位置（可选） inject: \'body-last\' }) ], resolve: { alias: { \'@\': fileURLToPath(new URL(\'./src\', import.meta.url)) } }, build: { target: \'esnext\' // 支持顶级await }, server: { host: \'0.0.0.0\', // 或者指定一个具体的IP地址 proxy: env.VITE_PROXY_ENABLED === \'true\' ? { // 动态代理规则 [env.VITE_API1_BASE]: { target: env.VITE_API1_TARGET, changeOrigin: true, rewrite: path => path.replace(new RegExp(`^${env.VITE_API1_BASE}`), \'\') }, [env.VITE_API2_BASE]: { target: env.VITE_API2_TARGET, changeOrigin: true, rewrite: path => path.replace(new RegExp(`^${env.VITE_API2_BASE}`), \'\') }, [env.VITE_API3_BASE]: { target: env.VITE_API3_TARGET, changeOrigin: true, rewrite: path => path.replace(new RegExp(`^${env.VITE_API3_BASE}`), \'\') }, [env.VITE_API4_BASE]: { target: env.VITE_API4_TARGET, changeOrigin: true, rewrite: path => path.replace(new RegExp(`^${env.VITE_API4_BASE}`), \'\') }, [env.VITE_API5_BASE]: { target: env.VITE_API5_TARGET, changeOrigin: true, rewrite: path => path.replace(new RegExp(`^${env.VITE_API5_BASE}`), \'\') }, } : undefined, // 测试环境不启用代理 } }})

4.在src/components下创建icon文件夹，创建svgIcon.vue文件

 
    
 defineProps({ //xlink:href属性值的前缀 prefix: { type: String, default: \'#icon-\' }, //svg矢量图的名字 name: String, //svg图标的颜色 color: { type: String, default: \"\" }, //svg宽度 width: { type: String, default: \'24px\' }, //svg高度 height: { type: String, default: \'24px\' } })

5.在src/components下创建index.ts文件，引入svgIcon.vue文件

import SvgIcon from \'./icon/svgIcon.vue\';import type { App, Component } from \'vue\';const components: { [name: string]: Component } = { SvgIcon };export default { install(app: App) { Object.keys(components).forEach((key: string) => { app.component(key, components[key]); }) }}

 6.在main.ts中引入components/index.ts文件，同时引入virtual:svg-icons-register
virtual:svg-icons-register作用是处理和注册svg图标

import \'./assets/main.css\'import { createApp } from \'vue\'// import { createPinia } from \'pinia\'import ElementPlus from \'element-plus\'import \'element-plus/dist/index.css\'import * as ElementPlusIconsVue from \'@element-plus/icons-vue\'import zhCn from \'element-plus/es/locale/lang/zh-cn\'import App from \'./App.vue\'import router from \'./router\'import \'@wooorm/starry-night/style/tritanopia-dark\'import \"virtual:svg-icons-register\";//引入组件import gloablComponent from \"./components/index\";import {createPinia} from \'pinia\';const pinia = createPinia();const app = createApp(App)app.use(ElementPlus,{locale: zhCn}) app.use(gloablComponent);// app.use(createPinia())app.use(router)app.use(pinia)app.mount(\'#app\')for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component)}

7.现在就可以在页面直接使用svg图标  name为svg图标名称