Log Off

3K Views 50 Downloads - 4 API calls 24 Lines - 499 Bytes Apr 23, 2020 interface buttons

 .gg-log-off {
 box-sizing: border-box;
 position: relative;
 display: block;
 border-radius: 16px;
 border: 2px solid;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border-top: 2px solid transparent
}

.gg-log-off::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 border-radius: 3px;
 height: 8px;
 width: 2px;
 background: currentColor;
 left: 5px;
 bottom: 6px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 4.00894C13.0002 3.45665 12.5527 3.00876 12.0004 3.00854C11.4481 3.00833 11.0002 3.45587 11 4.00815L10.9968 12.0116C10.9966 12.5639 11.4442 13.0118 11.9965 13.012C12.5487 13.0122 12.9966 12.5647 12.9968 12.0124L13 4.00894Z" fill="currentColor" /><path d="M4 12.9917C4 10.7826 4.89541 8.7826 6.34308 7.33488L7.7573 8.7491C6.67155 9.83488 6 11.3349 6 12.9917C6 16.3054 8.68629 18.9917 12 18.9917C15.3137 18.9917 18 16.3054 18 12.9917C18 11.3348 17.3284 9.83482 16.2426 8.74903L17.6568 7.33481C19.1046 8.78253 20 10.7825 20 12.9917C20 17.41 16.4183 20.9917 12 20.9917C7.58172 20.9917 4 17.41 4 12.9917Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledLogOff = styled.i` & { box-sizing: border-box; position: relative; display: block; border-radius: 16px; border: 2px solid; transform: scale(var(--ggs, 1)); width: 16px; height: 16px; border-top: 2px solid transparent; } &::before { content: ''; display: block; box-sizing: border-box; position: absolute; border-radius: 3px; height: 8px; width: 2px; background: currentColor; left: 5px; bottom: 6px; }`export const LogOff = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledLogOff {...props} ref={ref} icon-role="log-off" /></> ) },)

CSSSVGTSX

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

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="M13 4.00894C13.0002 3.45665 12.5527 3.00876 12.0004 3.00854C11.4481 3.00833 11.0002 3.45587 11 4.00815L10.9968 12.0116C10.9966 12.5639 11.4442 13.0118 11.9965 13.012C12.5487 13.0122 12.9966 12.5647 12.9968 12.0124L13 4.00894Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M4 12.9917C4 10.7826 4.89541 8.7826 6.34308 7.33488L7.7573 8.7491C6.67155 9.83488 6 11.3349 6 12.9917C6 16.3054 8.68629 18.9917 12 18.9917C15.3137 18.9917 18 16.3054 18 12.9917C18 11.3348 17.3284 9.83482 16.2426 8.74903L17.6568 7.33481C19.1046 8.78253 20 10.7825 20 12.9917C20 17.41 16.4183 20.9917 12 20.9917C7.58172 20.9917 4 17.41 4 12.9917Z"
14	fill="currentColor"
15	/>
16	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Log Off ended up a magic CSS icon created by practicing properties as follows: border-radius, border, transform, width, height, border-top, background,
Fun to know, it has: 24 Lines of code at 499b & 356b minified. Quite marvelous 💎 huhh.

Log Off

Thank you!