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