Icon libraries with Mantine

Icon libraries with Mantine (Mantine과 아이콘 라이브러리)

Mantine 컴포넌트와 함께 어떤 아이콘 라이브러리든 사용할 수 있어요. 인기 있는 옵션과 아이콘 크기 설정, 커스텀 아이콘 권장 사항을 설명해 드릴게요.

출처: 문서

본문

Mantine 컴포넌트와 함께 어떤 아이콘 라이브러리든 사용할 수 있어요. 가장 인기 있는 옵션은 다음과 같아요:

  • Phosphor icons
  • Tabler icons
  • Feather icons
  • Radix icons
  • react-icons
  • Font Awesome

Phosphor icons

Phosphor icons은 Mantine 데모와 문서에서 사용되고, 일부 @mantine/ 패키지가 여기에 의존해요. 어떤 아이콘 라이브러리를 쓸지 모르겠다면 Phosphor icons을 권장해요.

아이콘 크기 (Icon size)

대부분의 아이콘 라이브러리는 아이콘의 너비와 높이를 바꿀 수 있는 size prop(또는 비슷한 width/height props)을 지원해요. 보통 픽셀 단위의 숫자예요.

import { AtomIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <AtomIcon
      size={80}
      color="var(--mantine-color-blue-filled)"
    />
  );
}

size prop의 rem 단위: 아이콘 size prop은 내부적으로 width와 height props로 변환되는 게 보통이에요. size={16}으로 설정하면 svg 요소에 width="16"과 height="16" 속성으로 변환돼요.

size prop에 rem 단위를 사용할 수 있어요(size="1rem" → width="1rem", height="1rem"). 하지만 SVG 표준에서 금지되어 일부 브라우저(Firefox)가 콘솔에 경고를 표시하므로 권장하지 않아요.

커스텀 아이콘

아이콘을 React 컴포넌트로 사용하는 것을 권장해요. 이 경우 fill과 stroke props에 currentColor를 쓸 수 있어요. 그러면 사용된 컨텍스트에 따라 아이콘 색상이 바뀌어요.

interface AddressBookIconProps extends React.ComponentProps<'svg'> {
  size?: number | string;
}

export function AddressBookIcon({ size, style, ...others }: AddressBookIconProps) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="1.5"
      viewBox="0 0 24 24"
      style={{ width: size, height: size, ...style }}
      {...others}
    >
      <path stroke="none" d="M0 0h24v24H0z" />
      <path d="M20 6v12a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2zM10 16h6" />
      <path d="M11 11a2 2 0 104 0 2 2 0 10-4 0M4 8h3M4 12h3M4 16h3" />
    </svg>
  );
}

더 알아보기 (Learn more)