아이콘 선택기

드롭다운 기반의 아이콘 선택기로 사용자가 목록에서 아이콘을 선택할 수 있습니다.

사용법
프로퍼티

import React, { useState } from "react";
import { IconPicker } from "@/ui/input/components/IconPicker";

export const MyComponent = () => {

   const [selectedIcon, setSelectedIcon] = useState("");
   const handleIconChange = ({ iconKey, Icon }) => {
     console.log("Selected Icon:", iconKey);
     setSelectedIcon(iconKey);
   };

  return (
    <IconPicker
      disabled={false}
      onChange={handleIconChange}
      selectedIconKey={selectedIcon}
      variant="primary"
    />
  );
};

프로퍼티	유형	설명
비활성화됨	부울	`true`로 설정하면 아이콘 선택기가 비활성화됩니다.
onChange	함수	사용자가 아이콘을 선택할 때 호출되는 콜백 함수입니다. `iconKey`와 `Icon` 속성을 포함한 객체를 수신합니다.
선택된 아이콘 키	문자열	처음 선택된 아이콘의 키입니다.
onClickOutside	함수	사용자가 드롭다운 외부를 클릭했을 때 호출되는 콜백 함수입니다.
onClose	함수	드롭다운이 닫힐 때 호출되는 콜백 함수입니다.
onOpen	함수	드롭다운이 열릴 때 호출되는 콜백 함수입니다.
변형	문자열	클릭 가능한 아이콘의 시각적 스타일 변형입니다. 옵션에는 `primary`, `secondary`, `tertiary`가 포함됩니다.

Welcome

Core Concepts