Dice 6 interface
1 .gg-dice-6 { 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-6 ::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 5px 0 , 0 10px 0 ,
25 10px 0 0 , 10px 5px 0 ,
26 10px 10px 0 ;
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 d="M16.9451 5.05518 C15.8405 5.05518 14.9451 5.95061 14.9451 7.05518 C14.9451 8.15975 15.8405 9.05518 16.9451 9.05518 C18.0496 9.05518 18.9451 8.15975 18.9451 7.05518 C18.9451 5.95061 18.0496 5.05518 16.9451 5.05518 Z" 10 fill="currentColor" 11 /> 12 <path 13 d="M14.9451 16.8921 C14.9451 15.7875 15.8405 14.8921 16.9451 14.8921 C18.0496 14.8921 18.9451 15.7875 18.9451 16.8921 C18.9451 17.9967 18.0496 18.8921 16.9451 18.8921 C15.8405 18.8921 14.9451 17.9967 14.9451 16.8921 Z" 14 fill="currentColor" 15 /> 16 <path 17 d="M7.05518 14.8921 C5.95061 14.8921 5.05518 15.7875 5.05518 16.8921 C5.05518 17.9967 5.95061 18.8921 7.05518 18.8921 C8.15975 18.8921 9.05518 17.9967 9.05518 16.8921 C9.05518 15.7875 8.15975 14.8921 7.05518 14.8921 Z" 18 fill="currentColor" 19 /> 20 <path 21 d="M5.05518 7.05518 C5.05518 5.95061 5.95061 5.05518 7.05518 5.05518 C8.15975 5.05518 9.05518 5.95061 9.05518 7.05518 C9.05518 8.15975 8.15975 9.05518 7.05518 9.05518 C5.95061 9.05518 5.05518 8.15975 5.05518 7.05518 Z" 22 fill="currentColor" 23 /> 24 <path 25 d="M16.9451 9.97363 C15.8405 9.97363 14.9451 10.8691 14.9451 11.9736 C14.9451 13.0782 15.8405 13.9736 16.9451 13.9736 C18.0496 13.9736 18.9451 13.0782 18.9451 11.9736 C18.9451 10.8691 18.0496 9.97363 16.9451 9.97363 Z" 26 fill="currentColor" 27 /> 28 <path 29 d="M5.05518 11.9736 C5.05518 10.8691 5.95061 9.97363 7.05518 9.97363 C8.15975 9.97363 9.05518 10.8691 9.05518 11.9736 C9.05518 13.0782 8.15975 13.9736 7.05518 13.9736 C5.95061 13.9736 5.05518 13.0782 5.05518 11.9736 Z" 30 fill="currentColor" 31 /> 32 <path 33 fill-rule="evenodd" 34 clip-rule="evenodd" 35 d="M4 1 C2.34315 1 1 2.34315 1 4 V20 C1 21.6569 2.34315 23 4 23 H20 C21.6569 23 23 21.6569 23 20 V4 C23 2.34315 21.6569 1 20 1 H4 ZM20 3 H4 C3.44772 3 3 3.44772 3 4 V20 C3 20.5523 3.44772 21 4 21 H20 C20.5523 21 21 20.5523 21 20 V4 C21 3.44772 20.5523 3 20 3 Z" 36 fill="currentColor" 37 /> 38 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDice6 = styled.i` 5 &6 { 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 &6 ::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 5px 0 , 0 10px 0 , 10px 0 0 , 10px 5px 0 , 10px 10px 0 ;27 } 28 ` 29 30 export const Dice6 = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 31 (props, ref) => { 32 return ( 33 <> 34 <StyledDice6 { ...props} ref={ ref} icon-role="dice-6 " /> 35 </> 36 ) 37 } , 38 ) 39
Dice 6 ended up a magic CSS icon made by adopting properties like: transform, width, height, border, border-radius, background, box-shadow,
