본문으로 건너뛰기

ArrowRight


오른쪽으로

사용법​

import { CarmoreIcon } from '@o2-ui/carmore-icon';

// ...

  <CarmoreIcon icon={'arrow-right'} ... />

// ...


thin Props​

아이콘의 stroke 폭을 설정할 수 있습니다.

  • thin 의 기본값은 false 입니다.
오른쪽으로오른쪽으로
<CarmoreIcon icon={'arrow-right'} ... /> // 기본값(false) 적용
<CarmoreIcon icon={'arrow-right'} thin ... />


half Props​

아이콘의 기준 너비/높이 비율을 설정할 수 있습니다.

  • true 설정 시, 높이 대비 너비 비율이 절반으로 줄어듭니다.
    • width, height 설정 시, 유의해주세요.
  • thin 의 기본값은 false 입니다.
오른쪽으로오른쪽으로
<CarmoreIcon icon={'arrow-right'} ... /> // 기본값(false) 적용
<CarmoreIcon icon={'arrow-right'} half ... />


크기 설정​

아이콘의 크기는 width 와 height 속성으로 조절할 수 있습니다.

  • 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다.
    • (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.)
  • width 의 기본값은 '1.5rem' 입니다.
  • height 의 기본값은 '1.5rem' 입니다.
오른쪽으로오른쪽으로오른쪽으로오른쪽으로
<CarmoreIcon icon={'arrow-right'} ... /> // 기본값('1.5rem') 적용
<CarmoreIcon icon={'arrow-right'} width={30} height={30} ... />
<CarmoreIcon icon={'arrow-right'} width={'48px'} height={'48px'} ... />
<CarmoreIcon icon={'arrow-right'} width={'5rem'} height={'5rem'} ... />


색상 변경​

className을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다.

오른쪽으로오른쪽으로오른쪽으로오른쪽으로오른쪽으로
.text-red {
  color: red;
}

.text-orange {
  color: orange;
}

.text-green {
  color: green;
}

.text-blue {
  color: blue;
}

.text-purple {
  color: purple;
}
<CarmoreIcon icon={'arrow-right'} className={'text-red'} ... />
<CarmoreIcon icon={'arrow-right'} className={'text-orange'} ... />
<CarmoreIcon icon={'arrow-right'} className={'text-green'}  ... />
<CarmoreIcon icon={'arrow-right'} className={'text-blue'}  ... />
<CarmoreIcon icon={'arrow-right'} className={'text-purple'}  ... />


접근성 (a11y)​

role, aria-label 등의 속성을 설정하는 것을 권장합니다.

  • role 의 기본값은 'img' 입니다.
  • aria-label 의 기본값은 '오른쪽으로' 입니다.
  • 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다.
  • (아이콘에 마우스를 올려보세요.)
오른쪽으로화살표오른쪽 화살표
<CarmoreIcon icon={'arrow-right'} ... /> // 기본값('오른쪽으로') 적용
<CarmoreIcon icon={'arrow-right'} aria-label={'화살표'} ... />
<CarmoreIcon icon={'arrow-right'} aria-label={'오른쪽 화살표'} ... />