Path Intersect design interface
1 .gg-path-intersect { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 14px ;
7 height: 14px 8 } 9 10 .gg-path-intersect::after ,
11 .gg-path-intersect::before { 12 content: "";
13 position: absolute;
14 display: block;
15 box-sizing: border-box;
16 border: 2px solid;
17 width: 10px ;
18 height: 10px 19 } 20 21 .gg-path-intersect::before { 22 background:
23 linear-gradient(to left,
24 currentColor 4px ,transparent 0 )
25 no-repeat top left/4px 4px ;
26 bottom: 0 ;
27 right: 0 28 }
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="M15 5 H5 V15 H9 V19 H19 V9 H15 V5 ZM13 7 H7 V13 H9 V9 H13 V7 ZM17 17 H11 V15 H15 V11 H17 V17 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledPathIntersect = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 14px ;11 height: 14px ;12 } 13 &::after , 14 &::before { 15 content: '';16 position: absolute;17 display: block;18 box-sizing: border-box;19 border: 2px solid;20 width: 10px ;21 height: 10px ;22 } 23 &::before { 24 background: linear-gradient(to left, currentColor 4px , transparent 0 ) no-repeat top left/4px 4px ;25 bottom: 0 ;26 right: 0 ;27 } 28 ` 29 30 export const PathIntersect = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 31 (props, ref) => { 32 return ( 33 <> 34 <StyledPathIntersect { ...props} ref={ ref} icon-role="path-intersect" /> 35 </> 36 ) 37 } , 38 ) 39
Path Intersect became a CSS icon made by adopting attributes like: transform, width, height, border,
