From 8b1b80604e577e6bcdf2ad50f97e9ae5caf73125 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Mon, 5 Dec 2022 17:31:39 +0100
Subject: [PATCH] Icon line weight patch [Fixes #70] (#105)

* add custom AddIcon and MinusIcon svgs

* switch DocsLinks to use custom +/- svgs

* fix size of +/- svgs
---
 src/components/UI/docs/DocsLinks.tsx |  6 +++---
 src/components/UI/svgs/AddIcon.tsx   | 21 +++++++++++++++++++++
 src/components/UI/svgs/MinusIcon.tsx | 20 ++++++++++++++++++++
 src/components/UI/svgs/index.ts      |  2 ++
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/components/UI/svgs/AddIcon.tsx
 create mode 100644 src/components/UI/svgs/MinusIcon.tsx

diff --git a/src/components/UI/docs/DocsLinks.tsx b/src/components/UI/docs/DocsLinks.tsx
index 6350316399..ab77e803ae 100644
--- a/src/components/UI/docs/DocsLinks.tsx
+++ b/src/components/UI/docs/DocsLinks.tsx
@@ -9,7 +9,7 @@ import {
   Stack,
   Text
 } from '@chakra-ui/react';
-import { AddIcon, MinusIcon } from '@chakra-ui/icons';
+import { AddIcon, MinusIcon } from '../svgs/'
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 
@@ -79,9 +79,9 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
                       <Stack minW='61px'>
                         <Center>
                           {isExpanded ? (
-                            <MinusIcon w='20px' h='20px' color='primary' />
+                            <MinusIcon w='24px' h='24px' color='primary' />
                           ) : (
-                            <AddIcon w='20px' h='20px' color='primary' />
+                            <AddIcon w='24px' h='24px' color='primary' />
                           )}
                         </Center>
                       </Stack>
diff --git a/src/components/UI/svgs/AddIcon.tsx b/src/components/UI/svgs/AddIcon.tsx
new file mode 100644
index 0000000000..fe8f3016c9
--- /dev/null
+++ b/src/components/UI/svgs/AddIcon.tsx
@@ -0,0 +1,21 @@
+import { IconProps } from '@chakra-ui/react';
+import { createIcon } from '@chakra-ui/icons';
+
+const [w, h] = [24, 24];
+
+const Icon = createIcon({
+  displayName: 'AddIcon',
+  viewBox: `0 0 ${w} ${h}`,
+  path: (
+    <svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g fill="currentColor">
+        <rect height="2" width="20" x="2" y="11"></rect>
+        <rect height="20" width="2" x="11" y="2"></rect>
+      </g>
+    </svg>
+  )
+});
+
+export const AddIcon: React.FC<IconProps> = props => (
+  <Icon h={h} w={w} color='primary' {...props} />
+);
diff --git a/src/components/UI/svgs/MinusIcon.tsx b/src/components/UI/svgs/MinusIcon.tsx
new file mode 100644
index 0000000000..689f611370
--- /dev/null
+++ b/src/components/UI/svgs/MinusIcon.tsx
@@ -0,0 +1,20 @@
+import { IconProps } from '@chakra-ui/react';
+import { createIcon } from '@chakra-ui/icons';
+
+const [w, h] = [24, 24];
+
+const Icon = createIcon({
+  displayName: 'MinusIcon',
+  viewBox: `0 0 ${w} ${h}`,
+  path: (
+    <svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <g fill="currentColor">
+        <rect height="2" width="20" x="2" y="11"></rect>
+      </g>
+    </svg>
+  )
+});
+
+export const MinusIcon: React.FC<IconProps> = props => (
+  <Icon h={h} w={w} color='primary' {...props} />
+);
diff --git a/src/components/UI/svgs/index.ts b/src/components/UI/svgs/index.ts
index c1a85f7e2c..91312334c8 100644
--- a/src/components/UI/svgs/index.ts
+++ b/src/components/UI/svgs/index.ts
@@ -1,5 +1,7 @@
+export * from './AddIcon';
 export * from './GlyphHome';
 export * from './GopherDownloads';
 export * from './GopherHomeFront';
 export * from './GopherHomeLinks';
 export * from './GopherHomeNodes';
+export * from './MinusIcon';