Drop Invert

Views Downloads - API calls 24 Lines - 538 Bytes Apr 23, 2020 interface

 .gg-drop-invert {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: rotate(45deg) scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border-radius: 0 100% 100% 100%;
 box-shadow: inset 0 0 0 2px;
 overflow: hidden
}

.gg-drop-invert::before {
 content: "";
 display: block;
 position: absolute;
 box-sizing: border-box;
 width: 24px;
 height: 24px;
 background: currentColor;
 transform: rotate(-45deg);
 right: -15px;
 top: -10px;
}

<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.0001 1.13611L5.63604 7.50002C2.12132 11.0147 2.12132 16.7132 5.63604 20.2279C7.39343 21.9853 9.69679 22.864 12.0001 22.864C12.288 22.864 12.5759 22.8502 12.8627 22.8228C14.8706 22.6306 16.8264 21.7657 18.3641 20.2279C21.8788 16.7132 21.8788 11.0147 18.3641 7.50002L12.0001 1.13611ZM7.05025 8.91423L12 3.96448L12.0001 20.864C10.2086 20.864 8.41711 20.1806 7.05025 18.8137C4.31658 16.0801 4.31658 11.6479 7.05025 8.91423Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledDropInvert = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: rotate(45deg) scale(var(--ggs, 1)); width: 16px; height: 16px; border-radius: 0 100% 100% 100%; box-shadow: inset 0 0 0 2px; overflow: hidden; } &::before { content: ''; display: block; position: absolute; box-sizing: border-box; width: 24px; height: 24px; background: currentColor; transform: rotate(-45deg); right: -15px; top: -10px; }`export const DropInvert = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledDropInvert {...props} ref={ref} icon-role="drop-invert" /></> ) },)

CSSSVGTSX

1	.gg-drop-invert {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: rotate(45deg) scale(var(--ggs,1));
6	width: 16px;
7	height: 16px;
8	border-radius: 0 100% 100% 100%;
9	box-shadow: inset 0 0 0 2px;
10	overflow: hidden
11	}
12
13	.gg-drop-invert::before {
14	content: "";
15	display: block;
16	position: absolute;
17	box-sizing: border-box;
18	width: 24px;
19	height: 24px;
20	background: currentColor;
21	transform: rotate(-45deg);
22	right: -15px;
23	top: -10px;
24	}

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.0001 1.13611L5.63604 7.50002C2.12132 11.0147 2.12132 16.7132 5.63604 20.2279C7.39343 21.9853 9.69679 22.864 12.0001 22.864C12.288 22.864 12.5759 22.8502 12.8627 22.8228C14.8706 22.6306 16.8264 21.7657 18.3641 20.2279C21.8788 16.7132 21.8788 11.0147 18.3641 7.50002L12.0001 1.13611ZM7.05025 8.91423L12 3.96448L12.0001 20.864C10.2086 20.864 8.41711 20.1806 7.05025 18.8137C4.31658 16.0801 4.31658 11.6479 7.05025 8.91423Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Drop Invert is a magic pure CSS icon made by using features as follows: transform, width, height, border-radius, box-shadow, overflow, background,
Fun to know, it has: 24 Lines of code at 538b & 394b after compression. Actually marvelous 💎 don't you think ?.

Drop Invert

Thank you!