webpack4 svg-sprite-loader 加载svg

本项目为react项目

image.png

简单应用：

// 1. webpack设置svg loader，不要再在file-loader/url-loader中配置svg，只需要这里配置就够了
//  但是如果你使用了svg字体，则不能删除字体中的svg,但是可以使用exclude过滤调svg icon图标，比如
// test: /\.(eot|woff|ttf|woff2|appcache|svg)\??.*$/,
// exclude: [/^node_modules$/, path.resolve(__dirname, '../src/svg')],
{
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        exclude: /^node_modules$/,
        include: [path.resolve(__dirname, '../src/svg')],
        options: {
             symbolId: '[name]',
             extract: false
        }
}
// 使用svg Home.jsx
import '../svg/DDQY.svg'
import '../svg/DDQY_NO.svg'
...
<svg aria-hidden="true">
        <use xlinkHref="#DDQY"></use>
</svg>
<svg aria-hidden="true">
          <use xlinkHref="#DDQY_NO"></use>
</svg>

上面两步就可以基本运行，但是打包后就会发现打包文件夹里面根本没有svg文件，svg被包裹进js文件中了，即便给svg-sprite-loader设置了outputPath也没有用。

进一步改进。

// 1. webpack svg loader配置
{
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        exclude: /^node_modules$/,
        include: [path.resolve(__dirname, '../src/svg')],
        options: {
          symbolId: '[name]',
          extract: true,
          outputPath: "static/svgIcons/",
          publicPath: "static/svgIcons/",
          spriteFilename: "svg-sprite.svg"
          // spriteFilename: svgPath => `sprite${svgPath.substr(-4)}`
        }
},
// 设置了extract：true，所以还需要在plugins中引入，否则会报错
const SvgSpriteLoader = require('svg-sprite-loader/plugin')
...
module.exports = {
  entry: {
    // output的name变量值就是main
    main: './src/app.js'
  },
  plugins: [
    // new CleanWebpackPlugin(),
    ...
    new SvgSpriteLoader()
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '../dist')
  },
......
}

// 2. Home.jsx使用svg
import svgYes from '../svg/DDQY.svg'
import svgNo from '../svg/DDQY_NO.svg'
...
<svg aria-hidden="true">
          <use xlinkHref={svgYes}></use>
</svg>
<svg aria-hidden="true">
          <use xlinkHref={svgNo}></use>
</svg>

再次运行，OK。
再次打包，发现多了个static/svgIcons/svg-sprite.svg文件,这个svg-sprite.svg文件包含了上面引入的两个svg图标。

代码还可以进一步修改，如果svg图标太多，一个个引入很麻烦，就可以使用require.context（）获得目录下所有svg图片的map,然后循环require引入这些svg。

// components/svgCustomer.jsx
import React, { Component } from "react";

let requireSvgOb = {}
const svgMapOb = require.context('@src/svg', false, /\.svg$/);
const requireAll = (requireContext) => {
  requireContext.keys().map((item) => {
    let svgName;
    let svgModule;
    let regArr = item.match(/^.\/(.+?).svg$/);
    if (Array.isArray(regArr) && regArr[1]) {
      svgName = regArr[1];
      svgModule = requireContext(item);
      requireSvgOb[svgName] = svgModule.default
    }
  })
}
requireAll(svgMapOb)

console.log('requireSvgOb:', requireSvgOb)

class SvgCustomer extends Component {
  constructor(props) {
    super();
    this.state={
    }
  }
  UNSAFE_componentWillMount () {
  }
  componentDidMount () {
  }
  render () {
    return (
      <svg aria-hidden="true">
        <use xlinkHref={requireSvgOb[this.props.iconName]}></use>
      </svg>
    )
  }
}
export default SvgCustomer;

// Home.jsx
import SvgCustomer from './components/svgCustomer'
...
<SvgCustomer iconName="DDQY"></SvgCustomer>
<SvgCustomer iconName="DDQY_NO"></SvgCustomer>

React好像没有全局引入，不能像Vue那样直接在main.js中引入后，全局使用。
用上面的写法好像有点让费，再修改一下，按需引入吧。

// components/svgCustomer.jsx
import React, { Component } from "react";

// .size-w100-h100 {
//   width: 100%; height: 100%;
// }

class SvgCustomer extends Component {
  constructor(props) {
    super();
    let svg = require("@src/svg/" + props.iconName + ".svg")
    console.log(svg)
    this.state={
      svg: svg.default // svg是一个对象，svg.default才是真正的svg图片
    }
  }
  UNSAFE_componentWillMount () {
  }
  componentDidMount () {
  }
  render () {
    return (
      <svg aria-hidden="true" className="size-w100-h100">
        <use xlinkHref={this.state.svg}></use>
      </svg>
    )
  }
}
export default SvgCustomer;

// Home.jsx
import SvgCustomer from './components/svgCustomer'
...
<SvgCustomer iconName="DDQY"></SvgCustomer>
<SvgCustomer iconName="DDQY_NO"></SvgCustomer>

20201123增加一点Vue使用svg的代码：

// src/components/SvgIcon.vue
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>
 
<script>
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    }
  },
  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;*/
  fill: currentColor;
  overflow: hidden;
}
</style>

// 全局注册SvgIcon组件
// assets/svg/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
 
// register globally
Vue.component('SvgIcon', SvgIcon)
 // svg图标太多，一个个引入很麻烦，就可以使用require.context（）获得目录下所有svg图片的map,然后循环require引入这些svg
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./', false, /\.svg$/)
requireAll(req)

// src/main.js
import '@/assets/svg/index.js'   // 引入svg

// 普通页面可以直接只用全局组件 iconClass就是svg文件的名字，class是样式（设置大小位置）
<SvgIcon iconClass="down" class="down-icon"></SvgIcon></div>

vue cli3写法找到个更好的：//www.greatytc.com/p/b1a16a030f72