svg在vue-cli3中的配置

svg矢量图有时候在项目中用起来当然要比图片用起来好。之前没有用过svg，这次花了一点时间在项目中支持了svg的使用，个人感觉用起来还是没有直接用font class的爽，然后又改成font class的使用，如下我说一下我是如何配置svg和font class的（这两者都是iconfont 的不同使用方法）：

一. 使用svg

1. 在package.json中引入svg-sprite-loader

2. 在vue.config.js中配置webpack,代码如下：

chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }

3. 在src下边创建一个icons文件夹（里面放需要用到的svg图标）

4.再写一个全局通用的组件SvgIcon.vue

/*
svg-icon的用法：
1. http://www.iconfont.cn网站上找到自己需要的图标
2. 设置自己需要的颜色（也可以直接下载下来再设置颜色）
3. 下载svg格式放到icons文件夹下边
4. 在别的文件中引用(import 'ICONS/***.svg')
5. 使用<svg-icon :icon-class="'***'" width="18" height="18"></svg-icon>
*/
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>
 
<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
.svg-icon {
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}
</style>

5. 因为上边的这个组件是全局通用的，所以要在项目加载的第一时间把它注册到全局Vue中去，在入口文件main.js中设置

import SvgIcon from 'COMPONENTS/SvgIcon'
 
。。。
 
Vue.component('svg-icon', SvgIcon)

6. 经上边的设置后，npm install ,重新build项目之后就可以了（像上边看到的ICONS 或 COMPONENTS，都是在配置文件中添加的路径别名）

二. 设置font class的使用

1. 在http://www.iconfont.cn创建一个的项目，然后把自己设计的svg图标上传到自己的项目下边（也可以把别的项目里面的图标加到购物车，再添加到自己的项目里）

2. 拷贝项目下边生成的fontclass代码（.css代码）

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

3. 挑选相应图标并获取其类名，应用于网页：

<i class="iconfont icon-xxx"></i>