vue嵌入svg代码_在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")    //选择使用的lo