Assign
3K Views
69 Downloads - 31 API calls
26 Lines - 529 Bytes
Apr 23, 2020 buttons code
1 .gg-assign { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 width: 6px ;
6 height: 6px ;
7 background: currentColor;
8 transform: scale(var(--ggs,1 ));
9 border-radius: 100px 10 } 11 12 .gg-assign::before { 13 content: "";
14 display: block;
15 box-sizing: border-box;
16 position: absolute;
17 width: 12px ;
18 height: 12px ;
19 box-shadow:
20 -5px -5px 0 -3px ,
21 5px 5px 0 -3px ,
22 5px -5px 0 -3px ,
23 -5px 5px 0 -3px ;
24 left: -3px ;
25 top: -3px 26 }
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="M6 6 H10 V4 H4 V10 H6 V6 Z" fill="currentColor" /> 9 <path d="M10 18 H6 V14 H4 V20 H10 V18 Z" fill="currentColor" /> 10 <path d="M14 6 H18 V10 H20 V4 H14 V6 Z" fill="currentColor" /> 11 <path d="M14 18 H18 V14 H20 V20 H14 V18 Z" fill="currentColor" /> 12 <path 13 d="M12 8.5 C10.067 8.5 8.5 10.067 8.5 12 C8.5 13.933 10.067 15.5 12 15.5 C13.933 15.5 15.5 13.933 15.5 12 C15.5 10.067 13.933 8.5 12 8.5 Z" 14 fill="currentColor" 15 /> 16 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledAssign = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 width: 6px ;10 height: 6px ;11 background: currentColor;12 transform: scale(var(--ggs, 1 ));13 border-radius: 100px ;14 } 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 width: 12px ;21 height: 12px ;22 box-shadow: -5px -5px 0 -3px , 5px 5px 0 -3px , 5px -5px 0 -3px , -5px 5px 0 -3px ;23 left: -3px ;24 top: -3px ;25 } 26 ` 27 28 export const Assign = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 29 (props, ref) => { 30 return ( 31 <> 32 <StyledAssign { ...props} ref={ ref} icon-role="assign" /> 33 </> 34 ) 35 } , 36 ) 37
Assign ended up a magic CSS icon made by practicing features like: width, height, background, transform, border-radius, box-shadow, Fun facts, it has: 26 Lines of code at 529b & 361b minified. Pretty marvelous 💎 for a CSS designed icon.