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

忘是亡心i 2023-06-30 02:20 15阅读 0赞

# 1. 前言 #

--------------------

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

# 2. 源码 #

--------------------

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

v1.4.2 标签地址：[https://github.com/intomylife/osc-front/releases/tag/v1.4.2][https_github.com_intomylife_osc-front_releases_tag_v1.4.2]

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

**注：对于标签的说明[「初学者商城」- 写在最前面 \#5.1][- _ _5.1]**

# 3. 后台 #

--------------------

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

## 3.1 下载矢量图 ##

### 3.1.1 添加图标 ###

**注：Iconfont-阿里巴巴矢量图标库：[https://www.iconfont.cn/][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'

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

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

1.  `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>

1.  在`main.js`中注册组件

// svg组件
    import SvgIcon from '@/components/SvgIcon'
    
    // register globally
    Vue.component('svg-icon', SvgIcon)

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

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

1.  引入`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)

1.  分开单独下载的`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
    ...

1.  最后需要在`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

[https_github.com_intomylife_osc-front]: https://github.com/intomylife/osc-front
[https_github.com_intomylife_osc-front_releases_tag_v1.4.2]: https://github.com/intomylife/osc-front/releases/tag/v1.4.2
[zip]: https://github.com/intomylife/osc-front/archive/v1.4.2.zip
[tar.gz]: https://github.com/intomylife/osc-front/archive/v1.4.2.tar.gz
[- _ _5.1]: https://intomylife.blog.csdn.net/article/details/103745935
[icon]: https://github.com/intomylife/osc-front/commit/095b291a2ac14414af570a5fc368e0f2a4f9efdc
[https_www.iconfont.cn]: https://www.iconfont.cn/