diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/assets/images/icon-arrow-right.svg | 19 | ||||
| -rw-r--r-- | src/components/Icons/Arrow/Arrow.tsx | 69 |
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> ); |
