Smartphone
4K Views
54 Downloads - 9 API calls
14 Lines - 356 Bytes
Apr 23, 2020 devices
1 .gg-smartphone { 2 background:
3 linear-gradient(to left,
4 currentColor 5px ,transparent 0 )
5 no-repeat 4px 12px /2px 2px ;
6 box-sizing: border-box;
7 position: relative;
8 display: block;
9 transform: scale(var(--ggs,1 ));
10 width: 14px ;
11 height: 20px ;
12 border: 2px solid;
13 border-radius: 2px ;
14 }
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 d="M13 16 H11 V18 H13 V16 Z" fill="currentColor" /> 9 <path 10 fill-rule="evenodd" 11 clip-rule="evenodd" 12 d="M5 4 C5 2.89543 5.89543 2 7 2 H17 C18.1046 2 19 2.89543 19 4 V20 C19 21.1046 18.1046 22 17 22 H7 C5.89543 22 5 21.1046 5 20 V4 ZM7 4 H17 V20 H7 L7 4 Z" 13 fill="currentColor" 14 /> 15 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledSmartphone = styled.i` 5 & { 6 background: linear-gradient(to left, currentColor 5px , transparent 0 ) no-repeat 4px 12px /2px 2px ;7 box-sizing: border-box;8 position: relative;9 display: block;10 transform: scale(var(--ggs, 1 ));11 width: 14px ;12 height: 20px ;13 border: 2px solid;14 border-radius: 2px ;15 } 16 ` 17 18 export const Smartphone = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 19 (props, ref) => { 20 return ( 21 <> 22 <StyledSmartphone { ...props} ref={ ref} icon-role="smartphone" /> 23 </> 24 ) 25 } , 26 ) 27
Smartphone ended up a magic 100% CSS icon built by adopting properties like: background, transform, width, height, border, border-radius, Fun to know, it has: 14 Lines of code at 356b & 250b after compiling. Pretty amazing 😲 for a icon designed by code.