Vue使用svg图片-svg-sprite-loader插件

• 需求：设计给的一个按钮图标是svg的，不是element自带的图标
• 使用插件svg-sprite-loader

svg-sprite-loader

• 什么是svg-sprite-loader？
  将多个 svg 打包成 svg-sprite。svg 雪碧图。类似于 CSS 中的 Sprite 技术。图标图形整合在 一起，实际呈现的时候准确显示特定图标。
  在 vue2 配合 webpack；svg图片不存在id冲突，在使用时无需显示引入svg图片，大大提高开发效率
• 本人环境：vue2

安装及使用

• 安装/下载依赖

  npm install svg-sprite-loader -D
  1

• svg-sprite-loader 配置：在vue.config.js中配置

  // vue.config.js文件
  
  // 导入模块
  const path = require('path')
  // 获取路径
  function resolve (dir) {
    return path.join(__dirname, dir)
  }
  // 配置
  module.exports = {
  	//...
    chainWebpack(config) {
      config.plugins.delete('preload') // TODO: need test
      config.plugins.delete('prefetch') // TODO: need test
  
      // set svg-sprite-loader
      config.module
        .rule('svg')
        .exclude.add(resolve('src/assets/icons'))
        .end()
      config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/assets/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
          symbolId: 'icon-[name]'
        })
        .end()
        ｝
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33

• 创建svgIcon插件

  • 步骤

    1. src下的assets下创建icons文件夹(位置：不固定，我是创建assets下（放这类的图片啥的）)
    2. icons下创建index.js

  • -

    // icons/index.js
    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'// 封装的svgIon组件
    
    // register globally
    Vue.component('svg-icon', SvgIcon)
    // 统一批量引入
    const req = require.context('./svg', false, /\.svg$/) // ./svg -> svg文件所在路径
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    requireAll(req)
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • 在icons下创建 svg文件夹 管理所有的svg文件
    

• 封装 svg-icon 全局组件

  • components 下创建 SvgIcon 组件（component专门放共用组件的）

    <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>
    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>
    
    <style scoped>
    .svg-icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    
    .svg-external-icon {
      background-color: currentColor;
      mask-size: cover!important;
      display: inline-block;
    }
    </style>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62

• External 方法

export function isExternal (path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
1
2
3

• main.js 中注册插件

import './assets/icons' // icon
// 或者
import svgIconPlugin from '@/icons/index.js'
Vue.use(svgIconPlugin)
1
2
3
4

• 使用

  • icon-class的值就等于你在assets/icons/svg下的存的那些svg文件的名称，如我方了一个404.svg所以 icon-class=“404”

  <template>
    <div>
      <svg-icon icon-class="404" class="fs20" />
    </div>
  </template>
  
  1
  2
  3
  4
  5
  6