编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

Vue-cli 3 使用SVG 的简单步骤(vue如何使用svg)

wxchong 2024-07-19 05:41:34 开源技术 13 ℃ 0 评论

1.在对应vue项目里添加插件

vue add svg-sprite

2.再执行:

npm install svgo svgo-loader --save-dev

然后你就会看到新增的根目录文件vue.config.js和src/components/SvgIcon.vue,如图:

3.在main.js里注册SvgIcon组件

//引入svg组件
import SvgIcon from '@/components/SvgIcon.vue' 
//全局注册icon-svg
Vue.component('SvgIcon', SvgIcon)

4.再在assets下创建icons文件夹,将所有的svg图标放进去,name就是svg的名字,例如

<svg-icon name="aperture"></svg-icon>

好了,这样我们就可以愉快的使用SVG了。

最后,如果项目不能成功显示SVG,可以尝试重新打开一次。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表