• 需求：设计给的一个按钮图标是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
  

• 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 testconfig.plugins.delete('prefetch') // TODO: need test// set svg-sprite-loaderconfig.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()｝
  }
  

• 创建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)

  • 在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>

• External 方法

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

• main.js 中注册插件

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

• 使用

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

  <template><div><svg-icon icon-class="404" class="fs20" /></div>
  </template>