아이콘
새 컴포넌트가 쓰는 내부 아이콘 세트입니다. 24 격자에 선 1.75, 끝과 이음은 둥글게 그립니다.
제품마다 lucide-react 버전이 0.577 과 1.x 로 갈려 있어 같은 아이콘도 선 굵기와 끝 모양이 달랐습니다. 새 컴포넌트는 lucide 대신 이 세트를 씁니다. 이름은 lucide 와 같게 지어, 필요하면 import 한 줄만 바꿔 끼울 수 있습니다. 컴포넌트는 SVG 원본에서 생성하며, 쓰지 않는 아이콘은 번들에 들어가지 않습니다.
- 격자
- 24×24 에 2px 안쪽 여백을 둡니다. 원은 지름 18, 사각형은 16×16 이 기준 면입니다.
- 선
- 1.75 하나만 씁니다. 16px 로 그리면 약 1.2px 가 됩니다. 끝과 이음은 둥글게 그립니다.
- 색
- 글자색(currentColor)을 따릅니다.
- 따로 두는 것
- 로고와 덱 아이콘(deck-icons)은 브랜드 아트워크라 이 세트와 따로입니다. 상태는 아이콘이 아니라 상태 글리프(StatusGlyph)가 나타냅니다.
import
아이콘마다 컴포넌트 하나를 내보냅니다. react 외에 필요한 패키지는 없습니다.
import { IconChevronDown, IconSearch } from "@uyoolabs/ui/icons";전체 세트
135종입니다. 같은 그림을 두 이름으로 부르는 별칭은 한 칸에 함께 적었습니다.
- archive
- arrow-down
- arrow-down-to-line
- arrow-right
- arrow-up
- arrow-up-to-line
- at-sign
- bell
- bell-off
- bold
- calendar
- captions
- car
- check
- check-check
- check-square
- chevron-down
- chevron-left
- chevron-right
- chevron-up
- chevrons-up-down
- circle
- circle-alert
- circle-check
- circle-dashed
- circle-help
- circle-pause
- circle-slash
- clock
- code
- coffee
- columns-3
- copy
- door
- download
- ellipsis
- external-link
- eye
- eye-off
- file
- file-archive
- file-spreadsheet
- file-text
- filter
- flag
- folder
- folder-open
- globe
- grip
- grip-horizontal
- grip-vertical
- hand
- hash
- headphones
- headphones-off
- heart
- home
- image
- inbox
- info
- italic
- keyboard
- layout-grid
- leaf
- lightbulb
- link
- link-2-off
- list
- list-checks
- list-ordered
- loader-circle
- lock
- log-out · leave
- maximize
- menu
- message-square
- messages-square
- mic
- mic-off
- minus
- moon
- octagon-alert
- panel-left
- paperclip
- pause
- pencil
- pin
- plus
- quote
- record
- redo-2
- refresh-cw
- reply
- rocket
- rotate-ccw
- rotate-cw
- screen-share
- search
- send
- settings
- shield-check
- sliders
- smile
- smile-plus
- sort-asc
- sort-desc
- sparkle
- square · stop
- square-code
- square-pen
- star
- strikethrough
- table
- terminal
- text-quote
- thumbs-down
- thumbs-up
- trash
- triangle-alert
- type
- undo-2
- upload
- user
- user-plus
- users
- video
- video-off
- volleyball
- volume
- wifi-off
- wrap-text
- wrench
- x
- zoom-in
이름으로 고르기
데이터에 아이콘 이름을 문자열로 둘 때는 icons 맵을 씁니다. 화면 코드에서는 아이콘을 하나씩 import 합니다.
icons["ellipsis"]
크기
아이콘 크기는 옆 글자 크기와 짝을 맞춥니다. 기본값은 본문 14 와 짝인 16 입니다.
- 검색14 · 글자 12–13
- 검색16 · 글자 14
- 검색20 · 글자 16
- 검색24 · 글자 20 이상
쓰는 규칙
- 장식
- 글자 옆의 아이콘은 기본값 그대로 aria-hidden 입니다. 뜻은 글자가 말합니다.
- 아이콘만 있는 버튼
- IconButton 의 label 이 접근성 이름입니다. 빠뜨릴 수 없으며, 마우스 사용자를 위해 같은 이름의 툴팁을 붙입니다.
- 홀로 쓰는 아이콘
- 버튼이 아니면서 글자 없이 뜻을 전할 때만 title 을 줍니다. role="img" 와 이름이 붙습니다.
- 색
- 글자색을 따릅니다. 아이콘에만 색을 주지 않습니다. 오류와 되돌릴 수 없는 동작의 빨강만 예외입니다.
- 정렬
- 글자의 가운데 높이에 맞춥니다. 원과 화살표는 눈으로 보고 0.5px 보정합니다.
- 방향
- chevron-right 와 log-out 은 오른쪽이 앞입니다. 오른쪽에서 왼쪽으로 쓰는 언어는 지원하지 않습니다.
삭제
props
모든 아이콘이 같은 props 를 받습니다.
| prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
| size | number | string | 16 | 가로세로 크기입니다. 14 · 16 · 20 · 24 를 씁니다. |
| title | string | - | 주면 role="img" 와 <title> 을 aria-labelledby 로 잇습니다. 없으면 aria-hidden 입니다. |
| className | string | - | 기본 클래스 shrink-0 뒤에 붙습니다. |
| ...props | ComponentProps<"svg"> | - | 나머지는 svg 요소로 갑니다. data-slot 은 icon 입니다. |