Glass Alt
Views
Downloads - API calls
33 Lines - 696 Bytes
Apr 23, 2020 interface
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 2 H19 L17.3602 18.398 C17.1557 20.4428 15.4351 22 13.38 22 H10.62 C8.56494 22 6.84428 20.4428 6.6398 18.398 L5 2 ZM7.50998 7 L7.20998 4 H16.79 L16.49 7 H7.50998 ZM7.70998 9 L8.62988 18.199 C8.73212 19.2214 9.59245 20 10.62 20 H13.38 C14.4076 20 15.2679 19.2214 15.3701 18.199 L16.29 9 H7.70998 Z" 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
Glass Alt is a wonderful 100% CSS icon made by adopting attributes like: .gg-glass-alt, height, transform, width, border, border-bottom, background, Fun facts, it has: 33 Lines of code at 696b & 478b after compiling. Truly amazing 😲 for a CSS designed icon.