Tap Double
Views
Downloads - API calls
34 Lines - 683 Bytes
Apr 23, 2020 interface
1 .gg-tap-double { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 20px ;
7 height: 22px 8 } 9 10 .gg-tap-double::after ,
11 .gg-tap-double::before { 12 content: "";
13 display: block;
14 box-sizing: border-box;
15 position: absolute;
16 border-radius: 22px 17 } 18 19 .gg-tap-double::before { 20 width: 20px ;
21 height: 20px ;
22 border: 6px double transparent;
23 border-top: 6px double
24 } 25 26 .gg-tap-double::after { 27 width: 6px ;
28 height: 10px ;
29 border: 2px solid transparent;
30 border-bottom-width: 5px ;
31 box-shadow: 0 0 0 2px ,inset 0 0 0 2px ;
32 left: 7px ;
33 bottom: 2px 34 }
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="M14.9236 18 V14 C14.9236 12.3431 13.5804 11 11.9236 11 C10.2667 11 8.92355 12.3431 8.92355 14 V18 C8.92355 19.6569 10.2667 21 11.9236 21 C13.5804 21 14.9236 19.6569 14.9236 18 ZM11.9236 9 C9.16213 9 6.92355 11.2386 6.92355 14 V18 C6.92355 20.7614 9.16213 23 11.9236 23 C14.685 23 16.9236 20.7614 16.9236 18 V14 C16.9236 11.2386 14.685 9 11.9236 9 Z" 12 fill="currentColor" 13 /> 14 <path 15 d="M10.9236 14 C10.9236 13.4477 11.3713 13 11.9236 13 C12.4758 13 12.9236 13.4477 12.9236 14 V17 H10.9236 V14 Z" 16 fill="currentColor" 17 /> 18 <path 19 d="M11.9235 1 C14.7023 1 17.2164 2.13339 19.0286 3.96311 L17.6144 5.37735 C16.1641 3.90955 14.15 3 11.9235 3 C9.77436 3 7.82311 3.84749 6.38577 5.22651 L4.97131 3.81205 C6.7708 2.07122 9.22207 1 11.9235 1 Z" 20 fill="currentColor" 21 /> 22 <path 23 fill-rule="evenodd" 24 clip-rule="evenodd" 25 d="M11.9233 5 C13.5809 5 15.1038 5.5761 16.3029 6.53898 L14.8768 7.9651 C14.0493 7.35833 13.0281 7 11.9233 7 C10.848 7 9.85204 7.33943 9.03662 7.91699 L7.60779 6.48816 C8.79686 5.55586 10.2952 5 11.9233 5 Z" 26 fill="currentColor" 27 /> 28 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledTapDouble = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 20px ;11 height: 22px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 border-radius: 22px ;20 } 21 &::before { 22 width: 20px ;23 height: 20px ;24 border: 6px double transparent;25 border-top: 6px double;26 } 27 &::after { 28 width: 6px ;29 height: 10px ;30 border: 2px solid transparent;31 border-bottom-width: 5px ;32 box-shadow: 0 0 0 2px , inset 0 0 0 2px ;33 left: 7px ;34 bottom: 2px ;35 } 36 ` 37 38 export const TapDouble = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledTapDouble { ...props} ref={ ref} icon-role="tap-double" /> 43 </> 44 ) 45 } , 46 ) 47
Tap Double is a 100% CSS icon made by applying properties such as: transform, width, height, border-radius, border, border-top, border-bottom-width, box-shadow, Some stats, it has: 34 Lines of code at 683b & 503b minified. Quite stunning 🤩 don't you think ?.