Smart Home Wash Machine interface
1 .gg-smart-home-wash-machine { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 20px ;
8 border: 2px solid;
9 background:
10 linear-gradient(
11 to left,
12 currentColor 18px ,
13 transparent 0 14 ) no-repeat center 4px /18px 2px ;
15 border-radius: 3px 16 } 17 18 .gg-smart-home-wash-machine::after ,
19 .gg-smart-home-wash-machine::before { 20 content: "";
21 position: absolute;
22 display: block;
23 box-sizing: border-box;
24 border-radius: 22px 25 } 26 27 .gg-smart-home-wash-machine::before { 28 bottom: 1px ;
29 left: 3px ;
30 width: 8px ;
31 height: 8px ;
32 border: 2px solid;
33 box-shadow:
34 5px -9px 0 -3px ,
35 2px -9px 0 -3px 36 } 37 38 .gg-smart-home-wash-machine::after { 39 top: 1px ;
40 left: 1px ;
41 width: 4px ;
42 height: 2px ;
43 background: currentColor
44 }
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="M6 4 H18 C18.5523 4 19 4.44772 19 5 V8 H5 V5 C5 4.44772 5.44771 4 6 4 ZM19 19 V10 H5 V19 C5 19.5523 5.44772 20 6 20 H18 C18.5523 20 19 19.5523 19 19 ZM3 5 C3 3.34315 4.34315 2 6 2 H18 C19.6569 2 21 3.34315 21 5 V19 C21 20.6569 19.6569 22 18 22 H6 C4.34315 22 3 20.6569 3 19 V5 ZM7 5 C6.44772 5 6 5.44772 6 6 C6 6.55228 6.44772 7 7 7 H9 C9.55228 7 10 6.55228 10 6 C10 5.44772 9.55228 5 9 5 H7 ZM14 7 C14.5523 7 15 6.55228 15 6 C15 5.44772 14.5523 5 14 5 C13.4477 5 13 5.44772 13 6 C13 6.55228 13.4477 7 14 7 ZM18 6 C18 6.55228 17.5523 7 17 7 C16.4477 7 16 6.55228 16 6 C16 5.44772 16.4477 5 17 5 C17.5523 5 18 5.44772 18 6 ZM14 15 C14 16.1046 13.1046 17 12 17 C10.8954 17 10 16.1046 10 15 C10 13.8954 10.8954 13 12 13 C13.1046 13 14 13.8954 14 15 ZM16 15 C16 17.2091 14.2091 19 12 19 C9.79086 19 8 17.2091 8 15 C8 12.7909 9.79086 11 12 11 C14.2091 11 16 12.7909 16 15 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSmartHomeWashMachine = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 18px ;11 height: 20px ;12 border: 2px solid;13 background: linear-gradient(to left, currentColor 18px , transparent 0 ) no-repeat center 4px /18px 14 2px ; 15 border-radius: 3px ;16 } 17 &::after , 18 &::before { 19 content: '';20 position: absolute;21 display: block;22 box-sizing: border-box;23 border-radius: 22px ;24 } 25 &::before { 26 bottom: 1px ;27 left: 3px ;28 width: 8px ;29 height: 8px ;30 border: 2px solid;31 box-shadow: 5px -9px 0 -3px , 2px -9px 0 -3px ;32 } 33 &::after { 34 top: 1px ;35 left: 1px ;36 width: 4px ;37 height: 2px ;38 background: currentColor;39 } 40 ` 41 42 export const SmartHomeWashMachine = React.forwardRef< 43 HTMLElement, 44 React.HTMLAttributes<HTMLElement> 45 >((props, ref) => { 46 return ( 47 <> 48 <StyledSmartHomeWashMachine { ...props} ref={ ref} icon-role="smart-home-wash-machine" /> 49 </> 50 ) 51 } )52
Smart Home Wash Machine developed into a 100% CSS icon built by practicing attributes as follows: transform, width, height, border, background, border-radius, box-shadow,
