vue优雅地使用icon,包括运行svg文件

   之前大部分 icon 是png图片，当有两种状态时就需要两种图片的替换，占用的体积也是比较大的，后来接触到了阿里iconfont，简直不能太好用，接下来就带你领略 vue 的美好！

1. 使用阿里iconfont

1. iconfont 官网上选择自己想要的图标，如果没有想要的图标，就让ui在 adobe illustrator（简称 AI）软件上绘制想要的图标，绘制前先下载 图标制作模板.AI，绘制完成后一定要存储为 svg，不要使用导出为 svg，然后在上传到 iconfont 官网 上就可以了。 参考

AI软件 上传后的图标

2. 将图标添加到购物车，点击购物车，添加至项目（方便日后项目管理），在项目目录下，点击下载至本地，就拿到字体文件了。

项目目录

3. 在 src/assets 目录下创建一个 fonts 文件夹，将解压后的 iconfont.eot、 iconfont.svg、 iconfont.ttf、 iconfont.woff 这 4 个文件放进去。

下载并解压后的字体文件 fonts 文件夹

4. 将解压后的 iconfont.css 文件放到 src/assets 目录下，并修改里面的字文件路径，主要在 url 的位置新增 ./fonts/ 。

修改后的 iconfont.css 文件

5. 在 main.js 中引入 iconfont.css，加入以下代码：

  import '@/assets/iconfont.css'

6. 在要引入图标的 .vue 文件中的相应位置写以下的代码：（注意：icon-eye 是在 iconfont.css 文件中的类名，）

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

HelloWorld.vue 效果图

2. vue项目运行 svg 文件，与上文无联系，要说有点联系的话最多也就是如何让 ui给你想要的svg 文件的做法和上文的相同

1. 安装 svg-sprite-loader 插件，运行以下命令：

  npm i svg-sprite-loader -D

2. 修改 webpack 的配置文件，在 webpack.base.conf.js 中修改如下代码：

image.png

     {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/icons')],
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

3. 在 src 目录新建一个 icons 文件夹，里面放三个内容：1)、 存放 .svg 文件的 svg文件夹 ； 2)、 全局注册组件的 index.js 文件 ；3)、svgo.yml 文件。

    // index.js  文件
    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'// svg组件

    // register globally
    Vue.component('svg-icon', SvgIcon)

    const req = require.context('./svg', false, /\.svg$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)

• svgo.yml 文件：

# replace default config

# multipass: true
# full: true

plugins:

  # - name
  #
  # or:
  # - name: false
  # - name: true
  #
  # or:
  # - name:
  #     param1: 1
  #     param2: 2

- removeAttrs:
    attrs:
      - 'fill'
      - 'fill-rule'

4. 注册 Svgicon 组件。 在 components 文件夹下新建 SvgIcon 文件夹，里面放置 index.vue 文件， 代码如下：

<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 scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

5. main.js 中引入全局注册组件的 index.js 文件，main.js中要加的代码如下：

  import '@/icons' //  全局注册组件

6. 需要使用图标的地方（.vue 文件）使用以下代码：

  <svg-icon icon-class="icon_set"/>

项目目录