feat(alpha-icon): implement

Author: sungik-choi

packages/bezier-react/src/components/AlphaIcon/Icon.module.scss

@@ -0,0 +1,25 @@
+@use '../../styles/mixins/dimension';
+
+$size-map: (
+  xxxs: 10,
+  xxs: 12,
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 36,
+  xl: 44,
+);
+
+.Icon {
+  --b-icon-color: initial;
+
+  flex: 0 0 auto;
+  color: var(--b-icon-color);
+  transition: color var(--transition-s);
+
+  @each $size, $value in $size-map {
+    &:where(.size-#{$size}) {
+      @include dimension.square(#{$value}px);
+    }
+  }
+}

packages/bezier-react/src/components/AlphaIcon/Icon.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { forwardRef, memo } from 'react'
+import * as React from 'react'
+
+import classNames from 'classnames'
+
+import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'
+import { alphaColorTokenCssVar } from '~/src/utils/style'
+
+import { type IconProps } from './Icon.types'
+
+import styles from './Icon.module.scss'
+
+export const ICON_TEST_ID = 'bezier-alpha-icon'
+
+export const Icon = memo(
+  forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {
+    const [marginProps, marginRest] = splitByMarginProps(props)
+    const marginStyles = getMarginStyles(marginProps)
+
+    const {
+      className,
+      size = 'm',
+      color,
+      source: SourceElement,
+      style,
+      ...rest
+    } = marginRest
+
+    return (
+      <SourceElement
+        ref={forwardedRef}
+        style={
+          {
+            '--b-icon-color': alphaColorTokenCssVar(color),
+            ...marginStyles.style,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={classNames(
+          styles.Icon,
+          styles[`size-${size}`],
+          marginStyles.className,
+          className
+        )}
+        data-testid={ICON_TEST_ID}
+        {...rest}
+      />
+    )
+  })
+)

packages/bezier-react/src/components/AlphaIcon/Icon.types.ts

@@ -0,0 +1,35 @@
+import { type BezierIcon } from '@channel.io/bezier-icons'
+
+import type { FunctionalColor, SemanticColor } from '~/src/types/alpha-tokens'
+import {
+  type BezierComponentProps,
+  type MarginProps,
+  type SizeProps,
+} from '~/src/types/props'
+
+export type IconSize = 'xs' | 's' | 'm' | 'l' | 'xl'
+
+interface IconOwnProps {
+  /**
+   * Controls which icon should be rendered.
+   * Inject the icon component from the `@channel.io/bezier-icons` package into this prop.
+   * @example
+   * ```tsx
+   * import { HeartFilledIcon } from '@channel.io/bezier-icons'
+   * import { Icon } from '@channel.io/bezier-react'
+   *
+   * <Icon source={HeartFilledIcon} {...} />
+   * ```
+   */
+  source: BezierIcon
+  /**
+   * Color from the design system's functional or semantic color.
+   */
+  color?: FunctionalColor | SemanticColor
+}
+
+export interface IconProps
+  extends Omit<BezierComponentProps<'svg'>, keyof IconOwnProps>,
+    MarginProps,
+    SizeProps<IconSize>,
+    IconOwnProps {}

packages/bezier-react/src/components/AlphaIcon/index.ts

@@ -0,0 +1,5 @@
+export { Icon as AlphaIcon } from './Icon'
+export type {
+  IconProps as AlphaIconProps,
+  IconSize as AlphaIconSize,
+} from './Icon.types'

packages/bezier-react/src/utils/style.ts

@@ -1,3 +1,4 @@
+import type * as AlphaTokens from '~/src/types/alpha-tokens'
 import { type FlattenAllToken } from '~/src/types/tokens'
 import { isNil, isString } from '~/src/utils/type'
 
@@ -59,3 +60,18 @@ export function tokenCssVar<PropertyName extends FlattenAllToken | undefined>(
 export function cssUrl(url?: string) {
   return isNil(url) ? undefined : `url(${url})`
 }
+
+/**
+ * TODO: (@ed) Implement
+ */
+export function alphaTokenCssVar<
+  PropertyName extends AlphaTokens.FlattenAllToken | undefined,
+>(propertyName: PropertyName) {
+  return cssVar(propertyName)
+}
+
+export function alphaColorTokenCssVar<
+  PropertyName extends AlphaTokens.BaseSemanticColor | undefined,
+>(propertyName: PropertyName) {
+  return cssVar(`alpha-color-${propertyName}`)
+}