在 vue-cli3 中使用 SVG

为了项目管理, 把SVG图标资源放在项目中引用, 如果不想放项目中, 使用阿里云的图标方案就可以了. svg-sprite-loader合并svg图标资源,svgo-loader 优化svg资源

依赖包

yarn add svg-sprite-loader svgo-loader -D

// vue.config.js
const path = require("path");
const resolve = (dir) => path.join(__dirname, dir)

 // 链式配置webpack,config相当于webpackConfig导出的对象
   chainWebpack(config) {
    // 1. 修改当前项目默认的svg配置，排除我们刚设的 svg 目录 (注意路径)
    config.module.rule("svg").exclude.add(resolve("/app/view/src/svg"));

    // 2. 新增一个rule, 使用svg-sprite-loader来添加icon里面的svg
    config.module
      .rule("icons") // icons是自定义的名称
      .test(/\.svg$/)
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader") // 这里不是笔误，就是use和loader都要写
      .options({
        // 引入svg 资源
        include: [resolve("/app/view/src/svg")],
        // 要制定下图标id，[name] 就是读到的 (svg文件名)
        // eg: a.svg => icon-a
        symbolId: "icon-[name]",
      })
      .end()
      // 优化svg
      .use("svgo-loader")
      .loader("svgo-loader")
      .options({
        plugins: [
          {
            // 删除svg中fill
            name: "removeAttrs",
            params: {
              attrs: "fill",
            },
          },
          {
            // 删除xmlns属性（对于内联svg，默认情况下禁用）
            name: "removeXMLNS",
            params: true,
          },
          {
            // 将css样式转换为svg元素属性
            name: "convertStyleToAttrs",
            params: true,
          },
          // svg-loader 3.0以下使用的语法, 上面是3.0以上的语法,具体看官网api为准
          // { removeXMLNS: true },
          // { convertStyleToAttrs: true },
          // { removeAttrs: { attrs: "fill" } },
        ],
      })
      .end();

  }

项目中引入图标

// 位于 svg 目录下
// webpack创建一个以svg目录为上下文的require函数
const svgFiles = require.context('./', false, /\.svg$/)
// keys会获取所有的svg文件
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(svgFiles)
// 相当于执行
// import '@/svg/strawberry.svg'

然后在main.js 引入

// main.js
import '@/svg/'

后面就可以使用了, 自己封装一个 svg 组件引入会更加方便哦

<svg>
  <use xlink:href="#icon-a_1"></use>
</svg>

yyman001 / blog

在 vue-cli3 中使用 SVG #101

参考资料