vue 使用require.context显示文件夹下所有的svg-icon图标

前言

近日因开发的项目变得越来越大，导致项目使用的svg-icon越来越多，所以想要制作一个页面来显示目前引入的所有svg-icon，方便查找与使用。
不过在网上搜索了一下，发现并没有人提出或者解决这个问题，因此自己动动手解决了这个问题，在这里把这个解决方法记录一下：

至于如何引入svg-icon并且使用，我就不多费口舌介绍。
有疑问可以参考这个文章：优雅使用 icon svg 图标

正文

只要在计算属性computed里输出icons数组，通过require.context().keys(); 返回文件夹下所有的icons图标即可：

computed: {
    icons(){
      try{
        //获取所有icons文件数据
        let data = require.context('@/icons/svg', false, /\.svg$/).keys();
        for(let i in data){
          //遍历替换全部 ./ 和 .svg 为空
          data[i] = data[i].replace(/\.\//g, '').replace(/\.svg/g, '');
        }
        //返回处理过的数据，再展示出来即可
        return data;
      }catch(e){
        return []
      }
    }
  }

完整代码

最终效果图

效果图

附：
require.context 接收以下三种参数
directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
regExp {RegExp} -匹配文件的正则