ThemeIcon

ThemeIcon

테마 색상으로 요소 안에 아이콘을 렌더링하는 컴포넌트예요. 아이콘을 색상이 있는 배경 위에 표현할 때 사용해요.

출처: 문서

본문

사용법 (Usage)

ThemeIcon 컴포넌트로 variant, radius, size, color를 지정할 수 있어요. Variant는 filled, light, outline, default, white가 있어요.

import { ThemeIcon } from '@mantine/core';
import { ImageIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <ThemeIcon variant="filled" color="blue" size="lg" radius="md">
      <ImageIcon size={24} />
    </ThemeIcon>
  );
}

그라데이션 variant (Gradient variant)

variant prop을 gradient로 설정하면 gradient prop으로 그라데이션을 제어할 수 있어요. gradient prop은 from, to, deg 속성을 가진 객체를 받아요. gradient prop을 설정하지 않으면 ThemeIcon은 theme object에서 설정할 수 있는 theme.defaultGradient를 사용해요. variant가 gradient가 아니면 gradient prop은 무시돼요.

variant="gradient"는 두 가지 색상의 선형 그라데이션만 지원해요는 점에 주의해요. 더 복잡한 그라데이션이 필요하면 Styles API로 ThemeIcon 스타일을 수정해요.

import { ThemeIcon } from '@mantine/core';
import { HeartIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <ThemeIcon variant="gradient" gradient={{ from: 'indigo', to: 'cyan', deg: 45 }}>
      <HeartIcon size={24} />
    </ThemeIcon>
  );
}

variant 색상 커스터마이즈 (Customize variants colors)

variantColorResolver를 테마에 추가하면 ThemeIcon 및 다른 컴포넌트 variant의 색상을 커스터마이즈할 수 있어요.

import { ImageIcon, FingerprintIcon, WarningIcon } from '@phosphor-icons/react';
import {
  ThemeIcon,
  Group,
  MantineProvider,
  defaultVariantColorsResolver,
  VariantColorsResolver,
  parseThemeColor,
  rgba,
  darken,
} from '@mantine/core';

const variantColorResolver: VariantColorsResolver = (input) => {
  const defaultResolvedColors = defaultVariantColorsResolver(input);
  const parsedColor = parseThemeColor({
    color: input.color || input.theme.primaryColor,
    theme: input.theme,
  });

  // variant에 대한 일부 속성을 덮어써요
  if (parsedColor.isThemeColor && parsedColor.color === 'lime' && input.variant === 'filled') {
    return {
      ...defaultResolvedColors,
      color: 'var(--mantine-color-black)',
      hoverColor: 'var(--mantine-color-black)',
    };
  }

  // variant를 완전히 덮어써요
  if (input.variant === 'light') {
    return {
      background: rgba(parsedColor.value, 0.1),
      hover: rgba(parsedColor.value, 0.15),
      border: `1px solid ${parsedColor.value}`,
      color: darken(parsedColor.value, 0.1),
    };
  }

  // 새 variant 추가
  if (input.variant === 'danger') {
    return {
      background: 'var(--mantine-color-red-9)',
      hover: 'var(--mantine-color-red-8)',
      color: 'var(--mantine-color-white)',
      border: 'none',
    };
  }

  return defaultResolvedColors;
};

autoContrast

ThemeIcon는 autoContrast prop과 theme.autoContrast를 지원해요. ThemeIcon이나 테마에 autoContrast를 설정하면, color prop에 지정된 값과 충분한 대비를 가지도록 콘텐츠 색상이 조정돼요.

autoContrast 기능은 color prop으로 배경색을 변경할 때만 동작한다는 점에 주의해요. autoContrast는 filled variant에서만 동작해요.

import { FingerprintIcon } from '@phosphor-icons/react';
import { ThemeIcon, Group } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <ThemeIcon color="lime" autoContrast>
        <FingerprintIcon size={24} />
      </ThemeIcon>
    </Group>
  );
}

더 알아보기 (Learn more)

• Spoiler
• Timeline
• variantColorResolver 설정하기