@chakra-xui/cra-template/template/src/Logo.js

The official Chakra+JavaScript template for Create React App

import React from 'react';
import { Image, keyframes, usePrefersReducedMotion } from '@chakra-xui/react';
import logo from './logo.svg';

const spin = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;

export const Logo = props => {
  const prefersReducedMotion = usePrefersReducedMotion();

  const animation = prefersReducedMotion
    ? undefined
    : `${spin} infinite 20s linear`;

  return <Image animation={animation} src={logo} {...props} />;
};