본문으로 건너뛰기

StarSingle


별

사용법​

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

// ...

  <CarmoreIcon icon={'star-single'} ... />

// ...


크기 설정​

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

  • 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다.
    • (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.)
  • width 의 기본값은 '1.5rem' 입니다.
  • height 의 기본값은 '1.5rem' 입니다.
별별별별
<CarmoreIcon icon={'star-single'} ... /> // 기본값('1.5rem') 적용
<CarmoreIcon icon={'star-single'} width={30} height={30} ... />
<CarmoreIcon icon={'star-single'} width={'48px'} height={'48px'} ... />
<CarmoreIcon icon={'star-single'} 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={'star-single'} className={'text-red'} ... />
<CarmoreIcon icon={'star-single'} className={'text-orange'} ... />
<CarmoreIcon icon={'star-single'} className={'text-green'}  ... />
<CarmoreIcon icon={'star-single'} className={'text-blue'}  ... />
<CarmoreIcon icon={'star-single'} className={'text-purple'}  ... />


접근성 (a11y)​

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

  • role 의 기본값은 'img' 입니다.
  • aria-label 의 기본값은 '별' 입니다.
  • 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다.
  • (아이콘에 마우스를 올려보세요.)
별별점즐겨찾기
<CarmoreIcon icon={'star-single'} ... /> // 기본값('별') 적용
<CarmoreIcon icon={'star-single'} aria-label={'별점'} ... />
<CarmoreIcon icon={'star-single'} aria-label={'즐겨찾기'} ... />