Linear brands
1 .gg-linear { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 18px ;
7 height: 18px ;
8 overflow: hidden;
9 border-radius: 100px 10 } 11 12 .gg-linear::after ,
13 .gg-linear::before { 14 content: "";
15 display: block;
16 box-sizing: border-box;
17 position: absolute;
18 width: 25px ;
19 height: 25px ;
20 transform: rotate(-45deg );
21 background: currentColor;
22 top: -14px ;
23 left: 4px 24 } 25 26 .gg-linear::after { 27 width: 2px ;
28 box-shadow:
29 -3px 4px 0 0 ,
30 -6px -2px 0 0 ;
31 top: -3px ;
32 left: 6px 33 }
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="M3.03509 12.9431 C3.24245 14.9227 4.10472 16.8468 5.62188 18.364 C7.13904 19.8811 9.0631 20.7434 11.0428 20.9508 L3.03509 12.9431 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M3 11.4938 L12.4921 20.9858 C13.2976 20.9407 14.0981 20.7879 14.8704 20.5273 L3.4585 9.11548 C3.19793 9.88771 3.0451 10.6883 3 11.4938 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M3.86722 8.10999 L15.8758 20.1186 C16.4988 19.8201 17.0946 19.4458 17.6493 18.9956 L4.99021 6.33659 C4.54006 6.89125 4.16573 7.487 3.86722 8.10999 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M5.66301 5.59517 C9.18091 2.12137 14.8488 2.135 18.3498 5.63604 C21.8508 9.13708 21.8645 14.8049 18.3907 18.3228 L5.66301 5.59517 Z" 22 fill="currentColor" 23 /> 24 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledLinear = 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: 18px ;12 overflow: hidden;13 border-radius: 100px ;14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 box-sizing: border-box;20 position: absolute;21 width: 25px ;22 height: 25px ;23 transform: rotate(-45deg );24 background: currentColor;25 top: -14px ;26 left: 4px ;27 } 28 &::after { 29 width: 2px ;30 box-shadow: -3px 4px 0 0 , -6px -2px 0 0 ;31 top: -3px ;32 left: 6px ;33 } 34 ` 35 36 export const Linear = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledLinear { ...props} ref={ ref} icon-role="linear" /> 41 </> 42 ) 43 } , 44 ) 45
Linear turned into a wonderful 100% CSS icon built by adopting attributes as follows: transform, width, height, overflow, border-radius, background, box-shadow,
