Close

7K Views 92 Downloads - 41 API calls 29 Lines - 567 Bytes Apr 23, 2020 buttons interface

 .gg-close-o {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 22px;
 height: 22px;
 border: 2px solid;
 border-radius: 40px
}

.gg-close-o::after,
.gg-close-o::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 12px;
 height: 2px;
 background: currentColor;
 transform: rotate(45deg);
 border-radius: 5px;
 top: 8px;
 left: 3px
}

.gg-close-o::after {
 transform: rotate(-45deg)
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.3394 9.32245C16.7434 8.94589 16.7657 8.31312 16.3891 7.90911C16.0126 7.50509 15.3798 7.48283 14.9758 7.85938L12.0497 10.5866L9.32245 7.66048C8.94589 7.25647 8.31312 7.23421 7.90911 7.61076C7.50509 7.98731 7.48283 8.62008 7.85938 9.0241L10.5866 11.9502L7.66048 14.6775C7.25647 15.054 7.23421 15.6868 7.61076 16.0908C7.98731 16.4948 8.62008 16.5171 9.0241 16.1405L11.9502 13.4133L14.6775 16.3394C15.054 16.7434 15.6868 16.7657 16.0908 16.3891C16.4948 16.0126 16.5171 15.3798 16.1405 14.9758L13.4133 12.0497L16.3394 9.32245Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledCloseO = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 22px; height: 22px; border: 2px solid; border-radius: 40px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 12px; height: 2px; background: currentColor; transform: rotate(45deg); border-radius: 5px; top: 8px; left: 3px; } &::after { transform: rotate(-45deg); }`export const CloseO = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledCloseO {...props} ref={ref} icon-role="close-o" /></> ) },)

CSSSVGTSX

1	.gg-close-o {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 22px;
7	height: 22px;
8	border: 2px solid;
9	border-radius: 40px
10	}
11
12	.gg-close-o::after,
13	.gg-close-o::before {
14	content: "";
15	display: block;
16	box-sizing: border-box;
17	position: absolute;
18	width: 12px;
19	height: 2px;
20	background: currentColor;
21	transform: rotate(45deg);
22	border-radius: 5px;
23	top: 8px;
24	left: 3px
25	}
26
27	.gg-close-o::after {
28	transform: rotate(-45deg)
29	}

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="M16.3394 9.32245C16.7434 8.94589 16.7657 8.31312 16.3891 7.90911C16.0126 7.50509 15.3798 7.48283 14.9758 7.85938L12.0497 10.5866L9.32245 7.66048C8.94589 7.25647 8.31312 7.23421 7.90911 7.61076C7.50509 7.98731 7.48283 8.62008 7.85938 9.0241L10.5866 11.9502L7.66048 14.6775C7.25647 15.054 7.23421 15.6868 7.61076 16.0908C7.98731 16.4948 8.62008 16.5171 9.0241 16.1405L11.9502 13.4133L14.6775 16.3394C15.054 16.7434 15.6868 16.7657 16.0908 16.3891C16.4948 16.0126 16.5171 15.3798 16.1405 14.9758L13.4133 12.0497L16.3394 9.32245Z"
10	fill="currentColor"
11	/>
12	<path
13	fill-rule="evenodd"
14	clip-rule="evenodd"
15	d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z"
16	fill="currentColor"
17	/>
18	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Close ended up a 100% CSS icon created by practicing attributes like: transform, width, height, border, border-radius, background, .gg-close-o,
Some stats, it has: 29 Lines of code at 567b & 408b after compression. Pretty wonderful 🤗 don't you think ?.

Close

Thank you!