본문으로 건너뛰기

PinMap


위치보기

사용법​

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

// ...

  <CarmoreIcon icon={'pin-map'} ... />

// ...


크기 설정​

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

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


접근성 (a11y)​

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

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