vue项目中自动导入svg并愉快的使用方式【vue教程】

目录

• 引入图标的几种方式
• 远古时代
• iconfont时代
• svg时代
• 处理loader，对指定目录svg文件处理
• 安装loader
• 配置vue.config.js
• 接下来使用vue inspect看下目前的配置
• 编写一个自定义组件
• 编写一个js，实现svg自动化
• 至此就可以愉快的使用svg了
• 压缩优化

npm i svg-sprite-loader -D

vue inspect --rule svg

const path = require("path");
// 引入path模块
const resolve = dir => path.join(__dirname, dir);

module.exports = {
  ...,
  // 配置路径别名
  chainWebpack: cOnfig=> {
    // vue inspect --rule svg  // 使用以上指令，可以获取vue配置的loader规则
    // svg loader 取消src/icons目录下的处理
    config.module.rule("svg").exclude.add(resolve("src/icons"));
    // 添加自定义loader规则 icons，只处理src/icons目录
    config.module
      .rule("icons")
      .test(/.svg$/)
      .include.add(resolve("src/icons")) // 上下文变化
      .end() // 返回上下文
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({ symbolId: "icon-[name]" });
  },
  ...
};

/* 以下是我们修改后的svg loader规则 */
/* config.module.rule("svg") */
{
  test: /.(svg)(?.*)?$/,
  exclude: [
    "/Users/{UserName}/project/src/icons" /* 这个是不包含的目录 */
  ],
  use: [
    /* config.module.rule("svg").use("file-loader") */
    {
      loader: "/Users/{UserName}/project/node_modules/file-loader/dist/cjs.js",
      options: {
        name: "img/[name].[hash:8].[ext]"
      }
    }
  ]
}

// 以下是我们添加的icons loader规则
/* config.module.rule("icons") */
{
  test: /.svg$/,
  include: [
    "/Users/{UserName}/project/src/icons" /* 这个是包含的目录 */
  ],
  use: [
    /* config.module.rule("icons").use("svg-sprite-loader") */
    {
      loader: "svg-sprite-loader",
      options: {
        symbolId: "icon-[name]"
      }
    }
  ]
}

import Vue from "vue";
import SvgIcon from "@/components/SvgIcon.vue";
const isEnv = process.env.NODE_ENV === "development";
// 自动加载 icons 目录下的所有svg
const req = require.context("./svg", true, /.svg$/);
const svgNameSet = new Set();
req.keys().map(url => {
  const pathSplit = url.split("/");
  const fileName = pathSplit[pathSplit.length - 1];
  isEnv && console.log(fileName);
  if (svgNameSet.has(fileName)) {
    isEnv && console.error("图标名称重复，请检查");
  } else {
    svgNameSet.add(fileName);
    return req(url); // 可以用于异步require
  }
});

// 全局注册SvgIcon.vue组件
Vue.component("svg-icon", SvgIcon);

// install
npm i svgo-loader -D

// vue.config.js
// 接上面svg的配置
...
.end()
.use("svgo-loader")
.loader("svgo-loader")
.end()