Dialpad
770 Views
26 Downloads - 3 API calls
35 Lines - 542 Bytes
Apr 23, 2020 interface devices
1 .gg-dialpad { 2 transform: scale(var(--ggs,1 ));
3 } 4 5 .gg-dialpad,
6 .gg-dialpad::before { 7 box-shadow: -5px 0 0 , 5px 0 0 8 } 9 10 .gg-dialpad,
11 .gg-dialpad::after ,
12 .gg-dialpad::before { 13 box-sizing: border-box;
14 position: relative;
15 display: block;
16 width: 3px ;
17 height: 3px ;
18 background: currentColor
19 } 20 21 .gg-dialpad::after ,
22 .gg-dialpad::before { 23 content: "";
24 position: absolute;
25 left: 0 ;
26 } 27 28 .gg-dialpad::before { 29 bottom: 5px 30 } 31 32 .gg-dialpad::after { 33 box-shadow: -5px 0 0 , 5px 0 0 , 0 5px 0 ;
34 top: 5px 35 }
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 d="M5.5 3 H8.5 V6 H5.5 V3 Z" fill="currentColor" /> 9 <path d="M5.5 8 H8.5 V11 H5.5 V8 Z" fill="currentColor" /> 10 <path d="M5.5 13 V16 H8.5 V13 H5.5 Z" fill="currentColor" /> 11 <path d="M10.5 3 H13.5 V6 H10.5 V3 Z" fill="currentColor" /> 12 <path d="M10.5 8 V11 H13.5 V8 H10.5 Z" fill="currentColor" /> 13 <path d="M10.5 13 H13.5 V16 H10.5 V13 Z" fill="currentColor" /> 14 <path d="M10.5 18 V21 H13.5 V18 H10.5 Z" fill="currentColor" /> 15 <path d="M15.5 3 H18.5 V6 H15.5 V3 Z" fill="currentColor" /> 16 <path d="M15.5 8 V11 H18.5 V8 H15.5 Z" fill="currentColor" /> 17 <path d="M15.5 13 H18.5 V16 H15.5 V13 Z" fill="currentColor" /> 18 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDialpad = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::before { 10 box-shadow: -5px 0 0 , 5px 0 0 ;11 } 12 &, 13 &::after , 14 &::before { 15 box-sizing: border-box;16 position: relative;17 display: block;18 width: 3px ;19 height: 3px ;20 background: currentColor;21 } 22 &::after , 23 &::before { 24 content: '';25 position: absolute;26 left: 0 ;27 } 28 &::before { 29 bottom: 5px ;30 } 31 &::after { 32 box-shadow: -5px 0 0 , 5px 0 0 , 0 5px 0 ;33 top: 5px ;34 } 35 ` 36 37 export const Dialpad = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledDialpad { ...props} ref={ ref} icon-role="dialpad" /> 42 </> 43 ) 44 } , 45 ) 46
Dialpad ended up an amazing 100% CSS icon created by adopting properties like: transform, width, height, background, Fun facts, it has: 35 Lines of code at 542b & 421b minified. Pretty awesome 🙆♂️ don't you think ?.