src/ToggleIcon.js
function ToggleIcon (props) {
  const {
    classes,
    offIcon,
    onIcon,
    on,
    ...other
  } = props

  return (
    <div className={classes.root} {...other}>
      {React.cloneElement(offIcon, {
        className: classes.offIcon,
        style: {
          ...clipPath(on ? 'polygon(0% 0%, 0% 0%, 0% 0%)' : 'polygon(0% 200%, 0% 0%, 200% 0%)'),
          visibility: !on || clipPathSupported() ? 'visible' : 'hidden'
        }
      })}
      {React.cloneElement(onIcon, {
        className: classes.onIcon,
        style: {
          ...clipPath(on ? 'polygon(100% -100%, 100% 100%, -100% 100%)' : 'polygon(100% 100%, 100% 100%, 100% 100%)'),
          visibility: on || clipPathSupported() ? 'visible' : 'hidden'
        }
      })}
    </div>
  )
}
function ToggleIcon (props) {
  const {
    classes,
    offIcon,
    onIcon,
    on,
    ...other
  } = props

  return (
    <div className={classes.root} {...other}>
      {React.cloneElement(offIcon, {
        className: classes.offIcon,
        style: {
          ...clipPath(on ? 'polygon(0% 0%, 0% 0%, 0% 0%)' : 'polygon(0% 200%, 0% 0%, 200% 0%)'),
          visibility: !on || clipPathSupported() ? 'visible' : 'hidden'
        }
      })}
      {React.cloneElement(onIcon, {
        className: classes.onIcon,
        style: {
          ...clipPath(on ? 'polygon(100% -100%, 100% 100%, -100% 100%)' : 'polygon(100% 100%, 100% 100%, 100% 100%)'),
          visibility: on || clipPathSupported() ? 'visible' : 'hidden'
        }
      })}
    </div>
  )
}
function ToggleIcon ( props ) { const { classes , offIcon , onIcon , on , ... other } = props return ( < div className = { classes . root } { ... other } > { React . cloneElement ( offIcon , { className : classes . offIcon , style : { ... clipPath ( on ? 'polygon(0% 0%, 0% 0%, 0% 0%)' : 'polygon(0% 200%, 0% 0%, 200% 0%)' ) , visibility : ! on || clipPathSupported ( ) ? 'visible' : 'hidden' } } ) } { React . cloneElement ( onIcon , { className : classes . onIcon , style : { ... clipPath ( on ? 'polygon(100% -100%, 100% 100%, -100% 100%)' : 'polygon(100% 100%, 100% 100%, 100% 100%)' ) , visibility : on || clipPathSupported ( ) ? 'visible' : 'hidden' } } ) } < / div > ) }
An animated toggle icon.
An animated toggle icon .