Gender Male

2K Views 51 Downloads - 6 API calls 37 Lines - 712 Bytes Apr 23, 2020 signs

 .gg-gender-male {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 10px;
 height: 10px;
 border: 2px solid;
 border-radius: 100%;
 margin-left: -4px;
 margin-top: 4px
}

.gg-gender-male::after,
.gg-gender-male::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 height: 8px;
 top: -6px
}

.gg-gender-male::after {
 border-right: 2px solid;
 border-top: 2px solid;
 width: 7px;
 height: 7px;
 left: 5px
}

.gg-gender-male::before {
 width: 2px;
 background: currentColor;
 left: 7px;
 transform: rotate(45deg)
}

<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="M12.1888 7L12.1909 5L19.1909 5.00746L19.1834 12.0075L17.1834 12.0053L17.1873 8.41678L14.143 11.4611C15.4612 13.4063 15.2587 16.0743 13.5355 17.7975C11.5829 19.7501 8.41709 19.7501 6.46447 17.7975C4.51184 15.8449 4.51184 12.6791 6.46447 10.7264C8.16216 9.02873 10.777 8.80709 12.7141 10.0615L15.7718 7.00382L12.1888 7ZM7.87868 12.1406C9.05025 10.9691 10.9497 10.9691 12.1213 12.1406C13.2929 13.3122 13.2929 15.2117 12.1213 16.3833C10.9497 17.5549 9.05025 17.5549 7.87868 16.3833C6.70711 15.2117 6.70711 13.3122 7.87868 12.1406Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledGenderMale = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 10px; height: 10px; border: 2px solid; border-radius: 100%; margin-left: -4px; margin-top: 4px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; height: 8px; top: -6px; } &::after { border-right: 2px solid; border-top: 2px solid; width: 7px; height: 7px; left: 5px; } &::before { width: 2px; background: currentColor; left: 7px; transform: rotate(45deg); }`export const GenderMale = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledGenderMale {...props} ref={ref} icon-role="gender-male" /></> ) },)

CSSSVGTSX

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

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="M12.1888 7L12.1909 5L19.1909 5.00746L19.1834 12.0075L17.1834 12.0053L17.1873 8.41678L14.143 11.4611C15.4612 13.4063 15.2587 16.0743 13.5355 17.7975C11.5829 19.7501 8.41709 19.7501 6.46447 17.7975C4.51184 15.8449 4.51184 12.6791 6.46447 10.7264C8.16216 9.02873 10.777 8.80709 12.7141 10.0615L15.7718 7.00382L12.1888 7ZM7.87868 12.1406C9.05025 10.9691 10.9497 10.9691 12.1213 12.1406C13.2929 13.3122 13.2929 15.2117 12.1213 16.3833C10.9497 17.5549 9.05025 17.5549 7.87868 16.3833C6.70711 15.2117 6.70711 13.3122 7.87868 12.1406Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Gender Male is an amazing pure CSS icon built by applying features as follows: transform, width, height, border, border-radius, border-top, background,
Some stats, it has: 37 Lines of code at 712b & 511b after compiling. Actually stunning 🤩 don't you think ?.

Gender Male

Thank you!