Jak používat ikonu SVG jako AvatarBadge v uživatelském rozhraní Chakra

Nedávno jsem stavěl vedlejší projekt a používal jsem Chakra UI + Next.js. Chtěl jsem umístit logo Google jako odznak do pravého dolního rohu obrázku avatara. Něco takového👇🏻.

Uživatelské rozhraní Chakra poskytuje Avatar a AvatarBadge komponent. Tyto dva můžete použít k vytvoření obrázku avatara s odznakem (vpravo dole). Zde je příklad z dokumentů Chakra UI.

Nyní předpokládejme, že místo tečky chcete vložit ikonu SVG. Zde je návod, jak to udělat.

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>
    ...
  );
}

Ve výše uvedeném příkladu je GoogleIcon SVG. Pak vytvářím Icon komponentu pomocí GoogleIcon SVG. Potom předáme tento Icon komponentu jako potomky do AvatarBadge .

Podobně, pokud chcete vytvořit odznak s obrázkem. Stačí nahradit Icon komponenta s Image a vykreslí obrázek jako odznak.

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>
    ...
  );
}

Závěr

Chakra UI je úžasná knihovna, která poskytuje modulární komponenty. Tuto knihovnu můžete použít jako stavební blok pro vytváření vlastních komponent. Vytvoření vlastních komponent bylo velmi jednoduché.