「初学者商城」- 后台 - icon 矢量图（新功能）

1. 前言

---

项目中的精致小图一般都是使用的矢量图，矢量图比位图的优势在于：小，不失真，轻松改变颜色和大小等。

2. 源码

---

完整项目地址：https://github.com/intomylife/osc-front

v1.4.2 标签地址：https://github.com/intomylife/osc-front/releases/tag/v1.4.2

v1.4.2 下载地址：zip，tar.gz

注：对于标签的说明「初学者商城」- 写在最前面 #5.1

3. 后台

---

注：查看更改内容：icon 矢量图

3.1 下载矢量图

3.1.1 添加图标

注：Iconfont-阿里巴巴矢量图标库：https://www.iconfont.cn/

1. 在图标库中选择或者直接根据关键字搜索图标
2. 把合适的矢量图放到购物车中
3. 图标都选择好并添加到购物车后再添加至项目
4. 在图标管理我的项目中就可以看到刚刚添加的图标了

3.1.2 图标三种类型

Unicode与Font class用法很类似，都需要先引入图标库，然后根据特定的字符串如（Unicode）/icon-gouwuche（Font class）来显示对应的图标，可以看出Font class是在Unicode的基础上进一步封装而成的。

Symbol则比Font class更加深入人心，图标是静态方式引入，并且还支持多种颜色。下面都是以Symbol方式使用矢量图。

3.2 最简单的方式使用矢量图

1. 还是在图标管理我的项目页面，点击下载至本地
2. 下载完成后解压，需要关注的文件是iconfont.js
3. 把iconfont.js文件拷贝到项目的@/src/assets/目录下
4. 打开HelloWorld.vue
5. 在script中引入刚刚拷贝的iconfont.js文件

import '@/assets/iconfont'

6. 在页面中使用，icon-gouwuche更改为你自己添加的图标名称代码

<!-- 矢量图 -->
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-gouwuche" />
</svg>

7. npm run dev启动项目，访问http://localhost:9527，显示图标

3.3 封装组件

注：vue的核心思想之一：组件化

1. vue的组件都是放在了统一的地方：@/src/components/目录
2. 封装过程非常简单，显示矢量图的方式都是一样的，就是xlink:href的值不一样，所以只需要动态的传入图标名称就可以

<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>

3. 在main.js中注册组件

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

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

4. 在页面中使用，比上面的写法精简很多了

<!-- 矢量图 -->
<svg-icon icon-class="gouwuche" />

3.4 分开引入 svg

痛点： 虽然iconfont.js文件是静态引入，但是每次增改图标都得替换整个iconfont.js文件，更可怕的是，如果前同事离职，你接手了这个项目而且还没加入到图标库的成员中，那将会非常难受。

分开引入svg解决了什么： 首先自己增改图标变得容易，因为需要哪个图标就只引入哪个图标，每个图标文件是单独存在的。其次，当另一个人接手项目时，也是同样的方便，之前开发时添加的图标很容易维护。

分开引入svg又有哪些新的问题： ① 前面使用的iconfont.js文件虽然有种种不便，但是拿来就可以直接使用里面的图标，因为iconfont.js文件已经生成了svg-sprite；而分开引入的svg则需要svg-sprite-loader插件帮我们生成svg-sprite。 ② 前面使用的iconfont.js文件引入一次就可以使用全部的图标；而分开的svg则需要每个都单独引入一次。

如何下载分开的svg： 在图标管理我的项目页面，鼠标悬浮到图标上方，点击下载图标按钮；然后再点击SVG 下载按钮。

3.4.1 svg-sprite-loader

1. svg-sprite-loader是webpack工具
2. 主要用svg-sprite-loader把分开引入的svg打包成svg-sprite
3. webpack中原本就有url-loader来处理svg，所以现在指定svg-sprite-loader来处理svg的同时还要在url-loader中排除svg的处理，当然不是全部，只是分开引入svg的目录

webpack.base.conf.js：

...
      {
        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.4.2 自动引入

使用require.context正则匹配批量的方式直接引入所有svg

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

3.5 整体结构

1. #3.3中封装的组件放在了@/src/components/SvgIcon目录中

.
├── src
...
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── SvgIcon
│   │       └── index.vue
...

2. 引入svg组件，正则匹配批量引入svg操作都写在了一个js文件中

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

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

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

3. 分开单独下载的svg放在了@/src/icons/svg目录中，对应#3.4.1中使用svg-sprite-loader处理svg时指定的目录include: [resolve('src/icons')]，同样也是url-loader排除的目录exclude: [resolve('src/icons')]

.
├── src
...
│   ├── icons
│   │   ├── index.js
│   │   └── svg
│   │       ├── gouwuche.svg
│   │       └── wuliuche.svg
...

4. 最后需要在main.js中引入

// icon
import '@/icons'

3.6 其它

1. 版本号的升级

4. 验证

---

4.1 后台

1. 下载v1.4.2标签的代码或者对照本篇博客更改v1.4.1标签的代码
2. 在vsCode中打开终端（快捷键：ctrl+~）
3. 如果是在v1.4.1基础上做更改，还需安装svg-sprite-loader依赖npm install svg-sprite-loader --save-dev
4. 如果是下载的v1.4.2标签的代码，则先安装依赖npm install
5. 输入npm run dev，回车
6. 启动成功后，访问http://localhost:9527
7. 显示图标，表示成功

5. 结语

---

正确的使用矢量图，为项目添彩。阿，快乐。

希望能够帮助到你

over