Like

Usage

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

// ...

  <CarmoreIcon icon={'like'} ... />

// ...

variants Props

You can change the icon's appearance.

• (Click the icon to try it.)

fill

<CarmoreIcon icon={'like'} ... /> // Uses the default ('좋아요')
<CarmoreIcon icon={'like'} variants={'solid'} ... />
<CarmoreIcon icon={'like'} variants={'active'} ... />

Additional notes

Use the following CSS variable to customize the icon color when variants={'active'}.

• --carmore-icon-like-active

.like-icon-1 {
  ...
  --carmore-icon-like-active: orange;
}

.like-icon-2 {
  ...
  --carmore-icon-like-active: skyblue;
}

<CarmoreIcon className={'like-icon-1'} icon={'like'} variants={'active'} ... />
<CarmoreIcon className={'like-icon-2'} icon={'like'} variants={'active'} ... />

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={'like'} ... /> // Uses the default ('좋아요')
<CarmoreIcon icon={'like'} width={30} height={30} ... />
<CarmoreIcon icon={'like'} width={'48px'} height={'48px'} ... />
<CarmoreIcon icon={'like'} 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={'like'} className={'text-red'} ... />
<CarmoreIcon icon={'like'} className={'text-orange'} ... />
<CarmoreIcon icon={'like'} className={'text-green'}  ... />
<CarmoreIcon icon={'like'} className={'text-blue'}  ... />
<CarmoreIcon icon={'like'} className={'text-purple'}  ... />

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.)

<CarmoreIcon icon={'like'} ... /> // Uses the default ('좋아요')
<CarmoreIcon icon={'like'} aria-label={'Heart'} ... />
<CarmoreIcon icon={'like'} aria-label={'Empathize'} ... />