1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import { FC } from 'react';
import styles from './arrow.module.scss';
export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
export type ArrowProps = {
/**
* Set additional classnames to the icon.
*/
className?: string;
/**
* The arrow direction. Default: right.
*/
direction: ArrowDirection;
};
/**
* Arrow component
*
* Render a svg arrow icon.
*/
const Arrow: FC<ArrowProps> = ({ className = '', direction }) => {
const directionClass = styles[`icon--${direction}`];
const classes = `${styles.icon} ${directionClass} ${className}`;
if (direction === 'top') {
return (
<svg
className={classes}
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={classes}
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={classes}
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={classes}
viewBox="0 0 64.644997 23.476001"
xmlns="http://www.w3.org/2000/svg"
>
<path
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>
);
};
export default Arrow;
|
