Ericsson interface
1 .gg-ericsson,
2 .gg-ericsson::before { 3 display: block;
4 box-sizing: border-box
5 } 6 7 .gg-ericsson { 8 position: relative;
9 transform: scale(var(--ggs,1 ));
10 width: 14px ;
11 height: 16px 12 } 13 14 .gg-ericsson::before { 15 content: "";
16 position: absolute;
17 background: currentColor;
18 transform: rotate(-25deg );
19 width: 16px ;
20 height: 4px ;
21 border-radius: 4px ;
22 box-shadow:
23 3px -6px 0 ,-3px 6px 0 ;
24 top: 7px ;
25 left: 2px 26 }
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="M7.71689 5.72315 C6.71581 6.18996 6.2827 7.37992 6.74951 8.381 C7.21632 9.38208 8.40628 9.81519 9.40736 9.34838 L20.2831 4.27696 C21.2841 3.81015 21.7172 2.62019 21.2504 1.61911 C20.7836 0.618028 19.5937 0.184918 18.5926 0.651729 L7.71689 5.72315 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M4.74951 15.381 C4.2827 14.3799 4.71581 13.19 5.71689 12.7231 L16.5926 7.65173 C17.5937 7.18492 18.7836 7.61803 19.2504 8.61911 C19.7172 9.62019 19.2841 10.8101 18.2831 11.277 L7.40736 16.3484 C6.40628 16.8152 5.21632 16.3821 4.74951 15.381 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M2.74951 22.381 C2.2827 21.3799 2.71581 20.19 3.71689 19.7231 L14.5926 14.6517 C15.5937 14.1849 16.7836 14.618 17.2504 15.6191 C17.7172 16.6202 17.2841 17.8101 16.2831 18.277 L5.40736 23.3484 C4.40628 23.8152 3.21632 23.3821 2.74951 22.381 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledEricsson = styled.i` 5 &, 6 &::before { 7 display: block;8 box-sizing: border-box;9 } 10 & { 11 position: relative;12 transform: scale(var(--ggs, 1 ));13 width: 14px ;14 height: 16px ;15 } 16 &::before { 17 content: '';18 position: absolute;19 background: currentColor;20 transform: rotate(-25deg );21 width: 16px ;22 height: 4px ;23 border-radius: 4px ;24 box-shadow: 3px -6px 0 , -3px 6px 0 ;25 top: 7px ;26 left: 2px ;27 } 28 ` 29 30 export const Ericsson = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 31 (props, ref) => { 32 return ( 33 <> 34 <StyledEricsson { ...props} ref={ ref} icon-role="ericsson" /> 35 </> 36 ) 37 } , 38 ) 39
Ericsson is an amazing pure CSS icon built by adopting attributes like: .gg-ericsson, transform, width, height, background, border-radius, box-shadow,
