Dice 5 interface
1 .gg-dice-5 { 2 display: block;
3 transform: scale(var(--ggs,1 ));
4 position: relative;
5 box-sizing: border-box;
6 width: 22px ;
7 height: 22px ;
8 border: 2px solid;
9 border-radius: 3px ;
10 } 11 12 .gg-dice-5 ::before { 13 content: "";
14 display: block;
15 box-sizing: border-box;
16 background: currentColor;
17 position: absolute;
18 width: 4px ;
19 height: 4px ;
20 border-radius: 4px ;
21 left:2px ;
22 top:2px ;
23 box-shadow:
24 0 10px 0 ,
25 10px 0 0 ,
26 10px 10px 0 ,
27 5px 5px 0 ;
28 }
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.9451 7.05518 C14.9451 5.95061 15.8405 5.05518 16.9451 5.05518 C18.0496 5.05518 18.9451 5.95061 18.9451 7.05518 C18.9451 8.15975 18.0496 9.05518 16.9451 9.05518 C15.8405 9.05518 14.9451 8.15975 14.9451 7.05518 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M16.9451 14.8921 C15.8405 14.8921 14.9451 15.7875 14.9451 16.8921 C14.9451 17.9967 15.8405 18.8921 16.9451 18.8921 C18.0496 18.8921 18.9451 17.9967 18.9451 16.8921 C18.9451 15.7875 18.0496 14.8921 16.9451 14.8921 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M5.05518 16.8921 C5.05518 15.7875 5.95061 14.8921 7.05518 14.8921 C8.15975 14.8921 9.05518 15.7875 9.05518 16.8921 C9.05518 17.9967 8.15975 18.8921 7.05518 18.8921 C5.95061 18.8921 5.05518 17.9967 5.05518 16.8921 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M7.05518 5.05518 C5.95061 5.05518 5.05518 5.95061 5.05518 7.05518 C5.05518 8.15975 5.95061 9.05518 7.05518 9.05518 C8.15975 9.05518 9.05518 8.15975 9.05518 7.05518 C9.05518 5.95061 8.15975 5.05518 7.05518 5.05518 Z" 22 fill="currentColor" 23 /> 24 <path 25 d="M10 12 C10 10.8954 10.8954 10 12 10 C13.1046 10 14 10.8954 14 12 C14 13.1046 13.1046 14 12 14 C10.8954 14 10 13.1046 10 12 Z" 26 fill="currentColor" 27 /> 28 <path 29 fill-rule="evenodd" 30 clip-rule="evenodd" 31 d="M1 4 C1 2.34315 2.34315 1 4 1 H20 C21.6569 1 23 2.34315 23 4 V20 C23 21.6569 21.6569 23 20 23 H4 C2.34315 23 1 21.6569 1 20 V4 ZM4 3 H20 C20.5523 3 21 3.44772 21 4 V20 C21 20.5523 20.5523 21 20 21 H4 C3.44772 21 3 20.5523 3 20 V4 C3 3.44772 3.44772 3 4 3 Z" 32 fill="currentColor" 33 /> 34 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDice5 = styled.i` 5 &5 { 6 display: block;7 transform: scale(var(--ggs, 1 ));8 position: relative;9 box-sizing: border-box;10 width: 22px ;11 height: 22px ;12 border: 2px solid;13 border-radius: 3px ;14 } 15 &5 ::before { 16 content: '';17 display: block;18 box-sizing: border-box;19 background: currentColor;20 position: absolute;21 width: 4px ;22 height: 4px ;23 border-radius: 4px ;24 left: 2px ;25 top: 2px ;26 box-shadow: 0 10px 0 , 10px 0 0 , 10px 10px 0 , 5px 5px 0 ;27 } 28 ` 29 30 export const Dice5 = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 31 (props, ref) => { 32 return ( 33 <> 34 <StyledDice5 { ...props} ref={ ref} icon-role="dice-5 " /> 35 </> 36 ) 37 } , 38 ) 39
Dice 5 ended up a magic CSS icon built by applying attributes like: transform, width, height, border, border-radius, background, box-shadow,
