React에 통합하기
React 프로젝트에서 Univer Icons를 설치하고 사용합니다.
Univer Icons를 React 화면에 추가하고 주변 컨트롤에 맞게 크기와 색상을 조절하세요.
아이콘 패키지 설치
React 프로젝트에 아이콘 패키지를 설치하세요.
pnpm add @univerjs/iconsnpm install @univerjs/iconsyarn add @univerjs/iconsbun add @univerjs/icons버튼에 아이콘 추가
아이콘 미리 보기에서 컴포넌트를 골라 이름으로 가져오세요. 다음 예제는 복사 버튼에 아이콘과 텍스트를 함께 표시합니다.
import { CopyIcon } from '@univerjs/icons'export function CopyButton({ onCopy }: { onCopy: () => void }) { return ( <button type="button" onClick={onCopy}> <CopyIcon aria-hidden="true" /> <span>복사</span> </button> )}onCopy로 복사 로직을 전달하세요. 버튼 텍스트가 동작을 설명하므로 아이콘은 장식으로 표시해 화면 낭독기의 중복 읽기를 방지합니다.
크기와 색상 조절
아이콘은 텍스트 색상을 상속하고 크기는 1em입니다. 별도로 조절하려면 fontSize와 color를 설정하세요.
import { AddImageIcon } from '@univerjs/icons'export function ImageToolIcon() { return ( <AddImageIcon aria-hidden="true" style={{ fontSize: 20, color: '#27272a' }} /> )}두 색상 아이콘 조절
기본 색상은 color, 강조 색상은 extend.colorChannel1로 설정합니다. 다음 예제는 진한 회색과 연한 회색을 사용합니다.
import { PaintBucketDoubleIcon } from '@univerjs/icons'export function FillToolIcon() { return ( <PaintBucketDoubleIcon aria-hidden="true" style={{ fontSize: 20, color: '#27272a' }} extend={{ colorChannel1: '#d4d4d8' }} /> )}브랜드 로고 같은 다색 아이콘에는 고정 색상이 포함될 수 있어 이 설정으로 모든 색상을 바꿀 수는 없습니다.
확대할 때 선 두께 유지
확대된 아이콘의 선이 너무 굵다면 preserveStrokeWidth를 사용해 보세요. 지원되는 선은 16 × 16 크기에서의 두께를 유지하며 채워진 도형에는 영향을 주지 않습니다. 미리 보기에서 선 두께 설정을 바꿔 결과를 확인하세요.
import { ShapePieIcon } from '@univerjs/icons'export function ShapeToolIcon() { return ( <ShapePieIcon aria-hidden="true" preserveStrokeWidth style={{ fontSize: 48 }} /> )}아이콘 전용 버튼에 이름 추가
버튼 텍스트를 제거한다면 버튼에 aria-label="복사"를 추가하고 아이콘의 aria-hidden="true"는 유지하세요. 화면 낭독기가 동작 이름을 읽을 수 있습니다.
AI Agent에게 아이콘 선택과 통합 코드 작성을 맡기려면 MCP 서비스에 연결하세요.
이 가이드는 어떠셨나요?