1
0
Fork 0
freesewing/sites/shared/components/icons/flip.js
2023-02-05 19:58:25 +01:00

44 lines
1.3 KiB
JavaScript

/*
* These icons are kept out of the consolidated icons file because they use different props
* I think we should move them to the component where they are used, for I don't think
* they are used anywhere else, so there's little use in having them here
*/
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>
)
const FlipIcon = ({ 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>
)
}
export default FlipIcon