refactor: Consolidate icon imports across components and streamline import statements for improved readability

src/app/components/icons/style.css.ts

@@ -0,0 +1,25 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { config } from 'folds';
+
+export const Icon = recipe({
+  base: {
+    display: 'inline-block',
+    flexShrink: 0,
+    verticalAlign: 'middle',
+  },
+  variants: {
+    size: {
+      '50': { width: config.size.X50, height: config.size.X50 },
+      '100': { width: config.size.X100, height: config.size.X100 },
+      '200': { width: config.size.X200, height: config.size.X200 },
+      '300': { width: config.size.X300, height: config.size.X300 },
+      '400': { width: config.size.X400, height: config.size.X400 },
+      '500': { width: config.size.X500, height: config.size.X500 },
+      '600': { width: config.size.X600, height: config.size.X600 },
+      Inherit: { width: '1em', height: '1em' },
+    },
+  },
+  defaultVariants: {
+    size: '400',
+  },
+});