Setup our own icons library (#177)

front/package-lock.json

@@ -11,6 +11,7 @@
         "@apollo/client": "^3.7.5",
         "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.5",
+        "@tabler/icons-react": "^2.20.0",
         "@tanstack/react-table": "^8.8.5",
         "@types/node": "^16.18.4",
         "@types/react": "^18.0.25",
@@ -9043,6 +9044,31 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-2.20.0.tgz",
+      "integrity": "sha512-BsUEJoqREs8bqcrf5HfJBq6/rDvsRI3h+T+0X1o7i8LBHonsH0iAngcyL0I82YKoSy9NiVDvM3LV63zDP0nPYQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-2.20.0.tgz",
+      "integrity": "sha512-r2uC0Mi3ozHD2G+IYi0A0Iy2203dbQo5EAFxn055MyIhH7U2VNsvyopTqOj+AVedy7cqR86T9zhryRUGC78WZA==",
+      "dependencies": {
+        "@tabler/icons": "2.20.0",
+        "prop-types": "^15.7.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@tanstack/react-table": {
       "version": "8.9.1",
       "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.9.1.tgz",

front/package.json

@@ -6,6 +6,7 @@
     "@apollo/client": "^3.7.5",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.5",
+    "@tabler/icons-react": "^2.20.0",
     "@tanstack/react-table": "^8.8.5",
     "@types/node": "^16.18.4",
     "@types/react": "^18.0.25",

front/src/components/icons/components/IconAddressBook.tsx

@@ -0,0 +1,10 @@
+import { ReactComponent as IconAddressBookRaw } from '../svgs/address-book.svg';
+
+import { TablerIconsProps } from '@tabler/icons-react';
+
+export function IconAddressBook(props: TablerIconsProps): JSX.Element {
+  const size = props.size ?? 24;
+  const stroke = props.stroke ?? 2;
+
+  return <IconAddressBookRaw height={size} width={size} strokeWidth={stroke} />;
+}

front/src/components/icons/index.ts

@@ -0,0 +1,2 @@
+export { IconAward } from '@tabler/icons-react';
+export { IconAddressBook } from './components/IconAddressBook';

front/src/components/icons/svgs/address-book.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-address-book" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M20 6v12a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2z" />
+  <path d="M10 16h6" />
+  <path d="M13 11m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+  <path d="M4 8h3" />
+  <path d="M4 12h3" />
+  <path d="M4 16h3" />
+</svg>
+
+