Skip to main content

HotelETC


오류알림

Deprecation Notice

This component is no longer available. Please use the component below instead.

etc(/docs/carmore-icon/icons/etc)

released version: 1.1.0

deprecated version: 1.4.0

확인사항

Usage​

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

// ...

  <CarmoreIcon icon={'hotel-etc'} ... />

// ...


Control size​

You can control the icon size with the width and height props.

  • Pass numbers directly, or strings with units such as 'px', 'rem', or '%'.
    • (The icon keeps its intrinsic aspect ratio and cannot be stretched.)
  • The default width is '1.5rem'.
  • The default height is '1.5rem'.
확인사항확인사항확인사항확인사항
<CarmoreIcon icon={'hotel-etc'} ... /> // Uses the default ('확인사항')
<CarmoreIcon icon={'hotel-etc'} width={30} height={30} ... />
<CarmoreIcon icon={'hotel-etc'} width={'48px'} height={'48px'} ... />
<CarmoreIcon icon={'hotel-etc'} width={'5rem'} height={'5rem'} ... />


Change color​

Set the text color via the className prop to recolor the icon.

확인사항확인사항확인사항확인사항확인사항
.text-red {
  color: red;
}

.text-orange {
  color: orange;
}

.text-green {
  color: green;
}

.text-blue {
  color: blue;
}

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


Accessibility (a11y)​

We recommend setting accessibility attributes such as role and aria-label.

  • The default role is 'img'.
  • The default aria-label is '확인사항'.
  • Accessibility defaults are provided, and you can customize them as needed.
  • (Hover the icon to see the tooltip.)
확인사항Review detailsCheckmark
<CarmoreIcon icon={'hotel-etc'} ... /> // Uses the default ('확인사항')
<CarmoreIcon icon={'hotel-etc'} aria-label={'Review details'} ... />
<CarmoreIcon icon={'hotel-etc'} aria-label={'Checkmark'} ... />