Ghost

2K Views 45 Downloads - 9 API calls 31 Lines - 659 Bytes Apr 23, 2020 brands

 .gg-ghost {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 18px;
 height: 16px;
 background:
 linear-gradient(to left,
 currentColor 40px,transparent 0)
 no-repeat -6px center/40px 4px;
 overflow: hidden
}

.gg-ghost::after,.gg-ghost::before {
 content: "";
 background: currentColor;
 box-sizing: border-box;
 position: absolute;
 display: block;
 height: 4px;
 width: 12px;
 box-shadow: 14px 0 0
}

.gg-ghost::after {
 width: 20px;
 left: -12px;
 box-shadow: 22px 0 0;
 bottom: 0
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 4H15V8H3V4Z" fill="currentColor" /><path d="M21 8H17V4H21V8Z" fill="currentColor" /><path d="M3 10H21V14H3V10Z" fill="currentColor" /><path d="M11 16H3V20H11V16Z" fill="currentColor" /><path d="M13 16V20H21V16H13Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledGhost = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: scale(var(--ggs, 1)); width: 18px; height: 16px; background: linear-gradient(to left, currentColor 40px, transparent 0) no-repeat -6px center/40px 4px; overflow: hidden; } &::after, &::before { content: ''; background: currentColor; box-sizing: border-box; position: absolute; display: block; height: 4px; width: 12px; box-shadow: 14px 0 0; } &::after { width: 20px; left: -12px; box-shadow: 22px 0 0; bottom: 0; }`export const Ghost = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledGhost {...props} ref={ref} icon-role="ghost" /></> ) },)

CSSSVGTSX

1	.gg-ghost {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: scale(var(--ggs,1));
6	width: 18px;
7	height: 16px;
8	background:
9	linear-gradient(to left,
10	currentColor 40px,transparent 0)
11	no-repeat -6px center/40px 4px;
12	overflow: hidden
13	}
14
15	.gg-ghost::after,.gg-ghost::before {
16	content: "";
17	background: currentColor;
18	box-sizing: border-box;
19	position: absolute;
20	display: block;
21	height: 4px;
22	width: 12px;
23	box-shadow: 14px 0 0
24	}
25
26	.gg-ghost::after {
27	width: 20px;
28	left: -12px;
29	box-shadow: 22px 0 0;
30	bottom: 0
31	}

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 d="M3 4H15V8H3V4Z" fill="currentColor" />
9	<path d="M21 8H17V4H21V8Z" fill="currentColor" />
10	<path d="M3 10H21V14H3V10Z" fill="currentColor" />
11	<path d="M11 16H3V20H11V16Z" fill="currentColor" />
12	<path d="M13 16V20H21V16H13Z" fill="currentColor" />
13	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Ghost ended up an amazing CSS icon created by using attributes such as: transform, width, height, background, overflow, box-shadow,
Fun facts, it has: 31 Lines of code at 659b & 465b after compression. Pretty marvelous 💎 for a CSS designed icon.

Ghost

Thank you!