Style
Views
Downloads - API calls
31 Lines - 496 Bytes
Apr 23, 2020 interface
1 .gg-style,
2 .gg-style::after ,
3 .gg-style::before { 4 display: block;
5 box-sizing: border-box;
6 width: 8px ;
7 height: 8px 8 } 9 10 .gg-style { 11 position: relative;
12 transform: scale(var(--ggs,1 ));
13 box-shadow: -3px 3px 0 -1px ,3px -3px 0 -1px 14 } 15 16 .gg-style::after ,
17 .gg-style::before { 18 content: "";
19 position: absolute;
20 border: 2px solid
21 } 22 23 .gg-style::before { 24 top: -5px ;
25 left: -5px 26 } 27 28 .gg-style::after { 29 bottom: -5px ;
30 right: -5px 31 }
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="M13 21 V13 H21 V21 H13 ZM15 15 H19 L19 19 H15 V15 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M3 11 L3 3 L11 3 V11 H3 ZM5 5 L9 5 V9 L5 9 L5 5 Z" 18 fill="currentColor" 19 /> 20 <path d="M18 6 V12 H16 V8 L12 8 V6 L18 6 Z" fill="currentColor" /> 21 <path d="M12 18 H6 L6 12 H8 L8 16 H12 V18 Z" fill="currentColor" /> 22 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledStyle = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 width: 8px ;11 height: 8px ;12 } 13 & { 14 position: relative;15 transform: scale(var(--ggs, 1 ));16 box-shadow: -3px 3px 0 -1px , 3px -3px 0 -1px ;17 } 18 &::after , 19 &::before { 20 content: '';21 position: absolute;22 border: 2px solid;23 } 24 &::before { 25 top: -5px ;26 left: -5px ;27 } 28 &::after { 29 bottom: -5px ;30 right: -5px ;31 } 32 ` 33 34 export const Style = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 35 (props, ref) => { 36 return ( 37 <> 38 <StyledStyle { ...props} ref={ ref} icon-role="style" /> 39 </> 40 ) 41 } , 42 ) 43
Style developed into a wonderful CSS icon built by using properties such as: .gg-style, width, height, transform, box-shadow, border, Fun to know, it has: 31 Lines of code at 496b & 361b after compression. Quite wonderful 🤗 don't you think ?.