Glass Alt

Views Downloads - API calls 33 Lines - 696 Bytes Apr 23, 2020 interface

 .gg-glass-alt,
.gg-glass-alt::before {
 display: block;
 box-sizing: border-box;
 height: 20px
}

.gg-glass-alt {
 position: relative;
 transform: scale(var(--ggs,1));
 width: 14px
}

.gg-glass-alt::before {
 content: "";
 position: absolute;
 width: 10px;
 border: 2px solid;
 border-bottom: 3px solid;
 transform:
 perspective(20px)
 rotateX(-20deg);
 top: 2px;
 left: 2px;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 background:
 linear-gradient(
 to left,
 currentColor 10px,
 transparent 0
 ) no-repeat center 2px/6px 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="M5 2H19L17.3602 18.398C17.1557 20.4428 15.4351 22 13.38 22H10.62C8.56494 22 6.84428 20.4428 6.6398 18.398L5 2ZM7.50998 7L7.20998 4H16.79L16.49 7H7.50998ZM7.70998 9L8.62988 18.199C8.73212 19.2214 9.59245 20 10.62 20H13.38C14.4076 20 15.2679 19.2214 15.3701 18.199L16.29 9H7.70998Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledGlassAlt = styled.i` &, &::before { display: block; box-sizing: border-box; height: 20px; } & { position: relative; transform: scale(var(--ggs, 1)); width: 14px; } &::before { content: ''; position: absolute; width: 10px; border: 2px solid; border-bottom: 3px solid; transform: perspective(20px) rotateX(-20deg); top: 2px; left: 2px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background: linear-gradient(to left, currentColor 10px, transparent 0) no-repeat center 2px/6px 2px; }`export const GlassAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledGlassAlt {...props} ref={ref} icon-role="glass-alt" /></> ) },)

CSSSVGTSX

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

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="M5 2H19L17.3602 18.398C17.1557 20.4428 15.4351 22 13.38 22H10.62C8.56494 22 6.84428 20.4428 6.6398 18.398L5 2ZM7.50998 7L7.20998 4H16.79L16.49 7H7.50998ZM7.70998 9L8.62988 18.199C8.73212 19.2214 9.59245 20 10.62 20H13.38C14.4076 20 15.2679 19.2214 15.3701 18.199L16.29 9H7.70998Z"
12	fill="currentColor"
13	/>
14	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Glass Alt became a wonderful 100% CSS icon built by practicing features such as: .gg-glass-alt, height, transform, width, border, border-bottom, background,
Fun to know, it has: 33 Lines of code at 696b & 478b after compression. Pretty stunning 🤩 don't you think ?.

Glass Alt

Thank you!