Search Found

1K Views 42 Downloads - 6 API calls 40 Lines - 794 Bytes Apr 23, 2020 interface

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

.gg-search-found::after,
.gg-search-found::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute
}

.gg-search-found::after {
 border-radius: 3px;
 width: 2px;
 height: 8px;
 background: currentColor;
 transform: rotate(-45deg);
 top: 10px;
 left: 12px
}

.gg-search-found::before {
 width: 6px;
 height: 4px;
 border-left: 2px solid;
 border-bottom: 2px solid;
 transform: rotate(-40deg);
 top: 3px;
 left: 3px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.66542 10.2366L9.19751 8.951L10.4831 10.4831L13.5473 7.91194L14.8328 9.44402L10.2366 13.3007L7.66542 10.2366Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M16.2071 4.89344C19.0923 7.77862 19.3131 12.3193 16.8693 15.4578C16.8846 15.4713 16.8996 15.4854 16.9143 15.5L21.1569 19.7427C21.5474 20.1332 21.5474 20.7664 21.1569 21.1569C20.7664 21.5474 20.1332 21.5474 19.7427 21.1569L15.5 16.9143C15.4854 16.8996 15.4713 16.8846 15.4578 16.8693C12.3193 19.3131 7.77862 19.0923 4.89344 16.2071C1.76924 13.083 1.76924 8.01763 4.89344 4.89344C8.01763 1.76924 13.083 1.76924 16.2071 4.89344ZM14.7929 14.7929C17.1361 12.4498 17.1361 8.6508 14.7929 6.30765C12.4498 3.96451 8.6508 3.96451 6.30765 6.30765C3.96451 8.6508 3.96451 12.4498 6.30765 14.7929C8.6508 17.1361 12.4498 17.1361 14.7929 14.7929Z" fill="currentColor" /></svg>

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

CSSSVGTSX

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

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="M7.66542 10.2366L9.19751 8.951L10.4831 10.4831L13.5473 7.91194L14.8328 9.44402L10.2366 13.3007L7.66542 10.2366Z"
10	fill="currentColor"
11	/>
12	<path
13	fill-rule="evenodd"
14	clip-rule="evenodd"
15	d="M16.2071 4.89344C19.0923 7.77862 19.3131 12.3193 16.8693 15.4578C16.8846 15.4713 16.8996 15.4854 16.9143 15.5L21.1569 19.7427C21.5474 20.1332 21.5474 20.7664 21.1569 21.1569C20.7664 21.5474 20.1332 21.5474 19.7427 21.1569L15.5 16.9143C15.4854 16.8996 15.4713 16.8846 15.4578 16.8693C12.3193 19.3131 7.77862 19.0923 4.89344 16.2071C1.76924 13.083 1.76924 8.01763 4.89344 4.89344C8.01763 1.76924 13.083 1.76924 16.2071 4.89344ZM14.7929 14.7929C17.1361 12.4498 17.1361 8.6508 14.7929 6.30765C12.4498 3.96451 8.6508 3.96451 6.30765 6.30765C3.96451 8.6508 3.96451 12.4498 6.30765 14.7929C8.6508 17.1361 12.4498 17.1361 14.7929 14.7929Z"
16	fill="currentColor"
17	/>
18	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledSearchFound = styled.i`
5	& {
6	box-sizing: border-box;
7	position: relative;
8	display: block;
9	transform: scale(var(--ggs, 1));
10	width: 16px;
11	height: 16px;
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	}
24	&::after {
25	border-radius: 3px;
26	width: 2px;
27	height: 8px;
28	background: currentColor;
29	transform: rotate(-45deg);
30	top: 10px;
31	left: 12px;
32	}
33	&::before {
34	width: 6px;
35	height: 4px;
36	border-left: 2px solid;
37	border-bottom: 2px solid;
38	transform: rotate(-40deg);
39	top: 3px;
40	left: 3px;
41	}
42	`
43
44	export const SearchFound = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
45	(props, ref) => {
46	return (
47	<>
48	<StyledSearchFound {...props} ref={ref} icon-role="search-found" />
49	</>
50	)
51	},
52	)
53

HTMLCSSJSONXML

MarkupSVG Sprite

Search Found turned into a pure CSS icon built by adopting properties like: transform, width, height, border, border-radius, background, border-left, border-bottom,
Fun facts, it has: 40 Lines of code at 794b & 572b after compression. Truly wonderful 🤗 huhh.

Search Found

Thank you!