Sidebar

196 Views 6 Downloads - 4 API calls 22 Lines - 375 Bytes Apr 23, 2020 interface

 .gg-sidebar,
.gg-sidebar::before {
 display: block;
 box-sizing: border-box;
 height: 16px
}

.gg-sidebar {
 border-left: 2px solid;
 position: relative;
 transform: scale(var(--ggs,1));
 width: 18px
}

.gg-sidebar::before {
 content: "";
 position: absolute;
 width: 14px;
 border: 2px solid;
 top: 0;
 left: 2px
}

<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="M21 20H7V4H21V20ZM19 18H9V6H19V18Z" fill="currentColor" /><path d="M3 20H5V4H3V20Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledSidebar = styled.i` &, &::before { display: block; box-sizing: border-box; height: 16px; } & { border-left: 2px solid; position: relative; transform: scale(var(--ggs, 1)); width: 18px; } &::before { content: ''; position: absolute; width: 14px; border: 2px solid; top: 0; left: 2px; }`export const Sidebar = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledSidebar {...props} ref={ref} icon-role="sidebar" /></> ) },)

CSSSVGTSX

1	.gg-sidebar,
2	.gg-sidebar::before {
3	display: block;
4	box-sizing: border-box;
5	height: 16px
6	}
7
8	.gg-sidebar {
9	border-left: 2px solid;
10	position: relative;
11	transform: scale(var(--ggs,1));
12	width: 18px
13	}
14
15	.gg-sidebar::before {
16	content: "";
17	position: absolute;
18	width: 14px;
19	border: 2px solid;
20	top: 0;
21	left: 2px
22	}

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="M21 20H7V4H21V20ZM19 18H9V6H19V18Z"
12	fill="currentColor"
13	/>
14	<path d="M3 20H5V4H3V20Z" fill="currentColor" />
15	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledSidebar = styled.i`
5	&,
6	&::before {
7	display: block;
8	box-sizing: border-box;
9	height: 16px;
10	}
11	& {
12	border-left: 2px solid;
13	position: relative;
14	transform: scale(var(--ggs, 1));
15	width: 18px;
16	}
17	&::before {
18	content: '';
19	position: absolute;
20	width: 14px;
21	border: 2px solid;
22	top: 0;
23	left: 2px;
24	}
25	`
26
27	export const Sidebar = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
28	(props, ref) => {
29	return (
30	<>
31	<StyledSidebar {...props} ref={ref} icon-role="sidebar" />
32	</>
33	)
34	},
35	)
36

HTMLCSSJSONXML

MarkupSVG Sprite

Sidebar developed into an amazing CSS icon built by practicing features such as: .gg-sidebar, height, transform, width, border,
Fun to know, it has: 22 Lines of code at 375b & 265b after compression. Actually awesome 🙆‍♂️ for a CSS designed icon.

Sidebar

Thank you!