Skip to main content

VehicleYear


released version: 1.4.0

차량 연식

Usage​

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

// ...

  <CarmoreIcon icon={'vehicle-year'} ... />

// ...


Size​

Adjust the icon size with the width and height props.

  • Pass numbers directly, or strings that include units such as 'px', 'rem', or '%'.
    • (The original aspect ratio is fixed and cannot be changed.)
  • The default width is '1.5rem'.
  • The default height is '1.5rem'.
차량 연식차량 연식차량 연식차량 연식
<CarmoreIcon icon={'vehicle-year'} ... /> // Uses the default ('1.5rem')
<CarmoreIcon icon={'vehicle-year'} width={30} height={30} ... />
<CarmoreIcon icon={'vehicle-year'} width={'48px'} height={'48px'} ... />
<CarmoreIcon icon={'vehicle-year'} width={'5rem'} height={'5rem'} ... />


VehicleYear​

Set className with a text vehicle-year to change the icon vehicle-year.

차량 연식차량 연식차량 연식차량 연식차량 연식
.text-red {
  vehicle-year: red;
}

.text-orange {
  vehicle-year: orange;
}

.text-green {
  vehicle-year: green;
}

.text-blue {
  vehicle-year: blue;
}

.text-purple {
  vehicle-year: purple;
}
<CarmoreIcon icon={'vehicle-year'} className={'text-red'} ... />
<CarmoreIcon icon={'vehicle-year'} className={'text-orange'} ... />
<CarmoreIcon icon={'vehicle-year'} className={'text-green'}  ... />
<CarmoreIcon icon={'vehicle-year'} className={'text-blue'}  ... />
<CarmoreIcon icon={'vehicle-year'} 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 '연식'.
  • Default accessibility props are provided, and you can customize them as needed.
  • (Hover over the icon.)
차량 연식Model yearVintage
<CarmoreIcon icon={'vehicle-year'} ... /> // Uses the default ('연식')
<CarmoreIcon icon={'vehicle-year'} aria-label={'Model year'} ... />
<CarmoreIcon icon={'vehicle-year'} aria-label={'Vintage'} ... />