redux-devtools/packages/redux-slider-monitor/src/SliderButton.js

import React, { Component, PureComponent } from 'react';
import PropTypes from 'prop-types';
import Button from 'devui/lib/Button';

export default class SliderButton extends (PureComponent || Component) {
  static propTypes = {
    theme: PropTypes.object,
    type: PropTypes.string,
    disabled: PropTypes.bool,
    onClick: PropTypes.func
  };

  iconStyle() {
    return {
      cursor: 'hand',
      fill: this.props.theme.base06,
      width: '1.8rem',
      height: '1.8rem'
    };
  }

  renderPlayButton() {
    return (
      <Button
        onClick={this.props.onClick}
        title='Play'
        size='small'
        disabled={this.props.disabled}
        theme={this.props.theme}
      >
        <svg viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet' style={this.iconStyle()}>
          <g>
            <path d='M8 5v14l11-7z' />
          </g>
        </svg>
      </Button>
    );
  }

  renderPauseButton = () => (
    <Button
      onClick={this.props.onClick}
      title='Pause'
      size='small'
      disabled={this.props.disabled}
      theme={this.props.theme}
    >
      <svg viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet' style={this.iconStyle()}>
        <g>
          <path d='M6 19h4V5H6v14zm8-14v14h4V5h-4z' />
        </g>
      </svg>
    </Button>
  );

  renderStepButton = (direction) => {
    const isLeft = direction === 'left';
    const d = isLeft
      ? 'M15.41 16.09l-4.58-4.59 4.58-4.59-1.41-1.41-6 6 6 6z'
      : 'M8.59 16.34l4.58-4.59-4.58-4.59 1.41-1.41 6 6-6 6z';

    return (
      <Button
        size='small'
        title={isLeft ? 'Go back' : 'Go forward'}
        onClick={this.props.onClick}
        disabled={this.props.disabled}
        theme={this.props.theme}
      >
        <svg viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet' style={this.iconStyle()}>
          <g>
            <path d={d} />
          </g>
        </svg>
      </Button>
    );
  };

  render() {
    switch (this.props.type) {
      case 'play':
        return this.renderPlayButton();
      case 'pause':
        return this.renderPauseButton();
      case 'stepLeft':
        return this.renderStepButton('left');
      case 'stepRight':
        return this.renderStepButton('right');
      default:
        return null;
    }
  }
}