概述

将所有svg都放进数组内，然后进行js文件引用，进行循环

创建js文件

//svg-icons.js
const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys()

const re = /\.\/(.*)\.svg/

const svgIcons = requireAll(req).map(i => {
  console.log('i.match(re)[1]:', i.match(re)[1])
  return i.match(re)[1]
})

export default svgIcons

在需要循环svg的文件进行引入并使用

div v-for="item of svgIcons" :key="item">
    <div class="icon-item">
        <svg-icon :icon-class="item" />
</div>

import svgIcons from '../../../views/components/icons/svg-icons'
data() {
           return {
               svgIcons: svgIcons,
      }}           
                

注意

一定要在data中进行定义，否则，会不显示。还会报错