Designmodo brands
1 .gg-designmodo { 2 display: block;
3 position: relative;
4 box-sizing: border-box;
5 transform: scale(var(--ggs,1 ));
6 width: 20px ;
7 height: 16px ;
8 background:
9 linear-gradient( to left,
10 currentColor 5px ,transparent 0 )
11 no-repeat right 3px /8px 3px 12 } 13 14 .gg-designmodo::after ,
15 .gg-designmodo::before { 16 content: "";
17 display: block;
18 position: absolute;
19 box-sizing: border-box;
20 width: 10px ;
21 height: 10px ;
22 border: 3px solid;
23 border-radius: 10px 24 } 25 26 .gg-designmodo::after { 27 width: 14px ;
28 height: 14px ;
29 border: 3px solid transparent;
30 border-bottom: 3px solid;
31 left: 3px ;
32 bottom: 0 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 9 fill-rule="evenodd" 10 clip-rule="evenodd" 11 d="M7 4.05444 C4.23858 4.05444 2 6.29302 2 9.05444 C2 11.8159 4.23858 14.0544 7 14.0544 C9.76142 14.0544 12 11.8159 12 9.05444 C12 6.29302 9.76142 4.05444 7 4.05444 ZM5 9.05444 C5 10.159 5.89543 11.0544 7 11.0544 C8.10457 11.0544 9 10.159 9 9.05444 C9 7.94987 8.10457 7.05444 7 7.05444 C5.89543 7.05444 5 7.94987 5 9.05444 Z" 12 fill="currentColor" 13 /> 14 <path d="M22 10.5544 H17 V7.55444 H22 V10.5544 Z" fill="currentColor" /> 15 <path 16 d="M11.5503 16.9457 C12.6786 16.9457 13.6977 16.4786 14.4249 15.7272 C14.4097 15.7429 14.3943 15.7585 14.3788 15.774 L16.5001 17.8954 C15.2334 19.1621 13.4834 19.9457 11.5503 19.9457 C9.61734 19.9457 7.86734 19.1622 6.60059 17.8954 L8.72191 15.7741 C9.44576 16.498 10.4458 16.9457 11.5503 16.9457 Z" 17 fill="currentColor" 18 /> 19 </svg>
1 import React from 'react' 2 import styled from 'styled-components' 3 4 const StyledDesignmodo = styled.i` 5 & { 6 display: block;7 position: relative;8 box-sizing: border-box;9 transform: scale(var(--ggs, 1 ));10 width: 20px ;11 height: 16px ;12 background: linear-gradient(to left, currentColor 5px , transparent 0 ) no-repeat right 3px /8px 13 3px ; 14 } 15 &::after , 16 &::before { 17 content: '';18 display: block;19 position: absolute;20 box-sizing: border-box;21 width: 10px ;22 height: 10px ;23 border: 3px solid;24 border-radius: 10px ;25 } 26 &::after { 27 width: 14px ;28 height: 14px ;29 border: 3px solid transparent;30 border-bottom: 3px solid;31 left: 3px ;32 bottom: 0 ;33 } 34 ` 35 36 export const Designmodo = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( 37 (props, ref) => { 38 return ( 39 <> 40 <StyledDesignmodo { ...props} ref={ ref} icon-role="designmodo" /> 41 </> 42 ) 43 } , 44 ) 45
Designmodo developed into a CSS icon made by practicing properties such as: transform, width, height, background, border, border-radius, border-bottom,
