Umbrella interface
1 .gg-umbrella { 2 display: block;
3 box-sizing: border-box;
4 transform: scale(var(--ggs,1 ));
5 position: relative;
6 width: 22px ;
7 height: 22px ;
8 background:
9 linear-gradient(
10 to bottom,currentColor 20px ,transparent 0 )
11 no-repeat center 10px /2px 8px 12 } 13 14 .gg-umbrella::after ,.gg-umbrella::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute;
19 border: 2px solid
20 } 21 22 .gg-umbrella::before { 23 width: 16px ;
24 height: 10px ;
25 left: 3px ;
26 border-top-left-radius: 12px ;
27 border-top-right-radius: 12px 28 } 29 30 .gg-umbrella::after { 31 width: 6px ;
32 height: 5px ;
33 border-top: 0 ;
34 border-bottom-left-radius: 12px ;
35 border-bottom-right-radius: 12px ;
36 bottom: 0 ;
37 left: 6px 38 }
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="M4 9 C4 4.58172 7.58172 1 12 1 C16.4183 1 20 4.58172 20 9 V11 H13.0187 V20.5 C13.0187 21.8807 11.8994 23 10.5187 23 C9.13797 23 8.01868 21.8807 8.01868 20.5 V17.8571 H10.0187 V20.5 C10.0187 20.7761 10.2425 21 10.5187 21 C10.7948 21 11.0187 20.7761 11.0187 20.5 V11 H4 V9 ZM12 3 C15.3137 3 18 5.68629 18 9 H6 C6 5.68629 8.68629 3 12 3 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledUmbrella = styled.i` 5 & { 6 display: block;7 box-sizing: border-box;8 transform: scale(var(--ggs, 1 ));9 position: relative;10 width: 22px ;11 height: 22px ;12 background: linear-gradient(to bottom, currentColor 20px , transparent 0 ) no-repeat center 10px /2px 13 8px ; 14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 border: 2px solid;22 } 23 &::before { 24 width: 16px ;25 height: 10px ;26 left: 3px ;27 border-top-left-radius: 12px ;28 border-top-right-radius: 12px ;29 } 30 &::after { 31 width: 6px ;32 height: 5px ;33 border-top: 0 ;34 border-bottom-left-radius: 12px ;35 border-bottom-right-radius: 12px ;36 bottom: 0 ;37 left: 6px ;38 } 39 ` 40 41 export const Umbrella = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 42 (props, ref) => { 43 return ( 44 <> 45 <StyledUmbrella { ...props} ref={ ref} icon-role="umbrella" /> 46 </> 47 ) 48 } , 49 ) 50
Umbrella developed into a wonderful 100% CSS icon made by adopting features like: transform, width, height, background, border, border-top,
