技術標籤：javascriptvuesvgiconsjs

學習筆記

今天一口氣看了很多大佬關於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簡介和初體驗