fix(Icon): rename from IconContainer (#554)

Author: tenphi

.changeset/gold-buckets-jump.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Rename IconContainer -> Icon.

src/icons/IconContainer.tsx renamed to 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={

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];
 

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';

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;
 }