Problems with transform trying to rotate svg

Hello,

Im trying to make a ChevronIcon component that takes direction as a prop and using transform to rotate the icon accordingly.
It works well but I get this error message on load. If I dismiss it all seems well and the icon looks fine however I rotate it.

Heres a screen and some code.

const SVGIcon = ({
  accessibilityText,
  children,
  color = 'white',
  size = defaultSize,
  styled,
  transform,
  viewBox = '0 0 24 24',
}: Props) => (
  <Svg
    fill={styled ? getColor(color, 300) : getColor(color, 500)}
    height={size}
    transform={transform}
    viewBox={viewBox}
    width={size}
  >
    {children}
    {accessibilityText && <title>{accessibilityText}</title>}
  </Svg>
);

const directions = {
  up: 0,
  right: 90,
  down: 180,
  left: 270,
};

export const rotate = (direction: Direction, size: number) => ({ rotation: directions[direction], originX: (size / 2), originY: (size / 2) });

const ChevronIcon = ({ direction, ...props }: DirectionalIconProps) => {
  const { size } = props;
  return (
    <SVGIcon {...props} transform={rotate(direction, (size || defaultSize))}>
      <Path
        d="M12 10L4.1297 18.4469C3.41373 19.1844 2.25293 19.1844 1.53697 18.4469C0.82101 17.7095 0.82101 16.5139 1.53697 15.7765L12 5L22.463 15.7765C23.179 16.5139 23.179 17.7095 22.463 18.4469C21.7471 19.1844 20.5863 19.1844 19.8703 18.4469L12 10Z"
      />
    </SVGIcon>
  );
};

Screenshot 2020-09-01 at 11 12 04

1 possible answer(s) on “Problems with transform trying to rotate svg

  1. Got it to work by changing the rotate function if anyones interested.

    const directions = {
      up: '0deg',
      right: '90deg',
      down: '180deg',
      left: '270deg',
    };
    
    export const rotate = (direction: Direction) => ([{ rotate: directions[direction] }]);