chore(icons): add direction to arrow icon and split path

I can now animate separatly the arrow head and the arrow body.

2 files changed, 78 insertions, 10 deletions

diff --git a/src/assets/images/icon-arrow-right.svg b/src/assets/images/icon-arrow-right.svg
index 9faf9d8..5ddb0b4 100644
--- a/src/assets/images/icon-arrow-right.svg
+++ b/src/assets/images/icon-arrow-right.svg
@@ -5,8 +5,8 @@
    viewBox="0 0 64.644997 23.476001"
    version="1.1"
    id="svg4"
-   sodipodi:docname="icon-arrow-top (copie 1).svg"
-   inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
+   sodipodi:docname="icon-arrow-right.svg"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
@@ -22,9 +22,9 @@
      inkscape:pageopacity="0.0"
      inkscape:pagecheckerboard="0"
      showgrid="false"
-     inkscape:zoom="1.6088114"
-     inkscape:cx="-127.42326"
-     inkscape:cy="71.481343"
+     inkscape:zoom="7.3600763"
+     inkscape:cx="11.141189"
+     inkscape:cy="23.912796"
      inkscape:window-width="1920"
      inkscape:window-height="1019"
      inkscape:window-x="0"
@@ -36,6 +36,11 @@
      fit-margin-right="0"
      fit-margin-bottom="0" />
   <path
-     d="m 0,15.45 40.008,-0.018 v 8.044 L 64.645,11.715 39.845,0 V 8.044 L 0,8.186 Z"
-     id="path2" />
+     d="M -1.6784668e-6,15.441 40.007998,15.423 V 8.0349999 l -40.0079996784668,0.142 z"
+     id="path2-6"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     d="M 40.007998,23.476 64.644998,11.715 39.844998,-8.3923343e-8 Z"
+     id="path2-3"
+     sodipodi:nodetypes="cccc" />
 </svg>
diff --git a/src/components/Icons/Arrow/Arrow.tsx b/src/components/Icons/Arrow/Arrow.tsx
index 61edfca..e9131d1 100644
--- a/src/components/Icons/Arrow/Arrow.tsx
+++ b/src/components/Icons/Arrow/Arrow.tsx
@@ -1,6 +1,65 @@
 import styles from './Arrow.module.scss';
 
-const ArrowIcon = () => {
+type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
+
+const ArrowIcon = ({ direction = 'right' }: { direction?: ArrowDirection }) => {
+  if (direction === 'top') {
+    return (
+      <svg
+        className={styles.icon}
+        viewBox="0 0 23.476 64.644995"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          className="arrow-head"
+          d="M 23.476001,24.637 11.715001,0 0,24.800001 Z"
+        />
+        <path
+          className="arrow-bar"
+          d="m 15.441001,64.644997 -0.018,-40.007999 H 8.035 l 0.142,40.007999 z"
+        />
+      </svg>
+    );
+  }
+
+  if (direction === 'bottom') {
+    return (
+      <svg
+        className={styles.icon}
+        viewBox="0 0 23.476 64.644995"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          className="arrow-head"
+          d="m 23.476001,40.007997 -11.761,24.637 L 0,39.844996 Z"
+        />
+        <path
+          className="arrow-bar"
+          d="m 15.441001,0 -0.018,40.007999 H 8.035 L 8.177,0 Z"
+        />
+      </svg>
+    );
+  }
+
+  if (direction === 'left') {
+    return (
+      <svg
+        className={styles.icon}
+        viewBox="0 0 64.644997 23.476001"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          className="arrow-head"
+          d="M 24.637,23.476 0,11.715 24.8,-8.3923343e-8 Z"
+        />
+        <path
+          className="arrow-bar"
+          d="m 64.644997,15.441 -40.008,-0.018 V 8.0349999 l 40.008,0.142 z"
+        />
+      </svg>
+    );
+  }
+
   return (
     <svg
       className={styles.icon}
@@ -8,8 +67,12 @@ const ArrowIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="m 0,15.45 40.008,-0.018 v 8.044 L 64.645,11.715 39.845,0 V 8.044 L 0,8.186 Z"
-        id="path2"
+        className="arrow-head"
+        d="M 40.007997,23.476 64.644997,11.715 39.844997,-8.3923343e-8 Z"
+      />
+      <path
+        className="arrow-bar"
+        d="M 0,15.441 40.008,15.423 V 8.0349999 L 0,8.1769999 Z"
       />
     </svg>
   );