VueCli3.0 使用svg图标

svg 是一个真正的矢量

不管你再怎么的放缩它都不会失真模糊，而且svg可以控制的属性也更加的丰富，也能做出更加生动和复杂的图标。现在ui设计师平时都喜欢使用 sketch 来工作，只要轻松一键就能导出 svg 了，所以 svg 也更受设计师的青睐。

正好今年跟大家沟通的过程中，也了解到Android P状态栏已经使用了此种方式。所以后续UI设计师是不是可以使用sketch导出UI布局的同时，也将矢量的一些切图可以释放过来呢？

svg-icon 使用形式慢慢成为主流和推荐的方法。因为有如下优点：

支持多色图标了，不再受单色限制。
支持像字体那样通过font-size,color来调整样式。
支持 ie9+
可利用CSS实现动画。
减少HTTP请求。
矢量，缩放不失真
可以很精细的控制SVG图标的每一部分

使用 svg-sprite

接下来我们就要自己来制作 svg-sprite 了。这里要使用到 svg-sprite-loader 这个神器了，它是一个 webpack loader ，可以将多个 svg 打包成 svg-sprite 。

在VueCli2.0的时代，有的使用的是url-loader来fix此问题。

code示例如下：

//webpack.base.conf.js
module.exports = {
 ...
  module: {
    rules: [
      ...
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      ...
    ]
  },
  ...
}

当然从官网最新安装的都是Vue-Cli3.0了，这个示例代码如下：

// vue.config.js
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
...
  chainWebpack: config => {
    // 一个规则里的 基础Loader
    // svg是个基础loader
    const svgRule = config.module.rule('svg')

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    }
...
}

使用指令 vue-cli-service inspect可以检查上面配置生成的到webpack对应的配置，如下：

      /* config.module.rule('svg') */
      {
        test: /\.(svg)(\?.*)?$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              symbolId: 'icon-[name]'
            }
          }
        ]
      }

使用代码如下：

// index.vue
<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
      <h3 class="title">登录页面</h3>
      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        ...
</template>

user图片是这个样子：

image.png

切图出来了，效果是这样：

image.png

这篇教程针对Vue-Cli2讲解的不错，怎样使用在这里有详细的说明：
【手摸手，带你优雅的使用 icon】https://juejin.im/post/59bb864b5188257e7a427c09#heading-4

后话

vue-cli2默认情况下会使用 url-loader 对svg进行处理，会将它放在/img 目录下，所以这时候我们引入svg-sprite-loader 会引发一些冲突。
解决方案有两种，最简单的就是你可以将 test 的 svg 去掉，这样就不会对svg做处理了，当然这样做是很不友善的。

你不能保证你所有的 svg 都是用来当做 icon的，有些真的可能只是用来当做图片资源的。

不能确保你使用的一些第三方类库会使用到 svg。

所以最安全合理的做法是使用 webpack 的 exclude 和 include ，让svg-sprite-loader只处理你指定文件夹下面的 svg，url-loaer只处理除此文件夹之外的所以 svg，这样就完美解决了之前冲突的问题。

参考网址：
//www.greatytc.com/p/6f8a8568e33a?utm_source=oschina-app

最后编辑于：2019.01.19 23:12:29