iconChevron.tsx 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. import {forwardRef, Fragment} from 'react';
  2. import {css} from '@emotion/react';
  3. import theme from 'sentry/utils/theme';
  4. import {SvgIcon, SVGIconProps} from './svgIcon';
  5. interface Props extends SVGIconProps {
  6. direction?: 'up' | 'right' | 'down' | 'left';
  7. isCircled?: boolean;
  8. }
  9. const IconChevron = forwardRef<SVGSVGElement, Props>(
  10. ({isCircled = false, direction = 'up', ...props}, ref) => {
  11. return (
  12. <SvgIcon
  13. {...props}
  14. ref={ref}
  15. css={
  16. direction
  17. ? css`
  18. transition: transform 120ms ease-in-out;
  19. transform: rotate(${theme.iconDirections[direction]}deg);
  20. `
  21. : undefined
  22. }
  23. >
  24. {isCircled ? (
  25. <Fragment>
  26. <path d="M8,16a8,8,0,1,1,8-8A8,8,0,0,1,8,16ZM8,1.53A6.47,6.47,0,1,0,14.47,8,6.47,6.47,0,0,0,8,1.53Z" />
  27. <path d="M11.12,9.87a.73.73,0,0,1-.53-.22L8,7.07,5.41,9.65a.74.74,0,0,1-1.06,0,.75.75,0,0,1,0-1.06L7.47,5.48a.74.74,0,0,1,1.06,0l3.12,3.11a.75.75,0,0,1,0,1.06A.74.74,0,0,1,11.12,9.87Z" />
  28. </Fragment>
  29. ) : (
  30. <path d="M14,11.75a.74.74,0,0,1-.53-.22L8,6.06,2.53,11.53a.75.75,0,0,1-1.06-1.06l6-6a.75.75,0,0,1,1.06,0l6,6a.75.75,0,0,1,0,1.06A.74.74,0,0,1,14,11.75Z" />
  31. )}
  32. </SvgIcon>
  33. );
  34. }
  35. );
  36. IconChevron.displayName = 'IconChevron';
  37. export {IconChevron};