react-ionicons/src/LogoOctocat.js

A React SVG ionicon component

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import SVG from './SVG'

class LogoOctocat extends Component {

  constructor(props) {
    super(props)
    this.state = {classNames: [], animationActive: false}
    this._getClasses = this._getClasses.bind(this)
  }

  render() {
    const style = {
      ...this.props.style,
      color: this.props.color,
      fontSize: this.props.fontSize,
    }

    return (
      <SVG
        style={this.props.style}
        className={this._getClasses()}
        fill={this.props.color}
        width={this.props.fontSize}
        height={this.props.fontSize}
        viewBox="0 0 1024 1024"
        onClick={this.props.onClick}
        rotate={this.props.rotate ? 1 : 0}
        shake={this.props.shake ? 1 : 0}
        beat={this.props.beat ? 1 : 0}
      >
        <path d="M356.708 574.956c-18.246 0-33.856 8.414-46.402 25.666-12.582 16.956-18.796 37.946-18.796 62.862 0 24.948 6.332 46.016 18.796 63.018 12.546 17.080 28.078 25.542 46.402 25.542 16.988 0 31.778-8.54 44.242-25.542 12.542-17.002 18.796-38.070 18.796-63.018 0-24.838-6.332-45.86-18.796-62.862-12.466-17.174-27.134-25.666-44.242-25.666z M669.336 574.956c-18.090 0-33.782 8.414-46.364 25.666-12.542 16.956-18.718 37.946-18.718 62.862 0 24.948 6.372 46.016 18.718 63.018 12.582 17.080 28.196 25.542 46.364 25.542 17.066 0 31.812-8.54 44.356-25.542 12.586-17.002 18.836-38.070 18.836-63.018 0-24.838-6.328-45.86-18.836-62.862-12.544-17.174-27.094-25.666-44.356-25.666z M891.554 344h-0.118c0 0 5.586-28.528 0.628-78.36-4.364-49.832-14.942-95.676-32.246-137.64 0 0-8.844 1.52-25.52 5.792s-44.16 12.598-81.876 29.536c-37.082 17.080-75.972 39.576-116.594 67.010-27.606-7.868-68.816-11.878-123.988-11.878-52.578 0-93.828 4.024-123.954 11.89-89.184-61.718-163.664-95.89-224.184-102.35-17.188 41.964-27.766 87.982-32.090 137.94-4.796 49.878 0.864 78.658 0.864 78.658-48.518 52.504-68.476 128.484-68.476 190.988 0 48.488 1.316 92.156 12.25 130.96 11.128 38.62 25.324 70.26 42.196 94.442 17.222 24.242 38.024 45.576 63.152 63.876 24.934 18.628 47.976 31.924 68.778 40.432 20.922 8.744 44.75 15.204 71.964 19.722 26.66 4.772 46.876 7.29 60.954 7.992 0 0 56 2.988 128.708 2.988s128.59-2.988 128.59-2.988c14.040-0.704 34.29-3.268 61.070-7.992 27.094-4.598 51.042-11.214 71.882-19.722 20.804-8.586 43.886-21.802 68.938-40.432 25.046-18.064 45.812-39.478 63.036-63.876 16.872-24.182 30.988-55.822 42.196-94.442 10.972-38.804 12.29-82.77 12.29-131.258-0.004-60.51-20.040-137.288-68.45-191.288zM760.766 811.29c-55.724 26.182-137.794 36.71-246.644 36.71l-4.286-0.078c-108.886 0-190.722-10.496-245.696-36.82-55.016-26.184-82.542-80.114-82.542-161.476 0-48.66 17.144-87.98 50.964-118.214 14.708-13.030 32.876-22.038 55.29-27.434 22.258-5.116 42.708-5.524 61.938-4.93 18.796 0.83 45.102 4.392 78.688 6.928 33.58 2.594 58.592 6.024 83.522 6.024 23.396 0 54.426-3.914 104.208-7.918 49.98-3.942 86.988-5.942 110.934-2 24.578 4.004 45.972 12.404 64.258 29.484 35.468 31.502 53.204 71.010 53.204 118.168-0.002 81.332-28.276 135.34-83.838 161.556z"></path>
      </SVG>
    )
  }

  _getClasses() {
    return [...this.state.classNames, this.props.className].join(' ')
  }

  _getPathByIconName() {
    let icon = icons.find(icon => icon.tags[0] === this.props.icon)
    if (icon) return icon.paths.join(' ')
    return ''
  }

}


LogoOctocat.defaultProps = {
  // style
  style: {},
  color: '#000000',
  fontSize: '22px',

  // animation
  shake: false,
  beat: false,
  rotate: false,
}


LogoOctocat.propTypes = {
  // style
  style: PropTypes.object,
  color: PropTypes.string,
  fontSize: PropTypes.string,

  // animation
  shake: PropTypes.bool,
  beat: PropTypes.bool,
  rotate: PropTypes.bool,

  // functions
  onClick: PropTypes.func
}


export default LogoOctocat