Files
react/components/collapse/collapse-icon.tsx
2020-05-06 14:25:10 +08:00

35 lines
712 B
TypeScript

import React from 'react'
interface Props {
active?: boolean
}
const CollapseIcon: React.FC<Props> = ({ active }) => {
return (
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
fill="none"
shapeRendering="geometricPrecision"
style={{ color: 'currentColor' }}>
<path d="M6 9l6 6 6-6" />
<style jsx>{`
svg {
transition: transform 200ms ease;
transform: rotateZ(${active ? '-180deg' : '0'});
}
`}</style>
</svg>
)
}
const MemoCollapseIcon = React.memo(CollapseIcon)
export default MemoCollapseIcon