Vue项目入门教程5-Svg图标

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

简介

项目中的小图标可以使用图片、unicode、font-class、symbol等
阿里巴巴iconfont可以生成字体图标。还是比较麻烦，用某个标签的时候需要去找对应的类名等

这里选择用svg-sprite-loader加载图标
此项目中使用svg，将各个svg文件命名好，放在src/icons/svg目录下

使用svg

• 安装svg-sprite-loader：npm i svg-sprite-loader --save-dev

• 在src/icons/目录下新建svg目录，用来放置svg图标文件

• 在src/components/目录下新建目录svgIcon

• 在src/components/svgIcon目录下新建文件index.vue

<template>
  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
    <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>

• 在src/icons/目录下新建文件index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件

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

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

• 在src/main.js文件中引入

// icons
import './icons'

• 修改build/webpack.base.conf.js文件，让src/icons目录下面的svg文件使用svg-sprite-loader打包，其他的目录下的svg文件还是使用原来的loader

{
  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]')
  }
}

• 组件中

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

备注：article为图标文件的文件名

其他

一般设计师等给的svg文件，里面会包含一些注释等无用的信息

可以使用svgo压缩

• 安装svgo：npm i svgo --save-dev

• 在src/icons/目录下添加配置文件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'

• package.json文件中配置命令："svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"

• 执行命令进行压缩npm run svgo