const Triangle = ({transform='translate(0,0)', fill="currentColor"}) => <path strokeLinecap="round" strokeLinejoin="round" transform={transform} style={{fill}} transform-origin="12 12" d="M1 12m9 3m-6 4h2c3 0 3 -3 3-3L9 3c-0-1.732 -2.25-2.6125 -3.325 -.77L2 16c-.77 1.333.192 3 1.732 3z" />

const Line = () => <path strokeLinecap="round" strokeLinejoin="round" transform="translate(12, 2)" d="M0 0L0 20" />

export const FlipIconInner = ({x=0, y=0, rotate=0, ...style}) => <g transform={`translate(${x},${y}) rotate(${rotate})`} transform-origin="12 12" style={style}>
  <Triangle fill="none" transform="translate(0, 2.5)"/>
  <Line/>
  <Triangle transform="scale(-1,1) translate(0,2.5)"/>
</g>

export default function({ className="h-6 w-6" }) {
  return <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
    <FlipIconInner></FlipIconInner>
  </svg>
}