vue-cli項目中svg組件的使用，及svg使用原理分析

在vue-cli項目中遇到svg的使用，順便記錄下探討其使用原理的過程

• svg文件的引用

1. 首先看下本項目的svg目錄，在src/icons，svg目錄下存放各種svg文件(可以從iconfont阿里巴巴矢量圖庫獲得阿里圖庫地址)

---

 2.打開icons下的index.js如下：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg組件
import generateIconsView from '@/views/svg-icons/generateIconsView.js' // just for @/views/icons , you can delete it
// register globally
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)

const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req)

generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it

---

分析：

//獲取需要引入的文件的上下文，返回的是一個函數，理解可以參考另一位博客：關於 require.context的理解

const req = require.context('./svg', false, /\.svg$/)

我在控制檯輸出了下req:

這個函數，它擁有三個屬性：

這個function有三個屬性：resolve 、keys、id

        · resolve: 是一個函數，他返回的是被解析模塊的id

        · keys: 也是一個函數，他返回的是一個數組，該數組是由所有可能被上下文模塊解析的請求對象組成

        · id：上下文模塊的id

其中keys()函數被接下來的函數調用（我做了下輸出）：

const requireAll = requireContext => {

    console.log('2222')

    console.log(requireContext.keys())

    console.log('33333')

    console.log(requireContext.keys().map(requireContext))

    return requireContext.keys().map(requireContext)  //require進來svg文件夾下所有svg文件

}

此函數的目的就是用來把svg文件夾下邊的所有.svg文件統一用類似require(‘./svg/wechat.svg’)的方式全部引用進來；

控制檯輸出：

展開第二個輸出：

接下來就是在main.js引入，就可以在svg組件調用了

        import './icons' // icon

import SvgIcon from '@/components/SvgIcon' // svg組件，自己寫的組件用來調用svg文件，svg組件只用拿到svg文件的名稱就會生效

<svg-icon class-name="disabled" :icon-class="item" />   //item就是.svg的文件名

• svg組件的來源：

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

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  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>

以上就是組件的定義，它接收兩個參數className、iconClass：className可有可不有；iconClass實際就是.svg文件的名字。

<svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>

這段是調用svg文件的固定方式，不用糾結爲什麼這樣用（倘若想研究爲什麼，可以自己花時間摸索）

• 最後再談談項目中不用組件方式使用svg文件的好用的幾種方式

1. 作爲圖片使用<img>標籤

<img src="mySVG.svg" alt="" />

2. 作爲CSS背景圖片

.el {background-image: url(mySVG.svg);}

3.其它的iframe標籤a標籤什麼的個人覺得使用不方便

本此探索到此結束，可能不全面，僅供參考!若有需要共同探討的問題歡迎交流，謝謝!