1 | import React from 'react' |
2 | import styled from 'styled-components' |
3 | |
4 | const StyledAirplane = styled.i` |
5 | & { |
6 | box-sizing: border-box; |
7 | position: relative; |
8 | display: block; |
9 | width: 18px; |
10 | height: 18px; |
11 | transform: scale(var(--ggs, 1)); |
12 | background: linear-gradient(to left, currentColor 22px, transparent 0) no-repeat center/16px 2px, |
13 | radial-gradient(circle, currentColor 60%, transparent 40%) no-repeat right center/2px 2px; |
14 | } |
15 | &::after, |
16 | &::before { |
17 | content: ''; |
18 | display: block; |
19 | position: absolute; |
20 | box-sizing: border-box; |
21 | width: 10px; |
22 | height: 8px; |
23 | border-right: 4px solid; |
24 | } |
25 | &::before { |
26 | border-top-right-radius: 2px; |
27 | top: 0; |
28 | transform: perspective(10px) rotateX(10deg) skewX(30deg); |
29 | box-shadow: -4px 3px 0 -2px; |
30 | } |
31 | &::after { |
32 | border-bottom-right-radius: 2px; |
33 | bottom: 0; |
34 | transform: perspective(10px) rotateX(-10deg) skewX(-30deg); |
35 | box-shadow: -4px -3px 0 -2px; |
36 | } |
37 | ` |
38 | |
39 | export const Airplane = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( |
40 | (props, ref) => { |
41 | return ( |
42 | <> |
43 | <StyledAirplane {...props} ref={ref} icon-role="airplane" /> |
44 | </> |
45 | ) |
46 | }, |
47 | ) |
48 | |