From 4c47412d68364fc2f6f19a7df4503c6823102745 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Fri, 20 Dec 2024 14:50:11 +0100
Subject: [PATCH] fix(Icon): rename from IconContainer (#554)

---
 .changeset/gold-buckets-jump.md           |  5 +++++
 src/icons/{IconContainer.tsx => Icon.tsx} | 10 +++++++---
 src/icons/Icons.stories.tsx               | 10 ++++------
 src/icons/index.ts                        |  4 ++--
 src/icons/wrap-icon.tsx                   | 12 ++++++------
 5 files changed, 24 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/gold-buckets-jump.md
 rename src/icons/{IconContainer.tsx => Icon.tsx} (78%)

diff --git a/.changeset/gold-buckets-jump.md b/.changeset/gold-buckets-jump.md
new file mode 100644
index 00000000..9c66bc17
--- /dev/null
+++ b/.changeset/gold-buckets-jump.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Rename IconContainer -> Icon.
diff --git a/src/icons/IconContainer.tsx b/src/icons/Icon.tsx
similarity index 78%
rename from src/icons/IconContainer.tsx
rename to src/icons/Icon.tsx
index 46eb7005..0ee83f0b 100644
--- a/src/icons/IconContainer.tsx
+++ b/src/icons/Icon.tsx
@@ -12,7 +12,7 @@ import {
   tasty,
 } from '../tasty';
 
-const IconContainerElement = tasty({
+const IconElement = tasty({
   as: 'span',
   styles: {
     display: 'inline-grid',
@@ -21,6 +21,10 @@ const IconContainerElement = tasty({
     width: '1em 1em',
     height: 'min 1em',
     fontSize: 'var(--icon-size, var(--font-size))',
+    textAlign: 'center',
+    textTransform: 'none',
+    textRendering: 'optimizeLegibility',
+    '-webkit-font-smoothing': 'antialiased',
 
     '& svg': {
       width: '1em 1em',
@@ -38,11 +42,11 @@ export interface CubeIconProps
   size?: Styles['fontSize'];
 }
 
-export const IconContainer = memo(function IconContainer(props: CubeIconProps) {
+export const Icon = memo(function Icon(props: CubeIconProps) {
   const { size, ...rest } = props;
 
   return (
-    <IconContainerElement
+    <IconElement
       qa="Icon"
       {...rest}
       styles={
diff --git a/src/icons/Icons.stories.tsx b/src/icons/Icons.stories.tsx
index 9fb8e34d..6d3b2d19 100644
--- a/src/icons/Icons.stories.tsx
+++ b/src/icons/Icons.stories.tsx
@@ -6,13 +6,13 @@ import { Space } from '../components/layout/Space';
 import { Title } from '../components/content/Title';
 import { Flow } from '../components/layout/Flow';
 
-import { CubeIconProps, IconContainer } from './IconContainer';
+import { CubeIconProps, Icon } from './Icon';
 
 import * as Icons from './index';
 
 export default {
   title: 'Content/Icons',
-  component: IconContainer,
+  component: Icon,
   parameters: {
     controls: {
       exclude: baseProps,
@@ -26,8 +26,7 @@ const Template: StoryFn<CubeIconProps> = (name) => {
       <Title>16px</Title>
       <Grid columns="repeat(auto-fit, 200px)" flow="row" gap="16px">
         {Object.keys(Icons).map((iconName) => {
-          if (iconName === 'IconContainer' || iconName === 'wrapIcon')
-            return null;
+          if (iconName === 'Icon' || iconName === 'wrapIcon') return null;
 
           const Icon = Icons[iconName];
 
@@ -42,8 +41,7 @@ const Template: StoryFn<CubeIconProps> = (name) => {
       <Title>32px</Title>
       <Grid columns="repeat(auto-fit, 200px)" flow="row" gap="16px">
         {Object.keys(Icons).map((iconName) => {
-          if (iconName === 'IconContainer' || iconName === 'wrapIcon')
-            return null;
+          if (iconName === 'Icon' || iconName === 'wrapIcon') return null;
 
           const Icon = Icons[iconName];
 
diff --git a/src/icons/index.ts b/src/icons/index.ts
index d5d91bec..18516242 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -79,5 +79,5 @@ export { WarningFilledIcon } from './WarningFilledIcon';
 export { WarningIcon } from './WarningIcon';
 export { wrapIcon } from './wrap-icon';
 
-export { IconContainer } from './IconContainer';
-export type { CubeIconProps } from './IconContainer';
+export { Icon } from './Icon';
+export type { CubeIconProps } from './Icon';
diff --git a/src/icons/wrap-icon.tsx b/src/icons/wrap-icon.tsx
index 1c1621fe..b10d464f 100644
--- a/src/icons/wrap-icon.tsx
+++ b/src/icons/wrap-icon.tsx
@@ -1,17 +1,17 @@
 import { ReactNode } from 'react';
 
-import { CubeIconProps, IconContainer } from './IconContainer';
+import { CubeIconProps, Icon } from './Icon';
 
 export function wrapIcon(name: string, icon: ReactNode) {
-  function Icon(props: CubeIconProps) {
+  function IconWrapper(props: CubeIconProps) {
     return (
-      <IconContainer qa={name} aria-hidden="true" {...props}>
+      <Icon qa={name} aria-hidden="true" {...props}>
         {icon}
-      </IconContainer>
+      </Icon>
     );
   }
 
-  Icon.displayName = name;
+  IconWrapper.displayName = name;
 
-  return Icon;
+  return IconWrapper;
 }