Read

2K Views 54 Downloads - 7 API calls 38 Lines - 724 Bytes Apr 23, 2020 buttons content

 .gg-read,
.gg-read::after,
.gg-read::before {
 display: block;
 box-sizing: border-box;
 border: 2px solid
}

.gg-read {
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
 border-bottom-color: transparent;
 margin-left: -1px;
 position: relative;
 transform: scale(var(--ggs,1));
 width: 6px;
 height: 5px;
 border-radius: 50px
}

.gg-read::after,
.gg-read::before {
 content: "";
 position: absolute;
 width: 10px;
 height: 10px;
 border-radius: 10px;
 left: -10px;
 top: -5px;
 box-shadow:
 -6px 0 0 -4px currentColor
}

.gg-read::after {
 left: 2px;
 box-shadow:
 6px 0 0 -4px currentColor
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C8.10457 14 9 13.1046 9 12C9 10.8954 8.10457 10 7 10C5.89543 10 5 10.8954 5 12C5 13.1046 5.89543 14 7 14ZM10.4649 10C9.77325 8.8044 8.48056 8 7 8C5.13616 8 3.57006 9.27477 3.12602 11H2C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H3.12602C3.57006 14.7252 5.13616 16 7 16C9.20914 16 11 14.2091 11 12H13C13 14.2091 14.7909 16 17 16C18.8638 16 20.4299 14.7252 20.874 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H20.874C20.4299 9.27477 18.8638 8 17 8C15.5194 8 14.2267 8.8044 13.5351 10H10.4649ZM15 12C15 13.1046 15.8954 14 17 14C18.1046 14 19 13.1046 19 12C19 10.8954 18.1046 10 17 10C15.8954 10 15 10.8954 15 12Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledRead = styled.i` &, &::after, &::before { display: block; box-sizing: border-box; border: 2px solid; } & { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; margin-left: -1px; position: relative; transform: scale(var(--ggs, 1)); width: 6px; height: 5px; border-radius: 50px; } &::after, &::before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 10px; left: -10px; top: -5px; box-shadow: -6px 0 0 -4px currentColor; } &::after { left: 2px; box-shadow: 6px 0 0 -4px currentColor; }`export const Read = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledRead {...props} ref={ref} icon-role="read" /></> ) },)

CSSSVGTSX

1	.gg-read,
2	.gg-read::after,
3	.gg-read::before {
4	display: block;
5	box-sizing: border-box;
6	border: 2px solid
7	}
8
9	.gg-read {
10	border-bottom-left-radius: 0;
11	border-bottom-right-radius: 0;
12	border-bottom-color: transparent;
13	margin-left: -1px;
14	position: relative;
15	transform: scale(var(--ggs,1));
16	width: 6px;
17	height: 5px;
18	border-radius: 50px
19	}
20
21	.gg-read::after,
22	.gg-read::before {
23	content: "";
24	position: absolute;
25	width: 10px;
26	height: 10px;
27	border-radius: 10px;
28	left: -10px;
29	top: -5px;
30	box-shadow:
31	-6px 0 0 -4px currentColor
32	}
33
34	.gg-read::after {
35	left: 2px;
36	box-shadow:
37	6px 0 0 -4px currentColor
38	}

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	fill-rule="evenodd"
10	clip-rule="evenodd"
11	d="M7 14C8.10457 14 9 13.1046 9 12C9 10.8954 8.10457 10 7 10C5.89543 10 5 10.8954 5 12C5 13.1046 5.89543 14 7 14ZM10.4649 10C9.77325 8.8044 8.48056 8 7 8C5.13616 8 3.57006 9.27477 3.12602 11H2C1.44772 11 1 11.4477 1 12C1 12.5523 1.44772 13 2 13H3.12602C3.57006 14.7252 5.13616 16 7 16C9.20914 16 11 14.2091 11 12H13C13 14.2091 14.7909 16 17 16C18.8638 16 20.4299 14.7252 20.874 13H22C22.5523 13 23 12.5523 23 12C23 11.4477 22.5523 11 22 11H20.874C20.4299 9.27477 18.8638 8 17 8C15.5194 8 14.2267 8.8044 13.5351 10H10.4649ZM15 12C15 13.1046 15.8954 14 17 14C18.1046 14 19 13.1046 19 12C19 10.8954 18.1046 10 17 10C15.8954 10 15 10.8954 15 12Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Read developed into a magic 100% CSS icon created by adopting properties such as: .gg-read, border, border-bottom-color, transform, width, height, border-radius, box-shadow,
Some stats, it has: 38 Lines of code at 724b & 522b minified. Quite stunning 🤩 .

Read

Thank you!