Close

Views 86 Downloads - API calls 29 Lines - 571 Bytes Apr 23, 2020 interface

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

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

.gg-close::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="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z" fill="currentColor" /></svg>

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

CSSSVGTSX

1	.gg-close {
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 transparent;
9	border-radius: 40px
10	}
11
12	.gg-close::after,
13	.gg-close::before {
14	content: "";
15	display: block;
16	box-sizing: border-box;
17	position: absolute;
18	width: 16px;
19	height: 2px;
20	background: currentColor;
21	transform: rotate(45deg);
22	border-radius: 5px;
23	top: 8px;
24	left: 1px
25	}
26
27	.gg-close::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="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z"
10	fill="currentColor"
11	/>
12	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Close ended up a 100% CSS icon built by applying features such as: transform, width, height, border, border-radius, background, .gg-close,
Fun to know, it has: 29 Lines of code at 571b & 412b minified. Actually stunning 🤩 for a icon designed by code.

Close

Thank you!