Merge pull request #369 from EscolaLMS/feature/react-icons-fix

react icons fix
EscolaLMS · Feb 26, 2025 · 26a4991 · 26a4991
2 parents 561ecc7 + 14bbee5
commit 26a4991
Show file tree

Hide file tree

Showing 16 changed files with 229 additions and 57 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,4 +6,5 @@ yarn-error.log
 lib
 .idea
 *.config.js
-.eslintrc.js
+.eslintrc.js
+*.d.ts
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ docs
 yarn-error.log
 lib
 .idea
-.DS_Store
+.DS_Store
+*.d.ts
diff --git a/package.json b/package.json
@@ -78,7 +78,6 @@
     "react-dropdown": "^1.11.0",
     "react-grid-system": "^8.1.9",
     "react-i18next": "^12.2.0",
-    "react-icons": "^4.8.0",
     "react-markdown": "^8.0.7",
     "react-pdf": "^7.7.1",
     "react-photoswipe-gallery": "^2.2.7",

diff --git a/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx b/src/components/atoms/BreadCrumbs/BreadCrumbs.tsx
@@ -73,7 +73,7 @@ export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({
     >
       <ul>
         {items.map((node, i) => (
-          <React.Fragment key={i}>
+          <React.Fragment key={`breadcrumb-${getUniqueId(String(node))}-${i}`}>
             <li itemScope itemType="http://data-vocabulary.org/Breadcrumb">
               {node}
             </li>

diff --git a/src/components/atoms/Icon/_components/IconsDictionary.tsx b/src/components/atoms/Icon/_components/IconsDictionary.tsx
@@ -170,15 +170,28 @@ const Edit: React.FC = () => (
 
 const EditAll: React.FC = () => (
   <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    viewBox="0 0 24 24"
   >
-    <path
-      d="m14.776 18.689 7.012-7.012c.133-.133.217-.329.217-.532 0-.179-.065-.363-.218-.515l-2.423-2.415c-.144-.143-.333-.215-.522-.215s-.378.072-.523.215l-7.027 6.996c-.442 1.371-1.158 3.586-1.265 3.952-.125.433.199.834.573.834.41 0 .696-.099 4.176-1.308zm-2.258-2.392 1.17 1.171c-.704.232-1.275.418-1.729.566zm.968-1.154 5.356-5.331 1.347 1.342-5.346 5.347zm-4.486-1.393c0-.402-.356-.75-.75-.75-2.561 0-2.939 0-5.5 0-.394 0-.75.348-.75.75s.356.75.75.75h5.5c.394 0 .75-.348.75-.75zm5-3c0-.402-.356-.75-.75-.75-2.561 0-7.939 0-10.5 0-.394 0-.75.348-.75.75s.356.75.75.75h10.5c.394 0 .75-.348.75-.75zm0-3c0-.402-.356-.75-.75-.75-2.561 0-7.939 0-10.5 0-.394 0-.75.348-.75.75s.356.75.75.75h10.5c.394 0 .75-.348.75-.75zm0-3c0-.402-.356-.75-.75-.75-2.561 0-7.939 0-10.5 0-.394 0-.75.348-.75.75s.356.75.75.75h10.5c.394 0 .75-.348.75-.75z"
-      fill="currentColor"
-    />
+    <defs>
+      <clipPath id="clip-Artboard_1">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+    <g
+      id="Artboard_1"
+      data-name="Artboard – 1"
+      clip-path="url(#clip-Artboard_1)"
+    >
+      <path
+        id="edit_note"
+        d="M161.059-789.413a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.025,1.025,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h5.293a1.024,1.024,0,0,1,.754.3,1.025,1.025,0,0,1,.3.754,1.024,1.024,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Zm0-4.235a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.024,1.024,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h9.528a1.024,1.024,0,0,1,.754.3,1.024,1.024,0,0,1,.3.754,1.024,1.024,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Zm0-4.235a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.024,1.024,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h9.528a1.024,1.024,0,0,1,.754.3,1.024,1.024,0,0,1,.3.754,1.025,1.025,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Zm8.469,13.763v-1.747a1.094,1.094,0,0,1,.079-.41,1.057,1.057,0,0,1,.238-.357l5.532-5.505a1.442,1.442,0,0,1,.529-.344,1.693,1.693,0,0,1,.582-.106,1.594,1.594,0,0,1,.609.119,1.607,1.607,0,0,1,.529.357l.979.979a1.841,1.841,0,0,1,.331.529,1.527,1.527,0,0,1,.119.582,1.806,1.806,0,0,1-.106.6,1.42,1.42,0,0,1-.344.543l-5.505,5.505a1.056,1.056,0,0,1-.357.238,1.094,1.094,0,0,1-.41.079h-1.747a1.024,1.024,0,0,1-.754-.3A1.024,1.024,0,0,1,169.528-784.12Zm7.94-5.9-.979-.979Zm-6.352,5.373h1.006l3.2-3.229-.476-.5-.5-.476-3.229,3.2Zm3.732-3.732-.5-.476.979.979Z"
+        transform="translate(-157.528 803.531)"
+        fill="currentColor"
+      />
+    </g>
   </svg>
 );
 
@@ -264,6 +277,159 @@ const Bookmark: React.FC = () => (
   </svg>
 );
 
+const More: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 -960 960 960"
+    width="24px"
+    fill="currentColor"
+  >
+    <path
+      fill="currentColor"
+      d="M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z"
+    />
+  </svg>
+);
+
+const Delete: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="18px"
+    viewBox="0 -960 960 960"
+    width="18px"
+    fill="currentColor"
+  >
+    <path d="M280-120q-33 0-56.5-23.5T200-200v-520q-17 0-28.5-11.5T160-760q0-17 11.5-28.5T200-800h160q0-17 11.5-28.5T400-840h160q17 0 28.5 11.5T600-800h160q17 0 28.5 11.5T800-760q0 17-11.5 28.5T760-720v520q0 33-23.5 56.5T680-120H280Zm200-284 76 76q11 11 28 11t28-11q11-11 11-28t-11-28l-76-76 76-76q11-11 11-28t-11-28q-11-11-28-11t-28 11l-76 76-76-76q-11-11-28-11t-28 11q-11 11-11 28t11 28l76 76-76 76q-11 11-11 28t11 28q11 11 28 11t28-11l76-76Z" />
+  </svg>
+);
+
+const List: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="18px"
+    viewBox="0 -960 960 960"
+    width="18px"
+    fill="currentColor"
+  >
+    <path d="M400-200q-17 0-28.5-11.5T360-240q0-17 11.5-28.5T400-280h400q17 0 28.5 11.5T840-240q0 17-11.5 28.5T800-200H400Zm0-240q-17 0-28.5-11.5T360-480q0-17 11.5-28.5T400-520h400q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440H400Zm0-240q-17 0-28.5-11.5T360-720q0-17 11.5-28.5T400-760h400q17 0 28.5 11.5T840-720q0 17-11.5 28.5T800-680H400ZM200-160q-33 0-56.5-23.5T120-240q0-33 23.5-56.5T200-320q33 0 56.5 23.5T280-240q0 33-23.5 56.5T200-160Zm0-240q-33 0-56.5-23.5T120-480q0-33 23.5-56.5T200-560q33 0 56.5 23.5T280-480q0 33-23.5 56.5T200-400Zm0-240q-33 0-56.5-23.5T120-720q0-33 23.5-56.5T200-800q33 0 56.5 23.5T280-720q0 33-23.5 56.5T200-640Z" />
+  </svg>
+);
+
+const ListCheck: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    viewBox="0 0 24 24"
+  >
+    <defs>
+      <clipPath id="clip-Artboard_4">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+    <g
+      id="Artboard_4"
+      data-name="Artboard – 4"
+      clip-path="url(#clip-Artboard_4)"
+    >
+      <path
+        id="edit_note"
+        d="M161.059-789.413a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.025,1.025,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h5.293a1.024,1.024,0,0,1,.754.3,1.025,1.025,0,0,1,.3.754,1.024,1.024,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Zm0-4.235a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.024,1.024,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h9.528a1.024,1.024,0,0,1,.754.3,1.024,1.024,0,0,1,.3.754,1.024,1.024,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Zm0-4.235a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.024,1.024,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h9.528a1.024,1.024,0,0,1,.754.3,1.024,1.024,0,0,1,.3.754,1.025,1.025,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Z"
+        transform="translate(-157.528 803.531)"
+        fill="currentColor"
+      />
+      <path
+        id="Subtraction_4"
+        data-name="Subtraction 4"
+        d="M1217-12292a5,5,0,0,1-5-5,5.006,5.006,0,0,1,5-5,5.008,5.008,0,0,1,5,5A5.005,5.005,0,0,1,1217-12292Zm-2.276-5.739a.744.744,0,0,0-.539.229.743.743,0,0,0-.211.536.741.741,0,0,0,.229.523l1.822,1.769a.748.748,0,0,0,.522.21h.031a.759.759,0,0,0,.534-.256l2.732-3.118a.742.742,0,0,0,.183-.542.744.744,0,0,0-.254-.515.752.752,0,0,0-.494-.185.755.755,0,0,0-.565.253l-2.211,2.525-1.257-1.217A.746.746,0,0,0,1214.722-12297.74Z"
+        transform="translate(-1199 12313)"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+const ListAdd: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    viewBox="0 0 24 24"
+  >
+    <defs>
+      <clipPath id="clip-Artboard_2">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+    <g
+      id="Artboard_2"
+      data-name="Artboard – 2"
+      clip-path="url(#clip-Artboard_2)"
+    >
+      <path
+        id="edit_note"
+        d="M161.059-789.413a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.025,1.025,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h5.293a1.024,1.024,0,0,1,.754.3,1.025,1.025,0,0,1,.3.754,1.024,1.024,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Zm0-4.235a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.024,1.024,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h9.528a1.024,1.024,0,0,1,.754.3,1.024,1.024,0,0,1,.3.754,1.024,1.024,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Zm0-4.235a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.024,1.024,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h9.528a1.024,1.024,0,0,1,.754.3,1.024,1.024,0,0,1,.3.754,1.025,1.025,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Z"
+        transform="translate(-157.528 803.531)"
+        fill="currentColor"
+      />
+      <path
+        id="Subtraction_3"
+        data-name="Subtraction 3"
+        d="M1344-12292a5,5,0,0,1-5-5,5.006,5.006,0,0,1,5-5,5.008,5.008,0,0,1,5,5A5.005,5.005,0,0,1,1344-12292Zm-.747-4.248v2.251h1.5v-2.251H1347v-1.5h-2.248V-12300h-1.5v2.251H1341v1.5Z"
+        transform="translate(-1326 12313)"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+const ListSubtract: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    viewBox="0 0 24 24"
+  >
+    <defs>
+      <clipPath id="clip-Artboard_3">
+        <rect width="24" height="24" />
+      </clipPath>
+    </defs>
+    <g
+      id="Artboard_3"
+      data-name="Artboard – 3"
+      clip-path="url(#clip-Artboard_3)"
+    >
+      <path
+        id="edit_note"
+        d="M161.059-789.413a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.025,1.025,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h5.293a1.024,1.024,0,0,1,.754.3,1.025,1.025,0,0,1,.3.754,1.024,1.024,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Zm0-4.235a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.024,1.024,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h9.528a1.024,1.024,0,0,1,.754.3,1.024,1.024,0,0,1,.3.754,1.024,1.024,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Zm0-4.235a1.024,1.024,0,0,1-.754-.3,1.024,1.024,0,0,1-.3-.754,1.024,1.024,0,0,1,.3-.754,1.024,1.024,0,0,1,.754-.3h9.528a1.024,1.024,0,0,1,.754.3,1.024,1.024,0,0,1,.3.754,1.025,1.025,0,0,1-.3.754,1.024,1.024,0,0,1-.754.3Z"
+        transform="translate(-157.528 803.531)"
+        fill="currentColor"
+      />
+      <path
+        id="Subtraction_2"
+        data-name="Subtraction 2"
+        d="M1250-12292a5,5,0,0,1-5-5,5.006,5.006,0,0,1,5-5,5.008,5.008,0,0,1,5,5A5.005,5.005,0,0,1,1250-12292Zm-3-5.748v1.5h6v-1.5Z"
+        transform="translate(-1232 12313)"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+);
+
+const Calendar: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20px"
+    height="20px"
+    viewBox="0 -960 960 960"
+    fill="currentColor"
+  >
+    <path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-40q0-17 11.5-28.5T280-880q17 0 28.5 11.5T320-840v40h320v-40q0-17 11.5-28.5T680-880q17 0 28.5 11.5T720-840v40h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z" />
+  </svg>
+);
+
 export const ICONS_DICTIONARY = {
   chevron: Chevron,
   program: Program,
@@ -282,4 +448,11 @@ export const ICONS_DICTIONARY = {
   chevronLeft: ChevronLeft,
   chevronRight: ChevronRight,
   bookmark: Bookmark,
+  more: More,
+  delete: Delete,
+  list: List,
+  listCheck: ListCheck,
+  listAdd: ListAdd,
+  listSubstract: ListSubtract,
+  calendar: Calendar,
 } as const;
diff --git a/src/components/atoms/Modal/Modal.tsx b/src/components/atoms/Modal/Modal.tsx
@@ -13,7 +13,9 @@ const CloseBtn = () => (
     width="18"
     height="18"
     viewBox="0 0 18 18"
+    aria-label="Close modal"
   >
+    <title>Close modal</title>
     <g id="close" transform="translate(0 -0.005)">
       <g id="Group_68" data-name="Group 68" transform="translate(0 0.005)">
         <path
@@ -53,7 +55,7 @@ const StyledGlobal = createGlobalStyle<ModalProps>`
       line-height: 21px;
       font-weight: bold;
     }
-
+    &-section,
     &-content {
       position: relative;
       background-color: ${({ theme }) =>

diff --git a/src/components/atoms/ProgressRing/ProgressRing.tsx b/src/components/atoms/ProgressRing/ProgressRing.tsx
@@ -1,6 +1,6 @@
 import styled, { withTheme } from "styled-components";
 import { getStylesBasedOnTheme } from "../../../utils/utils";
-import { ExtendableStyledComponent } from "types/component";
+import type { ExtendableStyledComponent } from "types/component";
 
 const StyledSvg = styled("svg")`
   .progress_ring__top {

diff --git a/src/components/atoms/Tag/Tag.tsx b/src/components/atoms/Tag/Tag.tsx
@@ -1,7 +1,6 @@
-import * as React from "react";
-
+import type * as React from "react";
 import styled, { withTheme } from "styled-components";
-import { ExtendableStyledComponent } from "types/component";
+import type { ExtendableStyledComponent } from "types/component";
 import { getStylesBasedOnTheme } from "../../../utils/utils";
 import { getFontFromTheme } from "../../../theme/provider";
 

diff --git a/src/components/atoms/TreeSelect/index.tsx b/src/components/atoms/TreeSelect/index.tsx
@@ -3,9 +3,10 @@ import ReactTreeSelect, {
   TreeSelectProps as ReactTreeSelectProps,
 } from "rc-tree-select";
 import styled from "styled-components";
-import { AiOutlineRight } from "react-icons/ai";
+import { Icon } from "../../../";
 import { getFontFromTheme } from "../../../theme/provider";
 import { getStylesBasedOnTheme } from "../../../utils/utils";
+
 export type TreeSelectProps<ValueType> = Omit<
   ReactTreeSelectProps<ValueType>,
   "switcherIcon" | "inputIcon" | "treeNodeLabelProp" | "getPopupContainer"
@@ -156,7 +157,9 @@ export const TreeSelect = <ValueType,>({
       <ReactTreeSelect
         {...props}
         placeholder={placeholder}
-        switcherIcon={<AiOutlineRight />}
+        switcherIcon={
+          <Icon name="chevronLeft" styles={{ with: 5, height: 10 }} />
+        }
         treeNodeLabelProp="label"
         getPopupContainer={() => wrapperRef.current as HTMLDivElement}
       />

diff --git a/src/components/molecules/DropdownMenu/DropdownMenu.md b/src/components/molecules/DropdownMenu/DropdownMenu.md
@@ -1,14 +1,14 @@
 ```js
 import ThemeTester from "../../../styleguide/ThemeTester";
-import { MdMoreHoriz, MdEditNote, MdDeleteForever } from "react-icons/md";
-import { IconText } from "../../../";
+
+import { IconText, Icon } from "../../../";
 
 const menuItems = [
   {
     id: 10,
     content: (
       <IconText
-        icon={<MdEditNote />}
+        icon={<Icon name="editAll" />}
         text="Edit"
         onClick={() => console.log("edit")}
       />
@@ -18,7 +18,7 @@ const menuItems = [
     id: 20,
     content: (
       <IconText
-        icon={<MdDeleteForever />}
+        icon={<Icon name="delete" />}
         text="Delete"
         onClick={() => console.log("delete")}
       />
@@ -27,6 +27,6 @@ const menuItems = [
 ];
 
 <ThemeTester>
-  <DropdownMenu menuItems={menuItems} child={<MdMoreHoriz size="1.6em" />} />
+  <DropdownMenu menuItems={menuItems} child={<Icon name="more" />} />
 </ThemeTester>;
 ```
diff --git a/src/components/molecules/List/List.md b/src/components/molecules/List/List.md
@@ -1,32 +1,32 @@
 ```js
 import { useState } from "react";
 import ThemeTester from "../../../styleguide/ThemeTester";
-import { BiListCheck, BiListMinus, BiListPlus, BiListUl } from "react-icons/bi";
 
+import { IconText, Icon } from "../../../";
 const [selectedListItem, setSelectedListItem] = useState(0);
 
 const listItems = [
   {
     id: 0,
-    icon: <BiListUl />,
+    icon: <Icon name="list" />,
     text: "All tasks",
     numberOfItems: 10,
   },
   {
     id: 1,
-    icon: <BiListCheck />,
+    icon: <Icon name="listCheck" />,
     text: "Today tasks",
     numberOfItems: 6,
   },
   {
     id: 2,
-    icon: <BiListPlus />,
+    icon: <Icon name="listAdd" />,
     text: "Upcoming tasks",
     numberOfItems: 2,
   },
   {
     id: 3,
-    icon: <BiListMinus />,
+    icon: <Icon name="listSubstract" />,
     text: "Overdue tasks",
     numberOfItems: 2,
   },