Games multimedia
1 .gg-games { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 24px ;
7 height: 12px ;
8 border: 3px solid transparent;
9 border-left: 6px solid transparent;
10 box-shadow:
11 0 0 0 2px ,
12 inset 2px 0 0 ;
13 border-radius: 40px 14 } 15 16 .gg-games::after ,
17 .gg-games::before { 18 content: "";
19 display: block;
20 box-sizing: border-box;
21 position: absolute;
22 height: 2px ;
23 background: currentColor
24 } 25 26 .gg-games::before { 27 left: -2px ;
28 width: 6px ;
29 top: 2px 30 } 31 32 .gg-games::after { 33 border-radius: 3px ;
34 width: 2px ;
35 box-shadow:0 4px 0 ,-2px 2px 0 ,2px 2px 0 ;
36 top: 0 ;
37 right: 2px 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 d="M15.4695 11.2929 C15.0789 10.9024 14.4458 10.9024 14.0553 11.2929 C13.6647 11.6834 13.6647 12.3166 14.0553 12.7071 C14.4458 13.0976 15.0789 13.0976 15.4695 12.7071 C15.86 12.3166 15.86 11.6834 15.4695 11.2929 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M16.1766 9.17156 C16.5671 8.78103 17.2003 8.78103 17.5908 9.17156 C17.9813 9.56208 17.9813 10.1952 17.5908 10.5858 C17.2003 10.9763 16.5671 10.9763 16.1766 10.5858 C15.7861 10.1952 15.7861 9.56208 16.1766 9.17156 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M19.7121 11.2929 C19.3216 10.9024 18.6885 10.9024 18.2979 11.2929 C17.9074 11.6834 17.9074 12.3166 18.2979 12.7071 C18.6885 13.0976 19.3216 13.0976 19.7121 12.7071 C20.1027 12.3166 20.1027 11.6834 19.7121 11.2929 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M16.1766 13.4142 C16.5671 13.0237 17.2003 13.0237 17.5908 13.4142 C17.9813 13.8048 17.9813 14.4379 17.5908 14.8284 C17.2003 15.219 16.5671 15.219 16.1766 14.8284 C15.7861 14.4379 15.7861 13.8048 16.1766 13.4142 Z" 22 fill="currentColor" 23 /> 24 <path d="M6 13 H4 V11 H6 V9 H8 V11 H10 V13 H8 V15 H6 V13 Z" fill="currentColor" /> 25 <path 26 fill-rule="evenodd" 27 clip-rule="evenodd" 28 d="M7 5 C3.13401 5 0 8.13401 0 12 C0 15.866 3.13401 19 7 19 H17 C20.866 19 24 15.866 24 12 C24 8.13401 20.866 5 17 5 H7 ZM17 7 H7 C4.23858 7 2 9.23858 2 12 C2 14.7614 4.23858 17 7 17 H17 C19.7614 17 22 14.7614 22 12 C22 9.23858 19.7614 7 17 7 Z" 29 fill="currentColor" 30 /> 31 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledGames = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 24px ;11 height: 12px ;12 border: 3px solid transparent;13 border-left: 6px solid transparent;14 box-shadow: 0 0 0 2px , inset 2px 0 0 ;15 border-radius: 40px ;16 } 17 &::after , 18 &::before { 19 content: '';20 display: block;21 box-sizing: border-box;22 position: absolute;23 height: 2px ;24 background: currentColor;25 } 26 &::before { 27 left: -2px ;28 width: 6px ;29 top: 2px ;30 } 31 &::after { 32 border-radius: 3px ;33 width: 2px ;34 box-shadow: 0 4px 0 , -2px 2px 0 , 2px 2px 0 ;35 top: 0 ;36 right: 2px ;37 } 38 ` 39 40 export const Games = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 41 (props, ref) => { 42 return ( 43 <> 44 <StyledGames { ...props} ref={ ref} icon-role="games" /> 45 </> 46 ) 47 } , 48 ) 49
Games is an amazing 100% CSS icon created by practicing attributes like: transform, width, height, border, border-left, box-shadow, border-radius, background,
