vue项目中如何使用svg图片，超级简单粗暴的方法！（我的是vue-cli 3.0，亲测有效）

66 阅读 0 评论 44 点赞

我是靠谱客的博主灵巧帅哥，最近开发中收集的这篇文章主要介绍vue项目中如何使用svg图片，超级简单粗暴的方法！（我的是vue-cli 3.0，亲测有效），觉得挺不错的，现在分享给大家，希望可以做个参考。

1.安装插件

npm i vue-svg-icon -D

2.在main.js文件中，引入

import Vue from from 'vue'
import Icon from 'vue-svg-icon/Icon.vue' //引入svg插件
 
Vue.component('icon', Icon) //注册svg插件

3.将svg文件放到 src/svg 目录下（此目录暂时不能设置）

4.在对应需要用到svg的组件中，直接使用（name属性的值为svg文件的文件名）

<icon name="example"></icon>

注意：svg图片最好是自己做的，或是从阿里巴巴库下载的，才会生效！比如我之前直接从蓝湖上下载svg图片，是不生效的！

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。