1 | import React from 'react' |
2 | import styled from 'styled-components' |
3 | |
4 | const StyledHome = styled.i` |
5 | & { |
6 | background: linear-gradient(to left, currentColor 5px, transparent 0) no-repeat 0 bottom/4px 2px, |
7 | linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right bottom/4px 2px; |
8 | box-sizing: border-box; |
9 | position: relative; |
10 | display: block; |
11 | transform: scale(var(--ggs, 1)); |
12 | width: 18px; |
13 | height: 14px; |
14 | border: 2px solid; |
15 | border-top: 0; |
16 | border-bottom: 0; |
17 | border-top-right-radius: 3px; |
18 | border-top-left-radius: 3px; |
19 | border-bottom-right-radius: 0; |
20 | border-bottom-left-radius: 0; |
21 | margin-bottom: -2px; |
22 | } |
23 | &::after, |
24 | &::before { |
25 | content: ''; |
26 | display: block; |
27 | box-sizing: border-box; |
28 | position: absolute; |
29 | } |
30 | &::before { |
31 | border-top: 2px solid; |
32 | border-left: 2px solid; |
33 | border-top-left-radius: 4px; |
34 | transform: rotate(45deg); |
35 | top: -5px; |
36 | border-radius: 3px; |
37 | width: 14px; |
38 | height: 14px; |
39 | left: 0; |
40 | } |
41 | &::after { |
42 | width: 8px; |
43 | height: 10px; |
44 | border: 2px solid; |
45 | border-radius: 100px; |
46 | border-bottom-left-radius: 0; |
47 | border-bottom-right-radius: 0; |
48 | border-bottom: 0; |
49 | left: 3px; |
50 | bottom: 0; |
51 | } |
52 | ` |
53 | |
54 | export const Home = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( |
55 | (props, ref) => { |
56 | return ( |
57 | <> |
58 | <StyledHome {...props} ref={ref} icon-role="home" /> |
59 | </> |
60 | ) |
61 | }, |
62 | ) |
63 | |