Remove Community Icon component

[airikej]

Problem

Solution

Examples and information

Project

[airikej]

Icon component migration guide

From old Icon → new Icon

This migration mainly introduces:

• A dedicated wrapper element when an icon has a background
• A new color system
• Stronger typing for size, background, and display
• Clear separation of “icon” vs “icon with background” use-cases

---

1. Color mapping

Old TextColor → New IconColor

Old color	New color
default	inherit
primary	brand
muted	secondary
subtle	tertiary
disabled	tertiary
inverted	white
positive	success
important	danger
warning	warning

Example:

// Before
<Icon name="check" color="positive" />

// After
<Icon name="check" color="success" />

---

2. Sizes

Old:

12 | 14 | 16 | 18 | 24 | 36 | 48

New:

8 | 12 | 16 | 18 | 24 | 36 | 48

14 was removed, 8 was added.

Replace:

// Before
<Icon size={14} />

// After
<Icon size={12} />  
// or size={16}, depending on visual intent

---

3. Display behavior

Old:

display?: 'block' | 'inline'

New:

• Without background → block | inline
• With background → always block

No change for most cases:

<Icon name="close" display="inline" />

---

4. Background support (new feature)

Previously backgrounds were handled externally.
Now they are first-class via the background prop:

background?: 'primary' | 'secondary' | 'brand-primary' | 'brand-secondary'

Example:

// Before (custom wrapper)
<div className="icon-bg">
  <Icon name="add" />
</div>

// After
<Icon name="add" background="primary" />

When background is provided:

• A wrapper <div> is rendered
• className is applied to the wrapper
• The icon is always circular and centered

---

5. className behavior change

Old:

className → always applied to the icon element

New:

If background is set:
  className → applied to wrapper
Else:
  className → applied to icon

This is important for hover, layout, and spacing styles.

---

6. Removed / changed props

Old prop / type	Status
TextColor	Replaced by IconColor
color="default"	Use inherit
size={14}	Removed (use 12 or 16)

---

7. Basic usage examples

Simple icon

// Before
<Icon name="close" />

// After
<Icon name="close" />

---

Colored icon

// Before
<Icon name="check" color="positive" />

// After
<Icon name="check" color="success" />

---

Inline icon

// Before
<Icon name="info" display="inline" />

// After
<Icon name="info" display="inline" />

---

Icon with background

// Before
<div className="round-bg">
  <Icon name="add" />
</div>

// After
<Icon name="add" background="primary" />

---

Filled icon

// Before
<Icon name="star" filled />

// After
<Icon name="star" filled />

---

8. Accessibility (unchanged)

<Icon name="close" label="Close dialog" />

• With label → exposed to screen readers
• Without label → aria-hidden="true"

---

Mental model change

Old:

“Icon is always a single span. Styling and backgrounds are external.”

New:

“Icon is either:

• a pure icon
• or an icon wrapped in a circular container when a background is needed.”

This makes interactive patterns (like your Collapse arrow) much easier and more consistent:

• Wrapper handles hover / active / focus visuals
• Icon handles glyph color and rotation