如何将vue项目成功引入并使用svg图标？

本文共计596个文字，预计阅读时间需要3分钟。

目录

1.安装svg依赖

2.创建svg文件存储文件夹，存放svg图标

3.在vue.config.js中配置svg图片

4.创建index.js，导入所有svg图标

5.在main.js中引入icons/index.js

6.创建SvgIcon公用组件

总结

1.安装svg依赖，确保在vue项目中优先配置

目录

• 1. 安装svg依赖
• 2. 创建svg文件夹存放svg图标
• 3. vue.config.js 中配置svg图片
• 4. 创建index.js 导入所有svg图标
• 5. main.js中引入icons/index.js
• 6. 创建SvgIcon公用组件
• 总结

1. 安装svg依赖

在vue中首先需要安装可以加载svg的依赖。

npm安装：npm install svg-sprite-loader --save-dev

2. 创建svg文件夹存放svg图标

创建icons文件夹，在icons文件夹下创建svg文件夹存放本地svg图标。