Sidebar Right

1K Views 40 Downloads - 3 API calls 21 Lines - 417 Bytes Apr 23, 2020 interface

 .gg-sidebar-right {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 18px;
 height: 16px;
 border-right: 2px solid
}

.gg-sidebar-right::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 14px;
 height: 16px;
 border: 2px solid;
 top: 0;
 right: 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="M3 4H17V20H3V4ZM5 6H15V18H5V6Z" fill="currentColor" /><path d="M21 4H19V20H21V4Z" fill="currentColor" /></svg>

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

CSSSVGTSX

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

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="M3 4H17V20H3V4ZM5 6H15V18H5V6Z"
12	fill="currentColor"
13	/>
14	<path d="M21 4H19V20H21V4Z" fill="currentColor" />
15	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledSidebarRight = 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	border-right: 2px solid;
13	}
14	&::before {
15	content: '';
16	display: block;
17	box-sizing: border-box;
18	position: absolute;
19	width: 14px;
20	height: 16px;
21	border: 2px solid;
22	top: 0;
23	right: 2px;
24	}
25	`
26
27	export const SidebarRight = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
28	(props, ref) => {
29	return (
30	<>
31	<StyledSidebarRight {...props} ref={ref} icon-role="sidebar-right" />
32	</>
33	)
34	},
35	)
36

HTMLCSSJSONXML

MarkupSVG Sprite

Sidebar Right turned into a magic CSS icon created by adopting properties such as: transform, width, height, border-right, border,
Fun to know, it has: 21 Lines of code at 417b & 295b after compression. Quite marvelous 💎 for a CSS designed icon.

Sidebar Right

Thank you!