Pull Clear

650 Views 30 Downloads - 3 API calls 25 Lines - 538 Bytes Apr 23, 2020 interface

 .gg-pull-clear {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 20px;
 height: 12px;
 border: 2px solid;
 border-top: 0;
 border-bottom-left-radius: 2px;
 border-bottom-right-radius: 2px
}

.gg-pull-clear::after {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 12px;
 height: 2px;
 bottom: 2px;
 left: 2px;
 background: currentColor;
 box-shadow: 0 -4px 0 0
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6H2V16C2 17.1046 2.89543 18 4 18H20C21.1046 18 22 17.1046 22 16V6H20V16H4V6Z" fill="currentColor" /><path d="M6 12H18V14H6V12Z" fill="currentColor" /><path d="M18 8H6V10H18V8Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledPullClear = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 20px; height: 12px; border: 2px solid; border-top: 0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } &::after { content: ''; display: block; box-sizing: border-box; position: absolute; width: 12px; height: 2px; bottom: 2px; left: 2px; background: currentColor; box-shadow: 0 -4px 0 0; }`export const PullClear = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledPullClear {...props} ref={ref} icon-role="pull-clear" /></> ) },)

CSSSVGTSX

1	.gg-pull-clear {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 20px;
7	height: 12px;
8	border: 2px solid;
9	border-top: 0;
10	border-bottom-left-radius: 2px;
11	border-bottom-right-radius: 2px
12	}
13
14	.gg-pull-clear::after {
15	content: "";
16	display: block;
17	box-sizing: border-box;
18	position: absolute;
19	width: 12px;
20	height: 2px;
21	bottom: 2px;
22	left: 2px;
23	background: currentColor;
24	box-shadow: 0 -4px 0 0
25	}

1	<svg
2	width="24"
3	height="24"
4	viewBox="0 0 24 24"
5	fill="none"
6	xmlns="http://www.w3.org/2000/svg"
7	>
8	<path
9	d="M4 6H2V16C2 17.1046 2.89543 18 4 18H20C21.1046 18 22 17.1046 22 16V6H20V16H4V6Z"
10	fill="currentColor"
11	/>
12	<path d="M6 12H18V14H6V12Z" fill="currentColor" />
13	<path d="M18 8H6V10H18V8Z" fill="currentColor" />
14	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledPullClear = styled.i`
5	& {
6	box-sizing: border-box;
7	position: relative;
8	display: block;
9	transform: scale(var(--ggs, 1));
10	width: 20px;
11	height: 12px;
12	border: 2px solid;
13	border-top: 0;
14	border-bottom-left-radius: 2px;
15	border-bottom-right-radius: 2px;
16	}
17	&::after {
18	content: '';
19	display: block;
20	box-sizing: border-box;
21	position: absolute;
22	width: 12px;
23	height: 2px;
24	bottom: 2px;
25	left: 2px;
26	background: currentColor;
27	box-shadow: 0 -4px 0 0;
28	}
29	`
30
31	export const PullClear = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
32	(props, ref) => {
33	return (
34	<>
35	<StyledPullClear {...props} ref={ref} icon-role="pull-clear" />
36	</>
37	)
38	},
39	)
40

HTMLCSSJSONXML

MarkupSVG Sprite

Pull Clear ended up a magic CSS icon made by using attributes as follows: transform, width, height, border, border-top, background, box-shadow,
Fun to know, it has: 25 Lines of code at 538b & 388b minified. Quite wonderful 🤗 huhh.

Pull Clear

Thank you!