- SNS
- Profile
- Survey
- ColorPicker
- Shopping
- Login
- TodoList
- CustomerService
- Getting Started
- Introduction
- Installation
- FORM
- Button
- CheckBox
- Input
- RadioButton
- Textarea
- Select
- DropDown
- AutoComplete
- ColorPicker
- Switch
- Data Display
- Card
- Carousel
- Calendar
- Avatar
- Icon
- ProgressBar
- InfiniteScroll
- ImageUpload
- Badge
- Tooltip
- Rating
- Map
- DataTable
- Feedback
- Spinner
- Toast
- Skeleton
- Modal
- FormValidation
- Navigation
- Pagination
- Drawer
- Navbar
- BreadCrumb
1. Icon
Icon 컴포넌트는 다양한 SVG 아이콘을 폰트로 사용하여 웹 에서 손쉽게 아이콘을 추가할 수 있게 해줍니다.
이 컴포넌트는 아이콘의 크기, 색상, 추가적인 클래스 이름을 통해 스타일링할 수 있습니다.
1.1. Import
import Icon from '@components/Icon';1.2. Usage
기본 사용 예제는 아래와 같습니다:
import Icon from '@components/Icon';
function Example() {
return (
<Icon name="icon-home" />
);
}
export default Example;2. Size
size prop을 이용하여 아이콘의 크기를 설정할 수 있습니다. 기본값은 16입니다.
import Icon from '@components/Icon';
function Example() {
return (
<>
<Icon name="icon-star" size={16} />
<Icon name="icon-star" size={24} />
<Icon name="icon-star" size={32} />
</>
);
}
export default Example;3. Color
color prop을 이용하여 아이콘의 색상을 설정할 수 있습니다. 기본값은 currentColor입니다.
import Icon from '@components/Icon';
function Example() {
return (
<>
<Icon name="icon-heart" color="red" />
<Icon name="icon-heart" color="green" />
<Icon name="icon-heart" color="blue" />
</>
);
}
export default Example;4. All Icons
아래는 모든 아이콘을 표시한 예제입니다.
icon-login
icon-logout
icon-qr
icon-reload
icon-star
icon-undo
icon-bell
icon-bell-off
icon-bell-ring
icon-call
icon-camera
icon-code
icon-download
icon-error
icon-heart
icon-help
icon-home
icon-image
icon-info
icon-web
icon-mail
icon-map
icon-menu
icon-pin
icon-refresh
icon-setting
icon-share
icon-user
icon-video
icon-docs
icon-check
icon-search
icon-docs2
icon-github
icon-blog
icon-comment
icon-lock
icon-unlock
icon-bin
icon-clip
icon-emptyBookmark
icon-bookmark
icon-pencil
icon-pen
icon-music
icon-wifi
icon-sun
icon-moon
icon-play
icon-pause
icon-plus
icon-minus
icon-close
icon-arrowUp
icon-arrowDown
icon-emptyHeart
icon-heart
icon-next
icon-prev
icon-up
icon-down
icon-github2
icon-facebook
icon-twitter
icon-linkedin
icon-line
icon-instagram
5. Props
Icon 컴포넌트는 아래와 같은 Props를 가집니다:
| Prop | Description | Type | Default |
|---|---|---|---|
name | 사용할 아이콘의 이름을 지정합니다. | IconName | 필수 |
size | 아이콘의 크기를 설정합니다. (픽셀 단위) | number | 16 |
color | 아이콘의 색상을 설정합니다. | string | currentColor |
className | 추가적인 스타일링을 위한 클래스 이름을 지정합니다. | string | "" |
6. Example with Button
아이콘을 포함한 버튼의 예제입니다:
import { Button } from '@components/Button';
function Example() {
return (
<>
<Button
icon="icon-home"
color="secondary"
iconSize="small"
size="small"
>
Home small
</Button>
<Button icon="icon-docs" color="warning" iconSize="medium">
Docs
</Button>
</>
);
}
export default Example;7. 버튼에 대해 더 자세히 알고 싶다면?
Button 컴포넌트에 대한 자세한 설명은 아래의 버튼을 클릭하면 이동합니다.
On This Page