Skip to main content

CountryFlagCR


코스타리카

Usage​

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

// ...

  <CarmoreIcon icon={'country-flag-cr'} ... />

// ...


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={'country-flag-cr'} ... /> // Uses the default ('코스타리카')
<CarmoreIcon icon={'country-flag-cr'} width={30} height={30} ... />
<CarmoreIcon icon={'country-flag-cr'} width={'48px'} height={'48px'} ... />
<CarmoreIcon icon={'country-flag-cr'} width={'5rem'} height={'5rem'} ... />


Color guidance​

⚠️ This icon is a multi-colored flag SVG, so its colors do not change just by setting className or a text color.

  • To highlight it, use a surrounding background, border, or badge.


Accessibility (a11y)​

We recommend configuring attributes such as role and aria-label.

  • The default role is 'img'.
  • The default aria-label is '코스타리카'.
  • Base accessibility defaults are provided, and you can override them when needed.
  • (Hover the icon to check the tooltip.)
코스타리카Flag
<CarmoreIcon icon={'country-flag-cr'} ... /> // Uses the default ('코스타리카')
<CarmoreIcon icon={'country-flag-cr'} aria-label={'Flag'} ... />