React 引入本svg，制作相应SvgIcon组件

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>
      }
      </>
    )
  }
}

未完待续…偷个懒