Color Picker

2K Views 56 Downloads - 28 API calls 41 Lines - 942 Bytes Apr 23, 2020 content design

 .gg-color-picker {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: rotate(-45deg) scale(var(--ggs,1));
 width: 18px;
 height: 10px;
 border-left: 0;
 border-top-left-radius: 100px;
 border-bottom-left-radius: 100px;
 border-top: 2px solid transparent;
 border-bottom: 2px solid transparent;
 border-right: 2px solid transparent;
 box-shadow: inset 0 0 0 2px
}

.gg-color-picker::after,
.gg-color-picker::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 background: currentColor
}

.gg-color-picker::before {
 top: -2px;
 border-radius: 3px;
 width: 2px;
 height: 10px;
 right: -3px
}

.gg-color-picker::after {
 width: 8px;
 height: 6px;
 right: -9px;
 box-shadow: -21px 0 0 -2px;
 border-top-right-radius: 100px;
 border-bottom-right-radius: 100px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.3847 2.87868C19.2132 1.70711 17.3137 1.70711 16.1421 2.87868L14.0202 5.00052L13.313 4.29332C12.9225 3.9028 12.2894 3.9028 11.8988 4.29332C11.5083 4.68385 11.5083 5.31701 11.8988 5.70754L17.5557 11.3644C17.9462 11.7549 18.5794 11.7549 18.9699 11.3644C19.3604 10.9739 19.3604 10.3407 18.9699 9.95018L18.2629 9.24316L20.3847 7.12132C21.5563 5.94975 21.5563 4.05025 20.3847 2.87868Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9297 7.09116L4.1515 14.8693C3.22786 15.793 3.03239 17.169 3.5651 18.2842L1.99994 19.8493L3.41415 21.2635L4.97931 19.6984C6.09444 20.2311 7.4705 20.0356 8.39414 19.112L16.1723 11.3338L11.9297 7.09116ZM13.3439 11.3338L11.9297 9.91959L5.56571 16.2835C5.17518 16.6741 5.17518 17.3072 5.56571 17.6978C5.95623 18.0883 6.5894 18.0883 6.97992 17.6978L13.3439 11.3338Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledColorPicker = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: rotate(-45deg) scale(var(--ggs, 1)); width: 18px; height: 10px; border-left: 0; border-top-left-radius: 100px; border-bottom-left-radius: 100px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-right: 2px solid transparent; box-shadow: inset 0 0 0 2px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; background: currentColor; } &::before { top: -2px; border-radius: 3px; width: 2px; height: 10px; right: -3px; } &::after { width: 8px; height: 6px; right: -9px; box-shadow: -21px 0 0 -2px; border-top-right-radius: 100px; border-bottom-right-radius: 100px; }`export const ColorPicker = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledColorPicker {...props} ref={ref} icon-role="color-picker" /></> ) },)

CSSSVGTSX

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

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="M20.3847 2.87868C19.2132 1.70711 17.3137 1.70711 16.1421 2.87868L14.0202 5.00052L13.313 4.29332C12.9225 3.9028 12.2894 3.9028 11.8988 4.29332C11.5083 4.68385 11.5083 5.31701 11.8988 5.70754L17.5557 11.3644C17.9462 11.7549 18.5794 11.7549 18.9699 11.3644C19.3604 10.9739 19.3604 10.3407 18.9699 9.95018L18.2629 9.24316L20.3847 7.12132C21.5563 5.94975 21.5563 4.05025 20.3847 2.87868Z"
10	fill="currentColor"
11	/>
12	<path
13	fill-rule="evenodd"
14	clip-rule="evenodd"
15	d="M11.9297 7.09116L4.1515 14.8693C3.22786 15.793 3.03239 17.169 3.5651 18.2842L1.99994 19.8493L3.41415 21.2635L4.97931 19.6984C6.09444 20.2311 7.4705 20.0356 8.39414 19.112L16.1723 11.3338L11.9297 7.09116ZM13.3439 11.3338L11.9297 9.91959L5.56571 16.2835C5.17518 16.6741 5.17518 17.3072 5.56571 17.6978C5.95623 18.0883 6.5894 18.0883 6.97992 17.6978L13.3439 11.3338Z"
16	fill="currentColor"
17	/>
18	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Color Picker became a pure CSS icon built by practicing properties such as: transform, width, height, border-left, border-top, border-bottom, border-right, box-shadow, background, border-radius,
Some stats, it has: 41 Lines of code at 942b & 713b minified. Truly amazing 😲 huhh.

Color Picker

Thank you!