• 一、svg图标注册

一、svg图标注册

• 方式一：导入图标 + 全局注册图标组件

  // 1. 导入所有的svg图标
  // 2. 完成SvgIcon的全局注册
  import { App } from 'vue';
  import SvgIcon from '@/components/SvgIcon/index.vue';
  
  // 获取所有svg文件夹中的
  const svgRequire = require.context('./svg', false, /\.svg$/);
  // 此时返回了一个 Require 函数，可以接受一个 request 的参数，用于 require 的导入
  // 该函数提供了三个属性，可以通过 svgRequire.keys() 获取所有的 svg 图标
  // 遍历图标，把图标作为 request 参数传入到 svgRequire 导入函数中，完成本地的 svg 图标的导入
  svgRequire.keys().forEach((svg) => svgRequire(svg));
  
  // 以一个函数的形式向外暴露，接受app
  export default (app: App<Element>): void => {
    app.component('svg-icon', SvgIcon);
  };

• 方式二： 使用 unplugin-vue-components 插件进行导入