CountryFlagSE
released version: 1.0.0
Usage
import { CarmoreIcon } from '@o2-ui/carmore-icon';
// ...
<CarmoreIcon icon={'country-flag-se'} ... />
// ...
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
widthis '1.5rem'. - The default
heightis '1.5rem'.
<CarmoreIcon icon={'country-flag-se'} ... /> // Uses the default ('스웨덴')
<CarmoreIcon icon={'country-flag-se'} width={30} height={30} ... />
<CarmoreIcon icon={'country-flag-se'} width={'48px'} height={'48px'} ... />
<CarmoreIcon icon={'country-flag-se'} width={'5rem'} height={'5rem'} ... />
Color guidance
⚠️ This icon is a multi-colored flag SVG, so its colors do not change just by setting
classNameor 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
roleis 'img'. - The default
aria-labelis '스웨덴'. - Base accessibility defaults are provided, and you can override them when needed.
- (Hover the icon to check the tooltip.)
<CarmoreIcon icon={'country-flag-se'} ... /> // Uses the default ('스웨덴')
<CarmoreIcon icon={'country-flag-se'} aria-label={'Flag'} ... />