message: refactor: avatar
  use chakra.svg to prevent inline style
  use `import type`
diff: -import { useImage, ImageProps } from "@chakra-ui/image"
  +import { useImage } from "@chakra-ui/image"
  +import type { ImageProps } from "@chakra-ui/image"
  +import type {
  + PropsOf,
  + SystemStyleObject,
  + SystemProps,
  + ThemingProps,
  +} from "@chakra-ui/system"
  import {
  chakra,
  forwardRef,
  omitThemingProps,
  - PropsOf,
  StylesProvider,
  - SystemProps,
  - SystemStyleObject,
  - ThemingProps,
  useMultiStyleConfig,
  useStyles,
  } from "@chakra-ui/system"
  @@ -130,12 +133,13 @@ const AvatarName: React.FC<AvatarNameProps> = (props) => {
  * Fallback avatar react component.
  * This should be a generic svg used to represent an avatar
  */
  -const DefaultIcon: React.FC<PropsOf<"svg">> = (props) => {
  +const DefaultIcon: React.FC<PropsOf<typeof chakra.svg>> = (props) => {
  return (
  - <svg
  + <chakra.svg
  viewBox="0 0 128 128"
  color="#fff"
  - style={{ width: "100%", height: "100%" }}
  + width="100%"
  + height="100%"
  {...props}
  >
  <path
  @@ -146,7 +150,7 @@ const DefaultIcon: React.FC<PropsOf<"svg">> = (props) => {
  fill="currentColor"
  d="M63.9961647,24 C51.2938136,24 41,34.2938136 41,46.9961647 C41,59.7061864 51.2938136,70 63.9961647,70 C76.6985159,70 87,59.7061864 87,46.9961647 C87,34.2938136 76.6985159,24 63.9961647,24"
  />
  - </svg>
  + </chakra.svg>
  )
  }
  