feat: color-icon component

src/assets/color-icon.tsx

@@ -0,0 +1,39 @@
+import { SizeProps, useSize } from './utils';
+import { useDarkMode } from '@atb/modules/theme';
+
+export type { SizeProps };
+
+export type ColorIconProps = JSX.IntrinsicElements['img'] & {
+  size?: SizeProps;
+  darkable?: boolean;
+};
+
+export function ColorIcon({
+  src,
+  size = 'normal',
+  darkable = false,
+  ...props
+}: ColorIconProps) {
+  const [isDarkMode] = useDarkMode();
+  const wh = useSize(size);
+
+  if (!darkable) {
+    const totalPath = `/assets/colors/icons/${src}`;
+    // eslint-disable-next-line
+    return <img width={wh} height={wh} src={totalPath} {...props} />;
+  } else {
+    const totalPath = `/assets/colors/icons/${specifyDarkOrLight(
+      src,
+      isDarkMode,
+    )}`;
+
+    // eslint-disable-next-line
+    return <img width={wh} height={wh} src={totalPath} {...props} />;
+  }
+}
+
+function specifyDarkOrLight(src: string | undefined, isDarkMode: boolean) {
+  const paths = src?.split('/') ?? [];
+  const darkModeString = isDarkMode ? 'dark' : 'light';
+  return [...paths.slice(0, -1), darkModeString, paths.slice(-1)].join('/');
+}

src/assets/utils.ts

@@ -0,0 +1,19 @@
+import { useTheme } from '@atb/modules/theme';
+
+export type SizeProps = 'small' | 'normal' | 'large' | 'x-large';
+
+export function useSize(size: SizeProps) {
+  const theme = useTheme();
+
+  switch (size) {
+    case 'small':
+      return theme.icon.size.small;
+    case 'normal':
+      return theme.icon.size.normal;
+    case 'large':
+      return theme.icon.size.large;
+    case 'x-large':
+      // @TODO This should in the design system at some point
+      return 40;
+  }
+}

src/utils/css.ts

@@ -0,0 +1,11 @@
+export function and(...classes: (string | undefined | false)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+export function andIf(classes: Record<string, boolean>): string {
+  return Object.entries(classes).reduce(function (acc, item) {
+    if (!item[1]) {
+      return acc;
+    }
+    return acc + ' ' + item[0];
+  }, '');
+}