Voicemail
1K Views
Downloads - API calls
35 Lines - 697 Bytes
Apr 23, 2020 interface multimedia
1 .gg-voicemail-r { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 21px ;
7 height: 14px ;
8 background:
9 linear-gradient(
10 to left,currentColor 10px ,transparent 0 )
11 no-repeat 5px 6px /7px 2px ;
12 border-radius: 3px ;
13 border: 2px solid
14 } 15 16 .gg-voicemail-r::after ,
17 .gg-voicemail-r::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 width: 6px ;
23 height: 6px ;
24 border: 2px solid;
25 border-radius: 10px ;
26 top: 2px 27 } 28 29 .gg-voicemail-r::before { 30 left: 2px 31 } 32 33 .gg-voicemail-r::after { 34 right: 2px 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 9 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M11.5 12 C11.5 12.3506 11.4398 12.6872 11.3293 13 H13.6707 C13.5602 12.6872 13.5 12.3506 13.5 12 C13.5 10.3431 14.8431 9 16.5 9 C18.1569 9 19.5 10.3431 19.5 12 C19.5 13.6569 18.1569 15 16.5 15 H8.5 C6.84315 15 5.5 13.6569 5.5 12 C5.5 10.3431 6.84315 9 8.5 9 C10.1569 9 11.5 10.3431 11.5 12 ZM9.5 12 C9.5 12.5523 9.05228 13 8.5 13 C7.94772 13 7.5 12.5523 7.5 12 C7.5 11.4477 7.94772 11 8.5 11 C9.05228 11 9.5 11.4477 9.5 12 ZM17.5 12 C17.5 12.5523 17.0523 13 16.5 13 C15.9477 13 15.5 12.5523 15.5 12 C15.5 11.4477 15.9477 11 16.5 11 C17.0523 11 17.5 11.4477 17.5 12 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M1.5 8 C1.5 6.34315 2.84315 5 4.5 5 H19.5 C21.1569 5 22.5 6.34315 22.5 8 V16 C22.5 17.6569 21.1569 19 19.5 19 H4.5 C2.84315 19 1.5 17.6569 1.5 16 V8 ZM4.5 7 H19.5 C20.0523 7 20.5 7.44772 20.5 8 V16 C20.5 16.5523 20.0523 17 19.5 17 H4.5 C3.94772 17 3.5 16.5523 3.5 16 V8 C3.5 7.44772 3.94772 7 4.5 7 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledVoicemailR = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 21px ;11 height: 14px ;12 background: linear-gradient(to left, currentColor 10px , transparent 0 ) no-repeat 5px 6px /7px 2px ;13 border-radius: 3px ;14 border: 2px solid;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 6px ;23 height: 6px ;24 border: 2px solid;25 border-radius: 10px ;26 top: 2px ;27 } 28 &::before { 29 left: 2px ;30 } 31 &::after { 32 right: 2px ;33 } 34 ` 35 36 export const VoicemailR = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledVoicemailR { ...props} ref={ ref} icon-role="voicemail-r" /> 41 </> 42 ) 43 } , 44 ) 45
Voicemail turned into a 100% CSS icon made by applying features such as: transform, width, height, background, border-radius, border, .gg-voicemail-r, Fun facts, it has: 35 Lines of code at 697b & 494b minified. Pretty marvelous 💎 huhh.