vue svg sprite loader_在Vue中使用icon、svg

第一步

安装 svg-sprite-loader

yarn 安装

yarn add svg-sprite-loader  -D

npm 安装

npm install svg-sprite-loader -D

第二步

在你使用的Vue中找到一个 vue.config.js 文件，如果没有就创建。

虽然官方文档说的是在webpack开头的文件中操作，但是我们在Vue中没有，所以我们就要将Vue-cli的内容翻译成svg-sprite-loader文档的内容

第三步

在 vue.config.js 中 写如下代码

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()              //只包含dir中icons 这个目录
      .use("svg-sprite-loader")    //选择使用的loader
      .loader("svg-sprite-loader")  //确定使用这个loader
      .options({ extract: false })   // 添加选项
      .end()
      .use("svgo-loader")
      .loader("svgo-loader")
      .tap(options => ({
        ...options,
        plugins: [{ removeAttrs: { attrs: "fill" } }]
      }))
      .end();
    config
      .plugin("svg-sprite")
      .use(require("svg-sprite-loader/plugin"), [{ plainSprite: true }]);
    config.module.rule("svg").exclude.add(dir); // 其他 svg loader 排除 icons 目录
  }
};

讲解：其中的 src/assets/icons 这个路径就是你存放svg的目录

第四步

在 shims-vue.d.ts 文件中添加以下代码

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

再用import引入

import x from "@/assets/icons/label.svg"
import x from "@/assets/icons/money.svg"

这时候你会发现body里面有个svg标签 (console使用一下引入的图片，不然显示不了)

我们在body里面创建了一个svg标签，里面有很多个symbol每个symbol又都有一个id，这些id对应的就是我们引入的svg。

整理：这个loader 先把svg变成symbol在再外面套一个svg，然后把这个svg放到body里面。

接下在就可以在另一个svg里面使用use选择里面的图片了

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

这时候你就会发现你的svg图片出现在了页面中

到此就成功再Vue中引入了svg。

但是

这样很麻烦不是吗，一个图片就要引入一次，所以我们可以封装一下

只需要这两行代码

const importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
  requireContext.keys().forEach(requireContext);
try {
  importAll(require.context("../assets/icons", true, /.svg$/));//同样的 ../assets/icons 这是图片目录
} catch (error) {
  console.log(error);
}//try catch 是怕在单元测试中可能会遇到的问题而准备的

这样能把你文件里的svg图片全部都引入，你只需要使用use使用就可以了

同时你也可以把这些全部封装成一个Icon组件，使用时只需要给个name就能直接显示图片了 我直接上图片

这样你就能直接给个name就能加载出图片了