Vue--整合SVG Icon图标--方法/实例

简介

说明

        本文介绍Vue如何整合SVG图标。

前端图标的发展

从上到下是从古至今的顺序

1. 使用img实现

1. 一个页面的请求资源中图片 img 占了大部分

1. image sprite（雪碧图）

1. 将多个图片合成一个图片，然后利用 css 的 background-position 定位显示不同的 icon 图标
2. 是为了优化方案1而提出的。
3. 维护困难。每新增一个图标，都需要改动原始图片，还可能影响到前面定位好的图片。

1. font库

1. 优点：使用方便
2. 缺点：找起来不方便，定制化很差，Icon不好看

1. iconfont

1. 阿里做的
2. 图标数量多，有几百个公司的开源图标库，有各式各样的小图标，支持自定义创建图标库。

SVG的好处

        可以轻松地按比例放大和缩小图标。SVG图标是矢量图，具有优于位图图形的优点，即按比例放大或缩小时它们仍然看起来不错。而位图图形在按比例放大时趋于像素化，而在按比例缩小时会失去质量（像素）。

1.创建Vue项目

见：@vue/cli4--使用图形化界面创建项目--方法/实例_IT利刃出鞘的博客

2.安装svg-sprite-loader

npm install svg-sprite-loader -D      

3.配置svg-sprite-loader

1.新建存放svg图标的目录

在项目 src 目录下新建 src/icons/svg 目录（存放 svg 图标文件）。

2.创建svg文件的入口文件

在 src/icons 下创建 icons 目录的入口文件 index.js ，负责svg文件的加载

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon)

/**
 * require.context 的参数说明
 * './svg' 代表要查找的文件路径
 * false 代表是否查找子目录
 * /\.svg$/ 代表要匹配文件的正则
 *
 */
const svg = require.context('./svg', false, /\.svg$/)
const requireAll = (requireContext) =>
  requireContext.keys().map(requireContext)
requireAll(svg)      

3.配置vue.config.js

在vue.config.js中添加如下配置：

'use strict'

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack (config) {
    // 配置 svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}      

4.创建图标组件：SvgIcon.vue

在src/components下创建SvgIcon.vue

（或者：在src/components下创建SvgIcon文件夹，在里边创建index.vue）

内容如下：

<template>
  <svg className="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"/>
  </svg>
</template>
<style>
.svg-icon {
  width: 1.5em;
  height: 1.5em;
}
</style>
<script>
export default {
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>      

5.使用SvgIcon组件

1.全局引入icons

在 main.js 入口文件中 全局引入 icons：

import './icons'      

2.下载svg文件

        去 ​​iconfont​​ 图标网站下载个svg图标。

        将下载的 svg 图标放置到 src/icons/svg 目录下。这里我下载的是一个搜索图标。

3.在组件中引入svg图标

新建components/Parent.vue

<template>
  <div>
    <div>
      这是Parent。
    </div>
    <svg-icon icon-class="search"></svg-icon>
  </div>
</template>

<script>
export default {
  name: 'Parent'
}
</script>

<style scoped>

</style>      

修改router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from '../components/Parent'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Parent',
    component: Parent
  }
]

const router = new VueRouter({
  routes
})

export default router      

6.测试

访问：​​http://localhost:8080/#/​​

结果：

7.压缩svg图标（非必须）

        我们从iconfont下载的svg图标已经比较精简了，但里边还是有些无用信息（比如注释）。而且，如果svg图标是从设计那里拿到的，可能会不够精简，这时可以使用svgo来进行压缩。

见：SVGO--使用/实例_IT利刃出鞘的博客

其他网址

​​SVG 使用教程：如何在 Vue 中使用 SVG icon 图标系统 - 卡拉云​​