FeaturedIcon
FeaturedIcon은 아이콘을 강조하여 표시하는 컴포넌트입니다. 다양한 테마, 색상, 크기 옵션을 제공하여 상태나 액션을 시각적으로 표현하는 데 사용됩니다. 아이콘을 배경이 있는 원형 또는 사각형 컨테이너 안에 배치하여 시각적 강조효과를 줍니다.
인터랙티브 예제
아래 인터랙티브 예제를 통해 다양한 FeaturedIcon 속성을 실시간으로 변경하고 동작을 확인해볼 수 있습니다.
nameselect
아이콘 이름을 선택합니다.
themeselect
아이콘 테마를 선택합니다.
colorselect
아이콘 색상을 선택합니다.
sizeselect
아이콘 크기를 선택합니다.
기본 사용법
import { FeaturedIcon } from '@ncds/ui-admin';
function App() {
return <FeaturedIcon name="pin-02" />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | name | - | 표시할 아이콘 이름 (@ncds/ui-admin-icon 패키지의 아이콘 이름) |
| theme | 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline' | 'light-circle' | 아이콘 컨테이너의 테마 스타일 |
| color | 'neutral' | 'error' | 'warning' | 'success' | 'neutral' | 아이콘 및 배경의 색상 테마 |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | 아이콘 컨테이너의 크기 |
| className | string | - | 추가 클래스명 |
상세 예제
테마 (Theme)
FeaturedIcon은 4가지 테마를 지원합니다: light-circle, dark-circle, outline-circle, square-outline
색상 (Color)
FeaturedIcon은 4가지 색상을 지원합니다: neutral, error, warning, success
크기 (Size)
FeaturedIcon은 4가지 크기를 지원합니다: sm, md, lg, xl
스퀘어 아웃라인 테마
스퀘어 아웃라인 테마는 모서리가 둥근 사각형 테두리 스타일을 제공합니다. 다양한 크기를 지원합니다.