Options interface
1 .gg-options { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 10px ;
7 height: 2px ;
8 box-shadow:
9 -3px 4px 0 0 ,
10 3px -4px 0 0 11 } 12 13 .gg-options::after ,
14 .gg-options::before { 15 content: "";
16 display: block;
17 box-sizing: border-box;
18 position: absolute;
19 width: 8px ;
20 height: 8px ;
21 border: 2px solid;
22 border-radius: 100% 23 } 24 25 .gg-options::before { 26 top: -7px ;
27 left: -4px 28 } 29 30 .gg-options::after { 31 bottom: -7px ;
32 right: -4px 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 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M7 3 C8.86384 3 10.4299 4.27477 10.874 6 H19 V8 H10.874 C10.4299 9.72523 8.86384 11 7 11 C4.79086 11 3 9.20914 3 7 C3 4.79086 4.79086 3 7 3 ZM7 9 C8.10457 9 9 8.10457 9 7 C9 5.89543 8.10457 5 7 5 C5.89543 5 5 5.89543 5 7 C5 8.10457 5.89543 9 7 9 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M17 20 C15.1362 20 13.5701 18.7252 13.126 17 H5 V15 H13.126 C13.5701 13.2748 15.1362 12 17 12 C19.2091 12 21 13.7909 21 16 C21 18.2091 19.2091 20 17 20 ZM17 18 C18.1046 18 19 17.1046 19 16 C19 14.8954 18.1046 14 17 14 C15.8954 14 15 14.8954 15 16 C15 17.1046 15.8954 18 17 18 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledOptions = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 10px ;11 height: 2px ;12 box-shadow: -3px 4px 0 0 , 3px -4px 0 0 ;13 } 14 &::after , 15 &::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 position: absolute;20 width: 8px ;21 height: 8px ;22 border: 2px solid;23 border-radius: 100% ;24 } 25 &::before { 26 top: -7px ;27 left: -4px ;28 } 29 &::after { 30 bottom: -7px ;31 right: -4px ;32 } 33 ` 34 35 export const Options = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 36 (props, ref) => { 37 return ( 38 <> 39 <StyledOptions { ...props} ref={ ref} icon-role="options" /> 40 </> 41 ) 42 } , 43 ) 44
Options became a magic CSS icon built by using attributes as follows: transform, width, height, box-shadow, border, border-radius,
