refactor: refactor icons from base icon

jest.config.js

@@ -8,5 +8,6 @@ module.exports = {
       lines: 80,
       statements: 80
     }
-  }
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 };

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package.json

@@ -43,10 +43,11 @@
         "@commitlint/cli": "^17.7.2",
         "@commitlint/config-conventional": "^17.7.0",
         "@mui/icons-material": "^5.15.11",
+        "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.1.2",
-        "@types/jest": "^29.5.11",
-        "@types/react": "^18.2.45",
-        "@types/react-dom": "^18.2.18",
+        "@types/jest": "^29.5.12",
+        "@types/react": "^18.3.1",
+        "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^6.12.0",
         "@typescript-eslint/parser": "^6.12.0",
         "commitizen": "^4.3.0",

src/__testing__/SistentIcon.test.tsx

@@ -0,0 +1,55 @@
+// SistentIcon.test.tsx
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { render, screen } from '@testing-library/react';
+import { DEFAULT_WHITE_FILL } from '../constants/constants';
+import SistentIcon from '../icons/SistentIcon';
+
+describe('SistentIcon', () => {
+  test('renders correctly with default props', () => {
+    render(<SistentIcon size="medium" width={32} height={32} />);
+    const iconElement = screen.getByRole('img');
+    expect(iconElement).toBeInTheDocument();
+    expect(iconElement).toHaveAttribute('width', 32);
+    expect(iconElement).toHaveAttribute('height', 32);
+    expect(iconElement).toHaveAttribute('fill', 'CHARCOAL_FILL');
+  });
+
+  test('renders correctly with custom props', () => {
+    render(
+      <SistentIcon
+        size="large"
+        fill="red"
+        stroke="blue"
+        strokeWidth={2}
+        viewBox="0 0 24 24"
+        data-testid="custom-icon"
+      >
+        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+      </SistentIcon>
+    );
+    const iconElement = screen.getByTestId('custom-icon');
+    expect(iconElement).toBeInTheDocument();
+    expect(iconElement).toHaveAttribute('width', '40');
+    expect(iconElement).toHaveAttribute('height', '40');
+    expect(iconElement).toHaveAttribute('fill', 'red');
+    expect(iconElement).toHaveAttribute('stroke', 'blue');
+    expect(iconElement).toHaveAttribute('stroke-width', '2');
+    expect(iconElement).toHaveAttribute('viewBox', '0 0 24 24');
+  });
+
+  test('renders correctly in dark mode', () => {
+    const darkTheme = createTheme({
+      palette: {
+        mode: 'dark'
+      }
+    });
+    render(
+      <ThemeProvider theme={darkTheme}>
+        <SistentIcon />
+      </ThemeProvider>
+    );
+    const iconElement = screen.getByRole('img');
+    expect(iconElement).toBeInTheDocument();
+    expect(iconElement).toHaveAttribute('fill', DEFAULT_WHITE_FILL);
+  });
+});

src/constants/constants.ts

@@ -1,8 +1,12 @@
+import { black, carribean, charcoal, keppel, white } from '../theme';
+
 export const DEFAULT_WIDTH = '24';
 export const DEFAULT_HEIGHT = '24';
-export const DEFAULT_FILL = '#000';
+export const DEFAULT_FILL = black.main;
 export const DEFAULT_FILL_NONE = 'none';
-export const KEPPEL_GREEN_FILL = '#00B39F';
-export const CARIBBEAN_GREEN_FILL = '#00D3A9';
-export const DEFAULT_STROKE = '#000';
+export const KEPPEL_GREEN_FILL = keppel[40];
+export const CARIBBEAN_GREEN_FILL = carribean[50];
+export const CHARCOAL_FILL = charcoal[40];
+export const DEFAULT_STROKE = black.main;
 export const DEFAULT_STROKE_WIDTH = '2';
+export const DEFAULT_WHITE_FILL = white.main;

src/icons/AddCircle/AddCircleIcon.tsx → src/icons/Add/AddCircleOutlineIcon.tsx

@@ -1,24 +1,20 @@
-import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import SistentIcon from '../SistentIcon';
 import { IconProps } from '../types';
 
-export const AddIconCircleBordered = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL_NONE,
-  ...props
-}: IconProps): JSX.Element => {
+function AddCircleOutline({ fill = 'none', ...props }: IconProps): React.JSX.Element {
   return (
-    <svg
-      width={width}
-      height={height}
+    <SistentIcon
+      size={props.size}
       viewBox="0 0 48 48"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path d="M0 0h48v48h-48z" fill={fill} />
       <path d="M26 14h-4v8h-8v4h8v8h4v-8h8v-4h-8v-8zm-2-10c-11.05 0-20 8.95-20 20s8.95 20 20 20 20-8.95 20-20-8.95-20-20-20zm0 36c-8.82 0-16-7.18-16-16s7.18-16 16-16 16 7.18 16 16-7.18 16-16 16z" />
-    </svg>
+    </SistentIcon>
   );
-};
+}
 
-export default AddIconCircleBordered;
+export default AddCircleOutline;
+
+export { AddCircleOutline };

src/icons/Add/AddIcon.tsx

@@ -1,25 +1,21 @@
-import { DEFAULT_FILL_NONE, DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import SistentIcon from '../SistentIcon';
 import { IconProps } from '../types';
 
-export const AddIcon = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  fill = DEFAULT_FILL_NONE,
-  ...props
-}: IconProps): JSX.Element => {
+function AddIcon({ fill = 'none', ...props }: IconProps): React.JSX.Element {
   return (
-    <svg
-      width={width}
-      height={height}
+    <SistentIcon
+      size={props.size}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
       data-testid="add-icon-svg"
       {...props}
     >
       <path d="M0 0h24v24H0z" fill={fill} />
       <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-    </svg>
+    </SistentIcon>
   );
-};
+}
 
 export default AddIcon;
+
+export { AddIcon };

src/icons/Add/index.ts

@@ -1 +1,2 @@
+export { default as AddCircleOutlineIcon } from './AddCircleOutlineIcon';
 export { default as AddIcon } from './AddIcon';