React 引入本svg，製作相應SvgIcon元件

1.webpack.config.js引入對應loader

（1）下載loader：npm install svg-sprite-loader --save

（2）在webpack配置中配置以下資訊(一定要在file-loader之前配置啊啊啊啊啊啊)

{
    test: /\.svg$/,
    loader: "svg-sprite-loader",
    //只處理指定svg的檔案(所有使用的svg檔案放到該資料夾下)
    // include: path.resolve(__dirname, "../src/icons"), 
 

    include: paths.iconsPath,
    options: {
    symbolId: "icon-[name]" 
    //symbolId和use使用的名稱對應
    //<use xlinkHref={"#icon-" + iconClass} />
    }
},

2. icons資料夾

（1）檔案目錄

--icons
	--svg
		--404.svg
		--bug.svg
		....
	--index.js

（2）index.js

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
console.log("require,svg,"+req)
requireAll(req)
 

3.SvgIcon元件

import React from "react";
import PropTypes from 'prop-types'
import './style.scss'

// 這一段照網上的意思是不需要加的，但是加了才顯示出來，所以，各位
const req = require.context('../../../icons/svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
console.log("require,svg,"+req)
requireAll(req)

export default class SvgIcon2 extends React.Component{

  static propTypes = {
    iconClass: PropTypes.string.isRequired,
    className: PropTypes.string
  }

  static defaultProps = {
    className: ''
  }
  get isExternal() {
    if (!this.props.iconClass) return false
    return /^(https?:|mailto:|tel:)/.test(this.props.iconClass)
  }
  get iconName() {
    return `#icon-${this.props.iconClass}`
  }
  get svgClass() {
    if (this.props.className) {
      return 'svg-icon ' + this.props.className
    } else {
      return 'svg-icon'
    }
  }
  get styleExternalIcon() {
    return {
      mask: `url(${this.props.iconClass}) no-repeat 50% 50%`,
      WebkitMask: `url(${this.props.iconClass}) no-repeat 50% 50%`
    }
  }

  render() {
    return (
      <>
      {
        this.isExternal ?
          <div style={this.styleExternalIcon} className="svg-external-icon svg-icon" /> :
          <svg className={this.svgClass} aria-hidden="true">
            <use xlinkHref={this.iconName} />
          </svg>
      }
      </>
    )
  }
}
 

未完待續…偷個懶