Chakra UI에서 SVG 아이콘을 AvatarBadge로 사용하는 방법

나는 최근에 사이드 프로젝트를 만들고 있었고 Chakra UI + Next.js를 사용하고 있었습니다. 아바타 이미지 우측 하단에 구글 로고를 뱃지로 넣고 싶었습니다. 이런거👇🏻.



Chakra UI는 Avatar 및 AvatarBadge 구성 요소를 제공합니다. 이 두 가지를 사용하여 배지(오른쪽 하단)가 있는 아바타 이미지를 만들 수 있습니다. 다음은 Chakra UI 문서의 예입니다.



이제 SVG 아이콘을 삽입하려는 점 대신에 가정합니다. 방법은 다음과 같습니다.

import { Avatar, AvatarBadge, Icon } from "@chakra-ui/core";

const GoogleIcon = (props) => (
  <svg viewBox="0 0 533.5 544.3" {...props}>
    <path
      d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
      fill="#4285f4"
    />
    <path
      d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
      fill="#34a853"
    />
    <path
      d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
      fill="#fbbc04"
    />
    <path
      d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
      fill="#ea4335"
    />
  </svg>
);

export default function Home() {
  return (
    ...
    <Avatar>
      <AvatarBadge boxSize="1.25em" borderColor="transparent" bg="white">
        <Icon as={GoogleIcon} w="5" h="5" />
      </AvatarBadge>
    </Avatar>
    ...
  );
}

위의 예에는 GoogleIcon SVG가 있습니다. 그런 다음 Icon SVG를 사용하여 GoogleIcon 구성 요소를 만듭니다. 그런 다음 이 Icon 구성 요소를 AvatarBadge 에 자식으로 전달합니다.

마찬가지로 이미지가 있는 배지를 만들려는 경우입니다. Icon 구성 요소를 Image로 교체하면 이미지가 배지로 렌더링됩니다.

import { Avatar, AvatarBadge, Image } from "@chakra-ui/core";

export default function Home() {
  return (
    ...
    <Avatar>
      <AvatarBadge boxSize="1.25em" borderColor="transparent">
        <Image src="https://raw.githubusercontent.com/chakra-ui/chakra-ui/develop/logo/logomark-colored%402x.png" />
      </AvatarBadge>
    </Avatar>
    ...
  );
}

결론

Chakra UI는 모듈식 구성 요소를 제공하는 멋진 라이브러리입니다. 이 라이브러리를 사용자 지정 구성 요소를 만들기 위한 빌딩 블록으로 사용할 수 있습니다. 사용자 지정 구성 요소를 구축하는 것은 매우 간단했습니다.

If you liked this post please share it with others so that it can help them as well. You can tag me on Twitter . Also please follow me here and on Twitter for future blogs which I write over here