Smartphone Chip

1K Views 46 Downloads - 5 API calls 35 Lines - 717 Bytes Apr 23, 2020 devices

 .gg-smartphone-chip {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border: 6px double;
 border-radius: 3px
}

.gg-smartphone-chip::after {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 border-radius: 3px;
 width: 2px;
 height: 2px;
 left: -3px;
 top: -9px;
 background: currentColor;
 box-shadow:
 4px 0 0,
 8px 0 0,
 0 20px 0,
 4px 20px 0,
 -6px 6px 0,
 14px 6px 0,
 14px 10px 0,
 14px 14px 0,
 -6px 10px 0,
 -6px 14px 0,
 8px 20px 0
}

<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="M9 22C9 22.5523 8.55228 23 8 23C7.44772 23 7 22.5523 7 22C7 21.4477 7.44772 21 8 21C8.55228 21 9 21.4477 9 22ZM13 22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22C11 21.4477 11.4477 21 12 21C12.5523 21 13 21.4477 13 22ZM16 23C16.5523 23 17 22.5523 17 22C17 21.4477 16.5523 21 16 21C15.4477 21 15 21.4477 15 22C15 22.5523 15.4477 23 16 23Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C9 2.55228 8.55228 3 8 3C7.44772 3 7 2.55228 7 2C7 1.44772 7.44772 1 8 1C8.55228 1 9 1.44772 9 2ZM13 2C13 2.55228 12.5523 3 12 3C11.4477 3 11 2.55228 11 2C11 1.44772 11.4477 1 12 1C12.5523 1 13 1.44772 13 2ZM16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3ZM9 22C9 22.5523 8.55228 23 8 23C7.44772 23 7 22.5523 7 22C7 21.4477 7.44772 21 8 21C8.55228 21 9 21.4477 9 22ZM13 22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22C11 21.4477 11.4477 21 12 21C12.5523 21 13 21.4477 13 22ZM16 23C16.5523 23 17 22.5523 17 22C17 21.4477 16.5523 21 16 21C15.4477 21 15 21.4477 15 22C15 22.5523 15.4477 23 16 23ZM23 16C23 15.4477 22.5523 15 22 15C21.4477 15 21 15.4477 21 16C21 16.5523 21.4477 17 22 17C22.5523 17 23 16.5523 23 16ZM23 12C23 11.4477 22.5523 11 22 11C21.4477 11 21 11.4477 21 12C21 12.5523 21.4477 13 22 13C22.5523 13 23 12.5523 23 12ZM22 7C22.5523 7 23 7.44771 23 8C23 8.55229 22.5523 9 22 9C21.4477 9 21 8.55229 21 8C21 7.44771 21.4477 7 22 7ZM2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15ZM2 11C2.55228 11 3 11.4477 3 12C3 12.5523 2.55228 13 2 13C1.44772 13 1 12.5523 1 12C1 11.4477 1.44772 11 2 11ZM3 8C3 7.44771 2.55228 7 2 7C1.44772 7 1 7.44771 1 8C1 8.55229 1.44772 9 2 9C2.55228 9 3 8.55229 3 8ZM17 6H7C6.44772 6 6 6.44772 6 7V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V7C18 6.44772 17.5523 6 17 6ZM7 4C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20H17C18.6569 20 20 18.6569 20 17V7C20 5.34315 18.6569 4 17 4H7ZM14 10H10V14H14V10ZM8 8V16H16V8H8Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledSmartphoneChip = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border: 6px double; border-radius: 3px; } &::after { content: ''; display: block; box-sizing: border-box; position: absolute; border-radius: 3px; width: 2px; height: 2px; left: -3px; top: -9px; background: currentColor; box-shadow: 4px 0 0, 8px 0 0, 0 20px 0, 4px 20px 0, -6px 6px 0, 14px 6px 0, 14px 10px 0, 14px 14px 0, -6px 10px 0, -6px 14px 0, 8px 20px 0; }`export const SmartphoneChip = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledSmartphoneChip {...props} ref={ref} icon-role="smartphone-chip" /></> ) },)

CSSSVGTSX

