More Vertical interface buttons
1 .gg-more-vertical { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-more-vertical,
6 .gg-more-vertical::after ,
7 .gg-more-vertical::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-vertical::after ,
18 .gg-more-vertical::before { 19 content: "";
20 position: absolute;
21 top: 6px ;
22 left: -2px 23 } 24 25 .gg-more-vertical::before { 26 top: -10px 27 }
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="M12 5 C12.5523 5 13 4.55228 13 4 C13 3.44772 12.5523 3 12 3 C11.4477 3 11 3.44772 11 4 C11 4.55228 11.4477 5 12 5 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 ZM12 21 C12.5523 21 13 20.5523 13 20 C13 19.4477 12.5523 19 12 19 C11.4477 19 11 19.4477 11 20 C11 20.5523 11.4477 21 12 21 ZM15 4 C15 5.65685 13.6569 7 12 7 C10.3431 7 9 5.65685 9 4 C9 2.34315 10.3431 1 12 1 C13.6569 1 15 2.34315 15 4 ZM15 12 C15 13.6569 13.6569 15 12 15 C10.3431 15 9 13.6569 9 12 C9 10.3431 10.3431 9 12 9 C13.6569 9 15 10.3431 15 12 ZM12 23 C13.6569 23 15 21.6569 15 20 C15 18.3431 13.6569 17 12 17 C10.3431 17 9 18.3431 9 20 C9 21.6569 10.3431 23 12 23 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMoreVertical = 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: 6px ;24 left: -2px ;25 } 26 &::before { 27 top: -10px ;28 } 29 ` 30 31 export const MoreVertical = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 32 (props, ref) => { 33 return ( 34 <> 35 <StyledMoreVertical { ...props} ref={ ref} icon-role="more-vertical" /> 36 </> 37 ) 38 } , 39 ) 40
More Vertical turned into a magic CSS icon created by using features such as: transform, width, height, border, border-radius, .gg-more-vertical,
