Format Strike content interface
1 .gg-format-strike { 2 box-sizing: border-box;
3 position: relative;
4 display: block;
5 transform: scale(var(--ggs,1 ));
6 width: 10px ;
7 height: 3px ;
8 border-left: 4px solid transparent;
9 border-right: 4px solid transparent;
10 box-shadow:
11 0 -2px 0 0 ,
12 inset 0 0 0 2px 13 } 14 15 .gg-format-strike::after ,
16 .gg-format-strike::before { 17 content: "";
18 display: block;
19 box-sizing: border-box;
20 position: absolute;
21 width: 14px ;
22 height: 2px ;
23 background: currentColor;
24 left: -6px ;
25 top: 4px 26 } 27 28 .gg-format-strike::after { 29 width: 2px ;
30 height: 4px ;
31 left: 0 ;
32 top: 7px 33 }
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 d="M13 7 H17 V5 H7 V7 H11 V10 H13 V7 Z" fill="currentColor" /> 9 <path d="M11 19 V14 H13 V19 H11 Z" fill="currentColor" /> 10 <path d="M5 13 H19 V11 H5 V13 Z" fill="currentColor" /> 11 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledFormatStrike = styled.i` 5 & { 6 box-sizing: border-box;7 position: relative;8 display: block;9 transform: scale(var(--ggs, 1 ));10 width: 10px ;11 height: 3px ;12 border-left: 4px solid transparent;13 border-right: 4px solid transparent;14 box-shadow: 0 -2px 0 0 , inset 0 0 0 2px ;15 } 16 &::after , 17 &::before { 18 content: '';19 display: block;20 box-sizing: border-box;21 position: absolute;22 width: 14px ;23 height: 2px ;24 background: currentColor;25 left: -6px ;26 top: 4px ;27 } 28 &::after { 29 width: 2px ;30 height: 4px ;31 left: 0 ;32 top: 7px ;33 } 34 ` 35 36 export const FormatStrike = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledFormatStrike { ...props} ref={ ref} icon-role="format-strike" /> 41 </> 42 ) 43 } , 44 ) 45
Format Strike ended up a wonderful CSS icon built by adopting attributes as follows: transform, width, height, border-left, border-right, box-shadow, background,
