為什么要使用SVG

雖然我們?cè)谌粘ｉ_發(fā)的時(shí)候牙捉，在使用iview 或者element ui等組件時(shí)朗若，通常會(huì)包含一些常用icon水孩；但是在面對(duì)一些特定的需求時(shí)满葛，或者自己想high一下径簿，這些通用的icon并不能很好的滿足我們。這個(gè)時(shí)候我們可能會(huì)拿到一些SVG適量圖嘀韧，但是怎么去使用這些矢量圖呢篇亭。

項(xiàng)目目錄

這里以基于Nuxtjs的開發(fā)為例：

image.png

要使用SVG矢量圖，在這里會(huì)使用到上述匡出來的文件锄贷。

其中在asserts中放置一些圖片資源（個(gè)人習(xí)慣）如圖所示：

image

在components中放入需要?jiǎng)?chuàng)建的Icon組件, 代碼如下：

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
      }
    },
  },
}
</script>

需要注意的是這段代碼：

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

然后译蒂，我們都知道，在使用nuxt的時(shí)候谊却，我們使用任何插件的時(shí)候都需要在plugins文件夾創(chuàng)建柔昼，所以，我們?cè)谶@里創(chuàng)建icon.js文件炎辨，為了去創(chuàng)建一個(gè)全局的Icon組件岳锁，代碼如下：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue' // svg component

Vue.component('svg-icon', SvgIcon)
const req = require.context('@/assets/icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

最后一步，我們需要在nuxt的配置文件中去配置一下：

首先配置plugins：

  plugins: [ '@/plugins/icon'],

然后我們需要配置build：

 /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
      svgRule.exclude = [resolve(__dirname, 'assets/icons/svg')]

      // Includes /assets/icons/svg for svg-sprite-loader
      config.module.rules.push({
        test: /\.svg$/,
        include: [resolve(__dirname, 'assets/icons/svg')],
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]',
        },
      })
    },
  },

可以看到在loader上使用了 svg-sprite-loader組件蹦魔，所以我們需要安裝它

yarn add svg-sprite-loader 
or
 npm i svg-sprite-loader -S

現(xiàn)在我們可以使用已經(jīng)配置好的Icon組件：

<svg-icon icon-class="3" class-name="card-panel-icon" />

效果截圖

image.png