webpack4 svg-sprite-loader 加載svg

本項(xiàng)目為react項(xiàng)目

image.png

簡(jiǎn)單應(yīng)用:

// 1. webpack設(shè)置svg loader,不要再在file-loader/url-loader中配置svg,只需要這里配置就夠了
//  但是如果你使用了svg字體,則不能刪除字體中的svg,但是可以使用exclude過(guò)濾調(diào)svg icon圖標(biāo),比如
// 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>

上面兩步就可以基本運(yùn)行,但是打包后就會(huì)發(fā)現(xiàn)打包文件夾里面根本沒(méi)有svg文件,svg被包裹進(jìn)js文件中了,即便給svg-sprite-loader設(shè)置了outputPath也沒(méi)有用。

進(jìn)一步改進(jìn)。

// 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)}`
        }
},
// 設(shè)置了extract:true,所以還需要在plugins中引入,否則會(huì)報(bào)錯(cuò)
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>

再次運(yùn)行,OK。
再次打包,發(fā)現(xiàn)多了個(gè)static/svgIcons/svg-sprite.svg文件,這個(gè)svg-sprite.svg文件包含了上面引入的兩個(gè)svg圖標(biāo)。

代碼還可以進(jìn)一步修改,如果svg圖標(biāo)太多,一個(gè)個(gè)引入很麻煩,就可以使用require.context()獲得目錄下所有svg圖片的map,然后循環(huán)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好像沒(méi)有全局引入,不能像Vue那樣直接在main.js中引入后,全局使用。
用上面的寫(xiě)法好像有點(diǎn)讓費(fèi),再修改一下,按需引入吧。

// 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是一個(gè)對(duì)象,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增加一點(diǎn)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>

// 全局注冊(cè)SvgIcon組件
// assets/svg/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg組件
 
// register globally
Vue.component('SvgIcon', SvgIcon)
 // svg圖標(biāo)太多,一個(gè)個(gè)引入很麻煩,就可以使用require.context()獲得目錄下所有svg圖片的map,然后循環(huán)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
// 普通頁(yè)面可以直接只用全局組件 iconClass就是svg文件的名字,class是樣式(設(shè)置大小位置)
<SvgIcon iconClass="down" class="down-icon"></SvgIcon></div>

vue cli3寫(xiě)法找到個(gè)更好的:http://www.lxweimin.com/p/b1a16a030f72

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。