Poll interface
1 .gg-poll { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 16px ;
7 height: 16px ;
8 border: 3px solid transparent;
9 border-top: 6px solid transparent;
10 box-shadow: 0 0 0 2px ,inset 2px 0 0 ;
11 border-radius: 1px 12 } 13 14 .gg-poll::after ,
15 .gg-poll::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute;
20 width: 2px ;
21 height: 10px ;
22 background: currentColor;
23 top: -3px ;
24 left: 4px 25 } 26 27 .gg-poll::after { 28 height: 4px ;
29 top: 3px ;
30 left: 8px 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="M19 4 H5 C4.44771 4 4 4.44772 4 5 V19 C4 19.5523 4.44772 20 5 20 H19 C19.5523 20 20 19.5523 20 19 V5 C20 4.44771 19.5523 4 19 4 ZM5 2 C3.34315 2 2 3.34315 2 5 V19 C2 20.6569 3.34315 22 5 22 H19 C20.6569 22 22 20.6569 22 19 V5 C22 3.34315 20.6569 2 19 2 H5 Z" 12 fill="currentColor" 13 /> 14 <path d="M11 7 H13 V17 H11 V7 Z" fill="currentColor" /> 15 <path d="M15 13 H17 V17 H15 V13 Z" fill="currentColor" /> 16 <path d="M7 10 H9 V17 H7 V10 Z" fill="currentColor" /> 17 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPoll = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 16px ;11 height: 16px ;12 border: 3px solid transparent;13 border-top: 6px solid transparent;14 box-shadow: 0 0 0 2px , inset 2px 0 0 ;15 border-radius: 1px ;16 } 17 &::after , 18 &::before { 19 content: '';20 display: block;21 box-sizing: border-box;22 position: absolute;23 width: 2px ;24 height: 10px ;25 background: currentColor;26 top: -3px ;27 left: 4px ;28 } 29 &::after { 30 height: 4px ;31 top: 3px ;32 left: 8px ;33 } 34 ` 35 36 export const Poll = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledPoll { ...props} ref={ ref} icon-role="poll" /> 41 </> 42 ) 43 } , 44 ) 45
Poll ended up a magic pure CSS icon created by using attributes like: transform, width, height, border, border-top, box-shadow, border-radius, background,
