vue-cli3中使用svg-sprite-loader方法

一. 引用步骤

1. npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D
2. 在src目录下新建svg文件夹，这里存放所有svg文件。
3. 在vue.config.js文件中配置加载svg文件对应svg-sprite-loader规则

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
  lintOnSave: true,
  // 基本路径
  // baseUrl: './',//vue-cli3.3以下版本使用
  publicPath: './', // vue-cli3.3+新版本使用
  // 输出文件目录
  outputDir: 'dist/saas/',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'static',
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `assets/scss/color.scss` 这个文件
        data: `@import "~@/assets/scss/color.scss";`
      }
    }
  },
  chainWebpack: config => {
    // 清空默认svg规则
    config.module
      .rule('svg')
      .uses.clear()
    config.module //针对svg文件添加svg-sprite-loader规则
      .rule('svg1')
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

二. 使用方法

1. 封装SvgIcon.vue组件

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

<script>
export default {
  name: 'SvgIcon',
  props: {
    svgName: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.svgName}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
script>

<style scoped>
.svg-icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
style>

2. 在main.js中把SvgIcon注册成全局组件

import svgIcon from './components/SvgIcon.vue'
Vue.component('svg-icon', svgIcon)

3. 在main.js中全局加载所有svg文件，不用每次使用都import一下

// 全局加载svg，不用没次都import
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContent => requireContent.keys().map(requireContent)
requireAll(req)

4. 效果图
   

  <svg-icon :svg-name="'icon-dev-select'" :class-name="'svg-env'" />

你会发现use内部渲染出svg元素id=icon-icon-dev-select，因为我们在vue.config.js文件中配置svg加载规则，给symbolId设置：icon-[name],所以我们在使用时用法：icon+svg文件名。

config.module //针对svg文件添加svg-sprite-loader规则
      .rule('svg1')
      .test(/\.svg$/)
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

三. 动态改变svg颜色

目前没有找到一个好的方法

四.参看链接

vue-cli2/vue-cli3项目中使用svg-sprite-loader