Plug interface
1 .gg-plug { 2 position: relative;
3 display: block;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 12px ;
7 height: 20px 8 } 9 10 .gg-plug::after ,
11 .gg-plug::before { 12 content: "";
13 display: block;
14 box-sizing: border-box;
15 position: absolute
16 } 17 18 .gg-plug::before { 19 width: 12px ;
20 height: 10px ;
21 border: 2px solid;
22 border-bottom-left-radius: 8px ;
23 border-bottom-right-radius: 8px ;
24 top: 5px 25 } 26 27 .gg-plug::after { 28 width: 2px ;
29 height: 4px ;
30 background: currentColor;
31 left: 2px ;
32 border-radius: 22px ;
33 box-shadow:
34 6px 0 0 ,
35 3px 14px 0 ,
36 3px 16px 0 37 }
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="M9 2 C8.44771 2 8 2.44772 8 3 V5 C8 5.55228 8.44771 6 9 6 C9.55229 6 10 5.55228 10 5 V3 C10 2.44772 9.55229 2 9 2 ZM8 9 H16 V11 C16 13.2091 14.2091 15 12 15 C9.79086 15 8 13.2091 8 11 V9 ZM13 16.917 C15.8377 16.441 18 13.973 18 11 V7 H6 V11 C6 13.973 8.16229 16.441 11 16.917 V22 C11 22.5523 11.4477 23 12 23 C12.5523 23 13 22.5523 13 22 V16.917 ZM14 3 C14 2.44772 14.4477 2 15 2 C15.5523 2 16 2.44772 16 3 V5 C16 5.55228 15.5523 6 15 6 C14.4477 6 14 5.55228 14 5 V3 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPlug = styled.i` 5 & { 6 position: relative;7 display: block;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 12px ;11 height: 20px ;12 } 13 &::after , 14 &::before { 15 content: '';16 display: block;17 box-sizing: border-box;18 position: absolute;19 } 20 &::before { 21 width: 12px ;22 height: 10px ;23 border: 2px solid;24 border-bottom-left-radius: 8px ;25 border-bottom-right-radius: 8px ;26 top: 5px ;27 } 28 &::after { 29 width: 2px ;30 height: 4px ;31 background: currentColor;32 left: 2px ;33 border-radius: 22px ;34 box-shadow: 6px 0 0 , 3px 14px 0 , 3px 16px 0 ;35 } 36 ` 37 38 export const Plug = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 39 (props, ref) => { 40 return ( 41 <> 42 <StyledPlug { ...props} ref={ ref} icon-role="plug" /> 43 </> 44 ) 45 } , 46 ) 47
Plug became a wonderful CSS icon created by applying features like: transform, width, height, border, background, border-radius, box-shadow,
