Drop Opacity

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

 .gg-drop-opacity {
 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-opacity::before {
 content: "";
 display: block;
 position: absolute;
 box-sizing: border-box;
 width: 24px;
 height: 24px;
 background: currentColor;
 transform: rotate(-45deg);
 right: -10px;
 bottom: -16px;
}

<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="M15.9451 21.9559C12.5884 23.5927 8.42477 23.0167 5.63598 20.2279C2.12126 16.7132 2.12126 11.0147 5.63598 7.49995L11.9999 1.13599L18.3639 7.49995C19.2521 8.38814 19.9158 9.41578 20.3551 10.5124C21.6543 13.7553 20.9906 17.6012 18.364 20.2278C17.6381 20.9538 16.8189 21.5298 15.9451 21.9559ZM7.05019 8.91416L11.9999 3.96441L16.9497 8.91416C18.274 10.2385 18.9568 11.9615 18.998 13.6968H5.00192C5.04309 11.9615 5.72585 10.2385 7.05019 8.91416Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledDropOpacity = 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: -10px; bottom: -16px; }`export const DropOpacity = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledDropOpacity {...props} ref={ref} icon-role="drop-opacity" /></> ) },)

CSSSVGTSX

1	.gg-drop-opacity {
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-opacity::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: -10px;
23	bottom: -16px;
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="M15.9451 21.9559C12.5884 23.5927 8.42477 23.0167 5.63598 20.2279C2.12126 16.7132 2.12126 11.0147 5.63598 7.49995L11.9999 1.13599L18.3639 7.49995C19.2521 8.38814 19.9158 9.41578 20.3551 10.5124C21.6543 13.7553 20.9906 17.6012 18.364 20.2278C17.6381 20.9538 16.8189 21.5298 15.9451 21.9559ZM7.05019 8.91416L11.9999 3.96441L16.9497 8.91416C18.274 10.2385 18.9568 11.9615 18.998 13.6968H5.00192C5.04309 11.9615 5.72585 10.2385 7.05019 8.91416Z"
12	fill="currentColor"
13	/>
14	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledDropOpacity = 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: -10px;
26	bottom: -16px;
27	}
28	`
29
30	export const DropOpacity = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
31	(props, ref) => {
32	return (
33	<>
34	<StyledDropOpacity {...props} ref={ref} icon-role="drop-opacity" />
35	</>
36	)
37	},
38	)
39

HTMLCSSJSONXML

MarkupSVG Sprite

Drop Opacity ended up a CSS icon made by practicing properties such as: transform, width, height, border-radius, box-shadow, overflow, background,
Some stats, it has: 24 Lines of code at 543b & 399b minified. Pretty wonderful 🤗 for a icon designed by code.

Drop Opacity

Thank you!