svg sprite 封裝

vue 腳手架封裝svgIcon

明確目標：

將.svg檔案放入src 下的目標資料夾，能自動引入svg symbol。
註冊全域性元件svg-icon ，使用方式以icon-class 類目進入使用。。
svg path 內容壓縮。

目標實現:

安裝依賴 & src 下新增icons 目錄，將用到的.svg 都放入svg 資料夾下

npm install --save-dev  svg-sprite-loader
npm install --save-dev svgo
複製程式碼

webpack rules 那裡新增對 .svg 的處理（symbolId 是必須的，用於元件裡svg的選擇 id="icon-name")

      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [resolve('src/icons')],
        options: {
          symbolId: 'icon-[name]'
        }
      },
複製程式碼

webpack 實現檔案自動匯入

require.context("./test", false, /.test.js$/);
這行程式碼就會去 test 資料夾（不包含子目錄）下面的找所有檔名以 .test.js 結尾的檔案能被 require 的檔案。
更直白的說就是 我們可以通過正則匹配引入相應的檔案模組。
// require.context 可以動態引入檔案
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
複製程式碼

svg-icon 元件實現 (components 目錄下)

<template>
  <svg 
    :class="svgClass" 
    aria-hidden="true" 
    v-on="$listeners">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
// 語義化的隱藏 aria-hidden="true"
// xlink:href = id  id 是通過base.conf 配置的  options: { symbolId: 'icon-[name]' }
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>


複製程式碼

全域性注入(在main.js import '@/icons' )： icons/index.js 內容如下：

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

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

// require.context 可以動態引入檔案
// 我們可以通過正則匹配引入相應的檔案模組
const requireAll = requireContext => requireContext.keys().map(requireContext)
// webpack 會建立一個 require.context，通過正則匹配到可能的檔案，全部引入
// 否則需單個引入   import '@/src/icons/qq.svg; //引入圖示
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
複製程式碼

利用svgo對svg內容進行壓縮

// 在package.json scripts上加入svgo
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
複製程式碼

參照連結

未來必熱：SVG Sprite技術介紹

使用require.context

手摸手，帶你優雅的使用 icon

svg sprite 封裝

vue 腳手架封裝svgIcon

相關文章