1	.gg-smartphone-chip {
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: 6px double;
9	border-radius: 3px
10	}
11
12	.gg-smartphone-chip::after {
13	content: "";
14	display: block;
15	box-sizing: border-box;
16	position: absolute;
17	border-radius: 3px;
18	width: 2px;
19	height: 2px;
20	left: -3px;
21	top: -9px;
22	background: currentColor;
23	box-shadow:
24	4px 0 0,
25	8px 0 0,
26	0 20px 0,
27	4px 20px 0,
28	-6px 6px 0,
29	14px 6px 0,
30	14px 10px 0,
31	14px 14px 0,
32	-6px 10px 0,
33	-6px 14px 0,
34	8px 20px 0
35	}

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="M9 22C9 22.5523 8.55228 23 8 23C7.44772 23 7 22.5523 7 22C7 21.4477 7.44772 21 8 21C8.55228 21 9 21.4477 9 22ZM13 22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22C11 21.4477 11.4477 21 12 21C12.5523 21 13 21.4477 13 22ZM16 23C16.5523 23 17 22.5523 17 22C17 21.4477 16.5523 21 16 21C15.4477 21 15 21.4477 15 22C15 22.5523 15.4477 23 16 23Z"
12	fill="currentColor"
13	/>
14	<path
15	fill-rule="evenodd"
16	clip-rule="evenodd"
17	d="M9 2C9 2.55228 8.55228 3 8 3C7.44772 3 7 2.55228 7 2C7 1.44772 7.44772 1 8 1C8.55228 1 9 1.44772 9 2ZM13 2C13 2.55228 12.5523 3 12 3C11.4477 3 11 2.55228 11 2C11 1.44772 11.4477 1 12 1C12.5523 1 13 1.44772 13 2ZM16 3C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1C15.4477 1 15 1.44772 15 2C15 2.55228 15.4477 3 16 3ZM9 22C9 22.5523 8.55228 23 8 23C7.44772 23 7 22.5523 7 22C7 21.4477 7.44772 21 8 21C8.55228 21 9 21.4477 9 22ZM13 22C13 22.5523 12.5523 23 12 23C11.4477 23 11 22.5523 11 22C11 21.4477 11.4477 21 12 21C12.5523 21 13 21.4477 13 22ZM16 23C16.5523 23 17 22.5523 17 22C17 21.4477 16.5523 21 16 21C15.4477 21 15 21.4477 15 22C15 22.5523 15.4477 23 16 23ZM23 16C23 15.4477 22.5523 15 22 15C21.4477 15 21 15.4477 21 16C21 16.5523 21.4477 17 22 17C22.5523 17 23 16.5523 23 16ZM23 12C23 11.4477 22.5523 11 22 11C21.4477 11 21 11.4477 21 12C21 12.5523 21.4477 13 22 13C22.5523 13 23 12.5523 23 12ZM22 7C22.5523 7 23 7.44771 23 8C23 8.55229 22.5523 9 22 9C21.4477 9 21 8.55229 21 8C21 7.44771 21.4477 7 22 7ZM2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15ZM2 11C2.55228 11 3 11.4477 3 12C3 12.5523 2.55228 13 2 13C1.44772 13 1 12.5523 1 12C1 11.4477 1.44772 11 2 11ZM3 8C3 7.44771 2.55228 7 2 7C1.44772 7 1 7.44771 1 8C1 8.55229 1.44772 9 2 9C2.55228 9 3 8.55229 3 8ZM17 6H7C6.44772 6 6 6.44772 6 7V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V7C18 6.44772 17.5523 6 17 6ZM7 4C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20H17C18.6569 20 20 18.6569 20 17V7C20 5.34315 18.6569 4 17 4H7ZM14 10H10V14H14V10ZM8 8V16H16V8H8Z"
18	fill="currentColor"
19	/>
20	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledSmartphoneChip = 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: 6px double;
13	border-radius: 3px;
14	}
15	&::after {
16	content: '';
17	display: block;
18	box-sizing: border-box;
19	position: absolute;
20	border-radius: 3px;
21	width: 2px;
22	height: 2px;
23	left: -3px;
24	top: -9px;
25	background: currentColor;
26	box-shadow: 4px 0 0, 8px 0 0, 0 20px 0, 4px 20px 0, -6px 6px 0, 14px 6px 0, 14px 10px 0,
27	14px 14px 0, -6px 10px 0, -6px 14px 0, 8px 20px 0;
28	}
29	`
30
31	export const SmartphoneChip = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
32	(props, ref) => {
33	return (
34	<>
35	<StyledSmartphoneChip {...props} ref={ref} icon-role="smartphone-chip" />
36	</>
37	)
38	},
39	)
40

HTMLCSSJSONXML

MarkupSVG Sprite

Smartphone Chip turned into a magic 100% CSS icon made by applying properties such as: transform, width, height, border, border-radius, background, box-shadow,
Some stats, it has: 35 Lines of code at 717b & 465b after compiling. Pretty wonderful 🤗 for a icon designed by code.

Smartphone Chip

Thank you!