Band Aid
Views
Downloads - API calls
42 Lines - 773 Bytes
Apr 23, 2020 interface
1 .gg-band-aid { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform:
6 rotate(-25deg )
7 scale(var(--ggs,1 ));
8 width: 24px ;
9 height: 12px ;
10 border: 2px solid;
11 border-radius: 22px 12 } 13 14 .gg-band-aid::after ,
15 .gg-band-aid::before { 16 content: "";
17 display: block;
18 box-sizing: border-box;
19 position: absolute
20 } 21 22 .gg-band-aid::before { 23 width: 12px ;
24 height: 10px ;
25 top: -2px ;
26 left: 4px ;
27 border-left: 2px solid;
28 border-right: 2px solid
29 } 30 31 .gg-band-aid::after { 32 width: 2px ;
33 height: 2px ;
34 background: currentColor;
35 box-shadow:
36 0 4px 0 ,
37 4px 0 0 ,
38 4px 4px 0 ;
39 border-radius: 22px ;
40 left: 7px ;
41 top: 1px 42 }
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 d="M11.9389 9.76478 C11.7055 10.2653 11.1105 10.4819 10.61 10.2485 C10.1094 10.0151 9.89288 9.42008 10.1263 8.91954 C10.3597 8.419 10.9547 8.20244 11.4552 8.43585 C11.9558 8.66925 12.1723 9.26423 11.9389 9.76478 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M8.9195 13.8737 C9.42004 14.1071 10.015 13.8905 10.2484 13.39 C10.4818 12.8895 10.2653 12.2945 9.76474 12.0611 C9.2642 11.8277 8.66922 12.0442 8.43581 12.5448 C8.20241 13.0453 8.41896 13.6403 8.9195 13.8737 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M13.8737 15.0805 C13.6403 15.581 13.0453 15.7976 12.5447 15.5642 C12.0442 15.3308 11.8276 14.7358 12.061 14.2352 C12.2944 13.7347 12.8894 13.5181 13.39 13.7516 C13.8905 13.985 14.1071 14.5799 13.8737 15.0805 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M14.2352 11.9389 C14.7357 12.1723 15.3307 11.9558 15.5641 11.4552 C15.7975 10.9547 15.581 10.3597 15.0804 10.1263 C14.5799 9.89292 13.9849 10.1095 13.7515 10.61 C13.5181 11.1106 13.7347 11.7055 14.2352 11.9389 Z" 22 fill="currentColor" 23 /> 24 <path 25 fill-rule="evenodd" 26 clip-rule="evenodd" 27 d="M17.0714 1.12432 C14.0682 -0.276119 10.4983 1.02321 9.09783 4.02645 L4.02641 14.9021 C2.62598 17.9054 3.92531 21.4753 6.92855 22.8757 C9.93179 24.2761 13.5017 22.9768 14.9021 19.9736 L19.9735 9.09787 C21.374 6.09463 20.0746 2.52475 17.0714 1.12432 ZM13.9347 17.3157 L17.3157 10.0653 L10.0652 6.6843 L6.68427 13.9348 L13.9347 17.3157 ZM13.0895 19.1283 L5.83903 15.7474 C4.90541 17.7495 5.77163 20.1295 7.77379 21.0631 C9.77595 21.9967 12.1559 21.1305 13.0895 19.1283 ZM16.2262 2.93693 C18.2283 3.87055 19.0945 6.25047 18.1609 8.25264 L10.9104 4.87169 C11.8441 2.86953 14.224 2.00331 16.2262 2.93693 Z" 28 fill="currentColor" 29 /> 30 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledBandAid = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: rotate(-25deg ) scale(var(--ggs, 1 ));10 width: 24px ;11 height: 12px ;12 border: 2px solid;13 border-radius: 22px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 } 22 &::before { 23 width: 12px ;24 height: 10px ;25 top: -2px ;26 left: 4px ;27 border-left: 2px solid;28 border-right: 2px solid;29 } 30 &::after { 31 width: 2px ;32 height: 2px ;33 background: currentColor;34 box-shadow: 0 4px 0 , 4px 0 0 , 4px 4px 0 ;35 border-radius: 22px ;36 left: 7px ;37 top: 1px ;38 } 39 ` 40 41 export const BandAid = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledBandAid { ...props} ref={ ref} icon-role="band-aid" /> 46 </> 47 ) 48 } , 49 ) 50
Band Aid ended up an amazing pure CSS icon created by using attributes like: transform, width, height, border, border-radius, border-left, border-right, background, box-shadow, Fun to know, it has: 42 Lines of code at 773b & 521b after compression. Actually stunning 🤩 for a icon designed by code.