Vue3.js中使用svg:vite-plugin-svg-icons
【摘要】
本文使用 vue3.js提供的 option-api方式实现
环境
$ node -v
v16.14.0
$ pnpm -v
7.4.1
12345
安装依赖
pnpm i -D vite-pl...
本文使用 vue3.js提供的 option-api方式实现
环境
$ node -v
v16.14.0
$ pnpm -v
7.4.1
- 1
- 2
- 3
- 4
- 5
安装依赖
pnpm i -D vite-plugin-svg-icons fast-glob
- 1
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"
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
配置文件 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')
}
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
src/assets/svg/SvgIcon.vue
<template>
<svg
class="svg-icon"
aria-hidden="true"
>
<use
:xlink:href="symbolId"
rel="external nofollow"
/>
</svg>
</template>
<script>
// svg 组件
export default {
name: 'svg-icon',
props: {
name: {
type: String,
required: true,
},
},
computed: {
symbolId() {
return `#icon-${this.name}`
},
},
}
</script>
<style lang="less">
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
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')
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
使用
<svg-icon name="person" />
- 1
目录结构
src/assets/svg
SvgIcon.vue
/icons
- 1
- 2
- 3
将svg图标文件放在icons目录下即可
文章来源: pengshiyu.blog.csdn.net,作者:彭世瑜,版权归原作者所有,如需转载,请联系作者。
原文链接:pengshiyu.blog.csdn.net/article/details/126097080
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)