Math Divide maths interface content
1 .gg-math-divide { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-math-divide,
6 .gg-math-divide::after ,
7 .gg-math-divide::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 16px ;
12 height: 2px ;
13 background: currentColor;
14 border-radius: 20px 15 } 16 17 .gg-math-divide::after ,
18 .gg-math-divide::before { 19 content: "";
20 position: absolute;
21 width: 4px ;
22 height: 4px ;
23 top: -6px ;
24 left: 6px 25 } 26 27 .gg-math-divide::after { 28 top: 4px 29 }
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="M14 7 C14 8.10457 13.1046 9 12 9 C10.8954 9 10 8.10457 10 7 C10 5.89543 10.8954 5 12 5 C13.1046 5 14 5.89543 14 7 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M3 12 C3 11.4477 3.44772 11 4 11 H20 C20.5523 11 21 11.4477 21 12 C21 12.5523 20.5523 13 20 13 H4 C3.44772 13 3 12.5523 3 12 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M12 19 C13.1046 19 14 18.1046 14 17 C14 15.8954 13.1046 15 12 15 C10.8954 15 10 15.8954 10 17 C10 18.1046 10.8954 19 12 19 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMathDivide = styled.i` 5 & { 6 transform: scale(var(--ggs, 1 ));7 } 8 &, 9 &::after , 10 &::before { 11 box-sizing: border-box;12 position: relative;13 display: block;14 width: 16px ;15 height: 2px ;16 background: currentColor;17 border-radius: 20px ;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 width: 4px ;24 height: 4px ;25 top: -6px ;26 left: 6px ;27 } 28 &::after { 29 top: 4px ;30 } 31 ` 32 33 export const MathDivide = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 34 (props, ref) => { 35 return ( 36 <> 37 <StyledMathDivide { ...props} ref={ ref} icon-role="math-divide" /> 38 </> 39 ) 40 } , 41 ) 42
Math Divide became a magic pure CSS icon built by adopting properties such as: transform, width, height, background, border-radius, .gg-math-divide,
