Eye

13K Views 77 Downloads - 42 API calls 37 Lines - 684 Bytes Apr 23, 2020 buttons interface signs design

 .gg-eye {
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 24px;
 height: 18px;
 border-bottom-right-radius: 100px;
 border-bottom-left-radius: 100px;
 overflow: hidden;
 box-sizing: border-box
}

.gg-eye::after,
.gg-eye::before {
 content: "";
 display: block;
 border-radius: 100px;
 position: absolute;
 box-sizing: border-box
}

.gg-eye::after {
 top: 2px;
 box-shadow:
 inset 0 -8px 0 2px,
 inset 0 0 0 2px;
 width: 24px;
 height: 24px
}

.gg-eye::before {
 width: 8px;
 height: 8px;
 border: 2px solid;
 bottom: 4px;
 left: 8px
}

<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="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C17.5915 3 22.2898 6.82432 23.6219 12C22.2898 17.1757 17.5915 21 12 21C6.40848 21 1.71018 17.1757 0.378052 12C1.71018 6.82432 6.40848 3 12 3ZM12 19C7.52443 19 3.73132 16.0581 2.45723 12C3.73132 7.94186 7.52443 5 12 5C16.4756 5 20.2687 7.94186 21.5428 12C20.2687 16.0581 16.4756 19 12 19Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledEye = styled.i` & { position: relative; display: block; transform: scale(var(--ggs, 1)); width: 24px; height: 18px; border-bottom-right-radius: 100px; border-bottom-left-radius: 100px; overflow: hidden; box-sizing: border-box; } &::after, &::before { content: ''; display: block; border-radius: 100px; position: absolute; box-sizing: border-box; } &::after { top: 2px; box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px; width: 24px; height: 24px; } &::before { width: 8px; height: 8px; border: 2px solid; bottom: 4px; left: 8px; }`export const Eye = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledEye {...props} ref={ref} icon-role="eye" /></> ) },)

CSSSVGTSX

1	.gg-eye {
2	position: relative;
3	display: block;
4	transform: scale(var(--ggs,1));
5	width: 24px;
6	height: 18px;
7	border-bottom-right-radius: 100px;
8	border-bottom-left-radius: 100px;
9	overflow: hidden;
10	box-sizing: border-box
11	}
12
13	.gg-eye::after,
14	.gg-eye::before {
15	content: "";
16	display: block;
17	border-radius: 100px;
18	position: absolute;
19	box-sizing: border-box
20	}
21
22	.gg-eye::after {
23	top: 2px;
24	box-shadow:
25	inset 0 -8px 0 2px,
26	inset 0 0 0 2px;
27	width: 24px;
28	height: 24px
29	}
30
31	.gg-eye::before {
32	width: 8px;
33	height: 8px;
34	border: 2px solid;
35	bottom: 4px;
36	left: 8px
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="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z"
12	fill="currentColor"
13	/>
14	<path
15	fill-rule="evenodd"
16	clip-rule="evenodd"
17	d="M12 3C17.5915 3 22.2898 6.82432 23.6219 12C22.2898 17.1757 17.5915 21 12 21C6.40848 21 1.71018 17.1757 0.378052 12C1.71018 6.82432 6.40848 3 12 3ZM12 19C7.52443 19 3.73132 16.0581 2.45723 12C3.73132 7.94186 7.52443 5 12 5C16.4756 5 20.2687 7.94186 21.5428 12C20.2687 16.0581 16.4756 19 12 19Z"
18	fill="currentColor"
19	/>
20	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Eye is a magic CSS icon made by adopting properties as follows: transform, width, height, overflow, border-radius, box-shadow, border,
Fun facts, it has: 37 Lines of code at 684b & 478b minified. Quite wonderful 🤗 huhh.

Eye

Thank you!