Vue3.js中使用svg：vite-plugin-svg-icons

Vue3.js中使用svg：vite-plugin-svg-icons

本文使用 vue3.js提供的 option-api方式实现

环境

$ node -vv16.14.0$ pnpm -v7.4.1

安装依赖

pnpm

package.json

{ "dependencies": { "vue": "^3.2.37" }, "devDependencies": { "@vitejs/plugin-vue": "^3.0.0", "fast-glob": "^3.2.11", "vite": "^3.0.0", "vite-plugin-svg-icons": "^2.0.1" }}

配置文件 vite.config.js

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'export default defineConfig({ plugins: [ vue(), // 使用svg-icon createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), 'src/assets/svg/icons')], // 指定symbolId格式 symbolId: 'icon-[name]', }), ], resolve: { alias: { '@': path.resolve(__dirname, './src') } }})

src/assets/svg/SvgIcon.vue

src/main.js

import { createApp } from 'vue'// 引入注册脚本import 'virtual:svg-icons-register'import SvgIcon from './assets/svg/SvgIcon.vue'const app = createApp(App)app.component('svg-icon', SvgIcon)app.mount('#app')

使用

目录结构

src/assets/svg SvgIcon.vue /icons

将svg图标文件放在icons目录下即可

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。