1. 先去阿里巴巴图标库,找到我的项目 

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

 

2. 新建项目

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

 

 3. 可以上传UI制作的svg图标; 或自己去挑选图标

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

去挑选别人的图标

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

打开仓库,添加至项目

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

添加到你的项目中

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

4. 进入我的项目,下载项目到本地

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

5  解压文件,打开其中的demo_index.html

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

6. 三种添加方式,这里选择第三种:可以改变图标的大小和颜色

 

 

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

 

 7. 项目中引用

  1. 添加js到你的项目中,在app.vue中配置

  超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

  2. css配置

  超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

  3. vue中使用

  超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

 

8 结束,预览效果

超简单 超详细 vue项目中使用svg图标 阿里巴巴图标库

 

相关文章:

  • 2021-06-10
  • 2021-10-08
  • 2021-10-31
  • 2021-11-26
  • 2021-12-01
  • 2022-01-01
  • 2021-11-09
  • 2022-12-23
猜你喜欢
  • 2021-11-28
  • 2021-10-01
  • 2022-01-01
  • 2021-11-03
  • 2021-09-28
  • 2021-12-13
  • 2021-10-17
相关资源
相似解决方案