More buttons interface
1 .gg-more { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-more,
6 .gg-more::after ,
7 .gg-more::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 6px ;
12 height: 6px ;
13 border: 2px solid;
14 border-radius: 100% 15 } 16 17 .gg-more::after ,
18 .gg-more::before { 19 content: "";
20 position: absolute;
21 top: -2px 22 } 23 24 .gg-more::after { 25 left: -9px 26 } 27 28 .gg-more::before { 29 right: -9px 30 }
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="M5 15 C6.65685 15 8 13.6569 8 12 C8 10.3431 6.65685 9 5 9 C3.34315 9 2 10.3431 2 12 C2 13.6569 3.34315 15 5 15 ZM5 13 C5.55228 13 6 12.5523 6 12 C6 11.4477 5.55228 11 5 11 C4.44772 11 4 11.4477 4 12 C4 12.5523 4.44772 13 5 13 Z" 12 fill="currentColor" 13 /> 14 <path 15 fill-rule="evenodd" 16 clip-rule="evenodd" 17 d="M12 15 C13.6569 15 15 13.6569 15 12 C15 10.3431 13.6569 9 12 9 C10.3431 9 9 10.3431 9 12 C9 13.6569 10.3431 15 12 15 ZM12 13 C12.5523 13 13 12.5523 13 12 C13 11.4477 12.5523 11 12 11 C11.4477 11 11 11.4477 11 12 C11 12.5523 11.4477 13 12 13 Z" 18 fill="currentColor" 19 /> 20 <path 21 fill-rule="evenodd" 22 clip-rule="evenodd" 23 d="M22 12 C22 13.6569 20.6569 15 19 15 C17.3431 15 16 13.6569 16 12 C16 10.3431 17.3431 9 19 9 C20.6569 9 22 10.3431 22 12 ZM20 12 C20 12.5523 19.5523 13 19 13 C18.4477 13 18 12.5523 18 12 C18 11.4477 18.4477 11 19 11 C19.5523 11 20 11.4477 20 12 Z" 24 fill="currentColor" 25 /> 26 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMore = 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: 6px ;15 height: 6px ;16 border: 2px solid;17 border-radius: 100% ;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 top: -2px ;24 } 25 &::after { 26 left: -9px ;27 } 28 &::before { 29 right: -9px ;30 } 31 ` 32 33 export const More = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 34 (props, ref) => { 35 return ( 36 <> 37 <StyledMore { ...props} ref={ ref} icon-role="more" /> 38 </> 39 ) 40 } , 41 ) 42
More is a wonderful 100% CSS icon created by adopting features as follows: transform, width, height, border, border-radius, .gg-more,
