More Vertical Alt interface buttons
1 .gg-more-vertical-alt { 2 transform: scale(var(--ggs,1 ))
3 } 4 5 .gg-more-vertical-alt,
6 .gg-more-vertical-alt::after ,
7 .gg-more-vertical-alt::before { 8 box-sizing: border-box;
9 position: relative;
10 display: block;
11 width: 4px ;
12 height: 4px ;
13 background: currentColor;
14 border-radius: 100% 15 } 16 17 .gg-more-vertical-alt::after ,
18 .gg-more-vertical-alt::before { 19 content: "";
20 position: absolute
21 } 22 23 .gg-more-vertical-alt::after { 24 left: 0 ;
25 top: 6px 26 } 27 28 .gg-more-vertical-alt::before { 29 top: -6px ;
30 right: 0 31 }
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 6 C14 7.10457 13.1046 8 12 8 C10.8954 8 10 7.10457 10 6 C10 4.89543 10.8954 4 12 4 C13.1046 4 14 4.89543 14 6 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M14 12 C14 13.1046 13.1046 14 12 14 C10.8954 14 10 13.1046 10 12 C10 10.8954 10.8954 10 12 10 C13.1046 10 14 10.8954 14 12 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M14 18 C14 19.1046 13.1046 20 12 20 C10.8954 20 10 19.1046 10 18 C10 16.8954 10.8954 16 12 16 C13.1046 16 14 16.8954 14 18 Z" 18 fill="currentColor" 19 /> 20 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledMoreVerticalAlt = 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: 4px ;15 height: 4px ;16 background: currentColor;17 border-radius: 100% ;18 } 19 &::after , 20 &::before { 21 content: '';22 position: absolute;23 } 24 &::after { 25 left: 0 ;26 top: 6px ;27 } 28 &::before { 29 top: -6px ;30 right: 0 ;31 } 32 ` 33 34 export const MoreVerticalAlt = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 35 (props, ref) => { 36 return ( 37 <> 38 <StyledMoreVerticalAlt { ...props} ref={ ref} icon-role="more-vertical-alt" /> 39 </> 40 ) 41 } , 42 ) 43
More Vertical Alt became an amazing pure CSS icon made by applying properties as follows: transform, width, height, background, border-radius,
