如何在vue中优雅的使用svg

1. svg-sprite-loader

安装loader处理svg文件

2. 在src中新建文件夹icons

icons/svg 存放svg图标
icons/index.js 全局注册svg组件，导入所有svg图标

 requireContext.keys().map(requireContext)requireAll(req)

3. 创建svg组件

4. 在vue.config.js中使用loader

首先找到原有的svg规则，将src/icons文件夹排除（exclude），添加一个新的规则icons，让其规则包含（include）src/icons文件夹，并使用svg-sprite-loader处理这些文件，会给这些文件生成一个 icon-[name]唯一标识，name为svg文件名

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

6. 在页面中使用组件

直接使用svg文件名作为iconClass
更多文章关注：辰漪博客