利用svg添加icon

学习笔记

今天一口气看了很多大佬关于icon的用法，unicode 和 font-class方式就不做记录了，转载一下大佬的文章
手摸手带你优雅使用，icon里面有详细的关于icon发展史及使用方法。今天主要特别记录svg+symbol方式

1.直接通过icon库引入

1.在icon-font中找到自己想要的icon图标，生成在线链接

引入iconfont.js

<script src='iconfont.js'></script>

引入icon样式，引入一次

<style>
	.icon {
     	width: 1em;
      	height: 1em;
      	vertical-align: -0.15em;
      	fill: currentColor;
     	overflow: hidden;
    }
</style>

页面中使用(svg允许使用css修改样式）

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

基础方法，缺点每次插入新的需求需要更换iconfont.js，最主要不够优雅

二.svg-sprite

svg-sprite技术就是将svg 图片，能够复用，且能够同文件跨域使用。 详情可看这位大佬的文章
未来必热：SVG Sprites技术介绍
在同文件中一个svg内部定义的 g 可以在其他svg中通过 use指明 g的id调用，通过，x y 行内样式，设置svg 展示坐标

三.优雅使用svg

创建svgIcon component

//components/Icon-svg
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

全局注册组件，页面内使用

``//引入svg组件
import IconSvg from '@/components/IconSvg'

//全局注册icon-svg
Vue.component('icon-svg', IconSvg)

//在代码中使用
<icon-svg icon-class="password" />

直接从iconfont上下载的svg 有大量的冗余代码，删除并不会影响展示，利用 svg-sprite-loader 神器生成 svg-sprite 以vue 为例

在vue.config.js中插入如下代码，用于配置loader读取指定文件下的svg文件，具体原因看第一个大佬的文章，

//这里注意路径问题,跟后面创建的文件位置有关
const path = require('path')
function resolve (dir) {
  console.log(path.join(__dirname, dir))
  return path.join(__dirname, dir)
}

module.exports = {

  chainWebpack: config=>{
     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()
  },
}

在src/icons下创建svg文件，创建index.js文件，创建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)
console.log(requireAll)
requireAll(req)

require.context 将指定文件下的指定后缀文件全部引入，具体讲解看第一位大佬文章
require.context有三个参数：

• directory：说明需要检索的目录
• useSubdirectories：是否检索子目录
• regExp: 匹配文件的正则表达式

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'

svgo.yml 主要用于手动压缩svg文件，这是当svgo为局部引入时的使用方法

在package.json 脚本命令中加入
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
上述命令中-f参数值指定了svg文件所在的目录，--config参数指定的是svgo的配置文件路径。

具体原因可以看看svg-sprite大佬的另一篇文章，SVG精简压缩工具svgo简介和初体验
这位大佬介绍了全局引入svgo 如何使用，比局部使用更加简单感兴趣可以详细阅读

组件中如何使用

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

结语：

我们都是站在巨人的肩膀上的一群人，好家伙。

特此感谢两位大佬：
掘金：花裤衩 手摸手带你优雅使用，icon
鑫空间，鑫生活： 张鑫旭
1.未来必热：SVG Sprites技术介绍
2.SVG精简压缩工具svgo简介和初体验