본문으로 건너뛰기

Usage


스타일 임포트​

아이콘 컴포넌트의 기본 스타일을 적용하려면 프로젝트의 진입점(src/main.tsx 또는 src/index.tsx)에 CSS 파일을 불러와야 합니다.

// src/main.tsx

import '@o2-ui/carmore-icon/index.css';

또는 프로젝트의 전역 스타일(Global CSS)에도 포함할 수 있습니다. 이 경우 별도의 엔트리 포인트에서 불러오지 않아도, 전역으로 아이콘 스타일이 적용됩니다.

/* src/styles/global.css */

@import '@o2-ui/carmore-icon/index.css';

Tailwind 환경​

Tailwind를 사용할 때는 아이콘 CSS를 @tailwind 지시문 앞쪽에 배치해야 합니다. 이렇게 하면 Tailwind의 유틸리티 클래스를 사용해, 아이콘의 색상, 크기 등을 자유롭게 커스터마이징할 수 있습니다.

/* src/styles/globals.css */

/* 아이콘 기본 스타일 */
@import '@o2-ui/carmore-icon/index.css';

@tailwind base;
@tailwind components;
@tailwind utilities;


전역 기본값 설정​

! 모든 아이콘은 o2-ui-carmore-icon- 로 시작하는 class 이름을 가지고 있습니다.

전역 스타일(Global CSS)에 아래와 같은 설정을 추가하면, 모든 아이콘의 기본 색상 등을 한 번에 설정할 수 있습니다.

/* src/styles/global.css */

[class^='o2-ui-carmore-icon-'] {
  color: #999; /* 아이콘 기본색 */
}

.dark [class^='o2-ui-carmore-icon-'] {
  color: #ddd; /* 다크모드 대응 */
}


크기 설정​

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

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


색상 설정​

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

  • 기본 색상은 프로젝트의 전역 CSS 설정에 따라 결정됩니다.
  • 일부 아이콘은 색상 변경이 제한될 수 있으므로, 해당 아이콘의 상세 페이지를 참고해야 합니다.
확인하기확인하기확인하기확인하기확인하기
.text-red {
  color: red;
}

.text-orange {
  color: orange;
}

.text-green {
  color: green;
}

.text-blue {
  color: blue;
}

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


접근성 (a11y)​

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

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