vue中如何引入一个文件中的所有icon

1.下载完svg文件后，我把它放在了src/assets/icons中
2.使用import引用

import x from "@/assets/icons/labels.svg";
console.log(x);

3.此时编辑器会报错，如下图

错误.png

declare module "*.svg" {
  const content: string;
  export default content;
}

5.然后，用现在最流行的引用svg的方法：svg-sprite-loader，安装loader

yarn add svg-sprite-loader -D

6.找到vue.config.js文件，添加下面的代码

/* eslint-disable @typescript-eslint/no-var-requires */
// eslint-disable-next-line @typescript-eslint/no-var-requires
//如果你用的是vs code，有报错，并且报错的地方和下面代码中波浪线的位置一致，此时你可以添加上面两行注释，如果没有报错，就不用添加

const path = require('path')
              ~~~~~~~~~~~~~~



module.exports = {
  lintOnSave: false,
  chainWebpack: config =>{
    const dir = path.resolve(__dirname,'src/assets/icons')
    config.module
    .rule('svg-sprite')
    .test(/\.svg$/)
    .include.add(dir).end() 
    .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
      config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  config.module.rule('svg').exclude.add(dir)  
  }
}

7.此时就可以使用svg了，如下

      <svg>
        <use xlink:href="#labels" />
      </svg>

此时我们引用的是单个svg的引用，如何实现引用icons下的所有svg呢？

我们需要把svg都封装到icons组件中

1.components里面新建一个Icons.vue组件
2.我在组件中是这样写的：

<template>
  <div>
    <svg class="icon">
      <use :xlink:href="'#' + name" />    ////传过来的name必须要加#，
    </svg>
  </div>
</template>

<script lang="ts">
const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
  requireContext.keys().forEach(requireContext);
try {
  importAll(require.context("../assets/icons", true, /\.svg$/));
} catch (error) {
  console.log(error);
}
/////上面这几句代码是关键


export default {
  props: ["name"],      
  name: "Icons",
};
</script>

<style lang="scss" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;      ////iconfont的官网中的默认样式
  fill: currentColor;
  overflow: hidden;
}
</style>

3.然后在main.js中注册icons这全局组件个，
4.使用时直接<Icons name = "demo" />即可