Dolby brands
1 .gg-dolby,
2 .gg-dolby::after ,
3 .gg-dolby::before { 4 display: block;
5 box-sizing: border-box;
6 height: 16px ;
7 border: 4px solid
8 } 9 10 .gg-dolby { 11 position: relative;
12 transform: scale(var(--ggs,1 ));
13 width: 24px 14 } 15 16 .gg-dolby::after ,
17 .gg-dolby::before { 18 content: "";
19 position: absolute;
20 width: 14px ;
21 top: -4px 22 } 23 24 .gg-dolby::before { 25 border-top-right-radius: 10px ;
26 border-bottom-right-radius: 10px ;
27 left: -4px 28 } 29 30 .gg-dolby::after { 31 border-top-left-radius: 10px ;
32 border-bottom-left-radius: 10px ;
33 right: -4px 34 }
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="M0 4 V20 H24 V4 H0 ZM10 12 C10 9.79086 8.20914 8 6 8 H4 V16 H6 C8.20914 16 10 14.2091 10 12 ZM18 16 H20 V8 H18 C15.7909 8 14 9.79086 14 12 C14 14.2091 15.7909 16 18 16 Z" 12 fill="currentColor" 13 /> 14 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDolby = styled.i` 5 &, 6 &::after , 7 &::before { 8 display: block;9 box-sizing: border-box;10 height: 16px ;11 border: 4px solid;12 } 13 & { 14 position: relative;15 transform: scale(var(--ggs, 1 ));16 width: 24px ;17 } 18 &::after , 19 &::before { 20 content: '';21 position: absolute;22 width: 14px ;23 top: -4px ;24 } 25 &::before { 26 border-top-right-radius: 10px ;27 border-bottom-right-radius: 10px ;28 left: -4px ;29 } 30 &::after { 31 border-top-left-radius: 10px ;32 border-bottom-left-radius: 10px ;33 right: -4px ;34 } 35 ` 36 37 export const Dolby = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 38 (props, ref) => { 39 return ( 40 <> 41 <StyledDolby { ...props} ref={ ref} icon-role="dolby" /> 42 </> 43 ) 44 } , 45 ) 46
Dolby ended up a magic CSS icon made by practicing features like: .gg-dolby, height, border, transform, width,
