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