OV-13: + add icon converter and update sidebar icons

BinaryStudioAcademy · Aug 30, 2024 · 14e3bfa · 14e3bfa
1 parent 73a83ae
commit 14e3bfa
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/frontend/src/bundles/common/components/sidebar/sidebar.tsx b/frontend/src/bundles/common/components/sidebar/sidebar.tsx
@@ -1,5 +1,3 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
 import {
     Box,
     Flex,
@@ -85,8 +83,7 @@ const Sidebar = ({ children }: Properties): JSX.Element => {
                             bg={activeButtonPage(AppRoute.ROOT)}
                             icon={
                                 <Icon
-                                    as={FontAwesomeIcon}
-                                    icon={IconName.HOME}
+                                    as={IconName.HOME}
                                     boxSize={5}
                                     color={activeIconPage(AppRoute.ROOT)}
                                 />
@@ -101,8 +98,7 @@ const Sidebar = ({ children }: Properties): JSX.Element => {
                     color="brand.secondary.600"
                     icon={
                         <Icon
-                            as={FontAwesomeIcon}
-                            icon={IconName.LOG_OUT}
+                            as={IconName.LOG_OUT}
                             boxSize={5}
                             color="brand.secondary.600"
                         />

diff --git a/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts b/frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts
@@ -0,0 +1,8 @@
+import { faHouse, faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
+
+import { iconConverter } from './icon-converter.helper.js';
+
+const HouseIcon = iconConverter(faHouse);
+const RightFromBracketIcon = iconConverter(faRightFromBracket);
+
+export { HouseIcon, RightFromBracketIcon };
diff --git a/frontend/src/bundles/common/icons/helper/icon-converter.helper.ts b/frontend/src/bundles/common/icons/helper/icon-converter.helper.ts
@@ -0,0 +1,20 @@
+import {
+    type ComponentWithAs,
+    type IconProps,
+    createIcon,
+} from '@chakra-ui/react';
+import { type IconDefinition } from '@fortawesome/free-solid-svg-icons';
+
+const iconConverter = (
+    faIcon: IconDefinition,
+): ComponentWithAs<'svg', IconProps> => {
+    const { icon, iconName } = faIcon;
+
+    return createIcon({
+        displayName: iconName,
+        viewBox: `0 0 ${icon[0]} ${icon[1]}`,
+        d: `${icon[4]}`,
+    });
+};
+
+export { iconConverter };
diff --git a/frontend/src/bundles/common/icons/icon-name.ts b/frontend/src/bundles/common/icons/icon-name.ts
@@ -1,14 +1,14 @@
 import { ArrowLeftIcon, ArrowRightIcon } from '@chakra-ui/icons';
+import { faEllipsisVertical, faPen } from '@fortawesome/free-solid-svg-icons';
+
 import {
-    faEllipsisVertical,
-    faHouse,
-    faPen,
-    faRightFromBracket,
-} from '@fortawesome/free-solid-svg-icons';
+    HouseIcon,
+    RightFromBracketIcon,
+} from './helper/icon-conversion.helper.js';
 
 const IconName = {
-    HOME: faHouse,
-    LOG_OUT: faRightFromBracket,
+    HOME: HouseIcon,
+    LOG_OUT: RightFromBracketIcon,
     ARROW_LEFT: ArrowLeftIcon,
     ARROW_RIGHT: ArrowRightIcon,
     OPTIONS_VERTICAL: faEllipsisVertical,