feat(web): Replace Docker icon

langri-sha · Jun 10, 2024 · 3a8159f · 3a8159f
1 parent e758ad9
commit 3a8159f
Showing 1 changed file with 22 additions and 25 deletions.
diff --git a/apps/web/src/components/header/icons.tsx b/apps/web/src/components/header/icons.tsx
@@ -10,37 +10,34 @@ const icon = css`
   fill: currentColor;
 `
 
-export const Docker = styled(({ className }: { className?: string }) => (
+export const Docker = styled((props: { className?: string }) => (
   <svg
-    className={className}
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 35 32"
+    width={52}
+    height={52}
+    fill="none"
+    viewBox="0 0 32 32"
+    {...props}
   >
-    <title>docker</title>
-    <path
-      fill="#000"
-      d="M18.279 12.719h3.559v3.638h1.799c0.831 0 1.686-0.148 2.473-0.415 0.387-0.131 0.821-0.313 1.202-0.543-0.502-0.656-0.759-1.484-0.834-2.301-0.103-1.11 0.122-2.556 0.873-3.425l0.374-0.433 0.446 0.358c1.122 0.902 2.066 2.162 2.233 3.598 1.351-0.398 2.938-0.303 4.129 0.384l0.489 0.282-0.257 0.502c-1.007 1.966-3.114 2.575-5.173 2.468-3.082 7.675-9.79 11.308-17.924 11.308-4.202 0-8.058-1.571-10.253-5.299l-0.036-0.061-0.32-0.651c-0.742-1.641-0.989-3.439-0.821-5.236l0.050-0.538h3.043v-3.638h3.559v-3.559h7.118v-3.559h4.271v7.118z"
-    />
-    <path
-      fill="#fff"
-      d="M6.508 13.569v2.571h0.244v-2.571h-0.244zM6.041 13.569v2.571h0.253v-2.571h-0.253zM5.573 13.569v2.571h0.253v-2.571h-0.253zM5.106 13.569v2.571h0.253v-2.571h-0.253zM4.639 13.569v2.571h0.253v-2.571h-0.253zM4.181 13.569v2.571h0.243v-2.571h-0.243zM3.924 13.312h3.085v3.085h-3.085v-3.085zM10.067 10.010v2.57h0.244v-2.57h-0.244zM9.6 10.010v2.57h0.253v-2.57h-0.253zM9.132 10.010v2.57h0.253v-2.57h-0.253zM8.665 10.010v2.57h0.253v-2.57h-0.253zM8.198 10.010v2.57h0.253v-2.57h-0.253zM7.74 10.010v2.57h0.243v-2.57h-0.243zM7.483 9.753h3.085v3.085h-3.085v-3.085zM10.067 13.569v2.571h0.244v-2.571h-0.244zM9.6 13.569v2.571h0.253v-2.571h-0.253zM9.132 13.569v2.571h0.253v-2.571h-0.253zM8.665 13.569v2.571h0.253v-2.571h-0.253zM8.198 13.569v2.571h0.253v-2.571h-0.253zM7.74 13.569v2.571h0.243v-2.571h-0.243zM7.483 13.312h3.085v3.085h-3.085v-3.085zM13.626 13.569v2.571h0.244v-2.571h-0.244zM13.159 13.569v2.571h0.253v-2.571h-0.253zM12.692 13.569v2.571h0.253v-2.571h-0.253zM12.224 13.569v2.571h0.253v-2.571h-0.253zM11.757 13.569v2.571h0.253v-2.571h-0.253zM11.299 13.569v2.571h0.243v-2.571h-0.243zM11.042 13.312h3.085v3.085h-3.085v-3.085zM13.626 10.010v2.57h0.244v-2.57h-0.244zM13.159 10.010v2.57h0.253v-2.57h-0.253zM12.692 10.010v2.57h0.253v-2.57h-0.253zM12.224 10.010v2.57h0.253v-2.57h-0.253zM11.757 10.010v2.57h0.253v-2.57h-0.253zM11.299 10.010v2.57h0.243v-2.57h-0.243zM11.042 9.753h3.085v3.085h-3.085v-3.085zM17.185 13.569v2.571h0.244v-2.571h-0.244zM16.718 13.569v2.571h0.253v-2.571h-0.253zM16.251 13.569v2.571h0.253v-2.571h-0.253zM15.783 13.569v2.571h0.253v-2.571h-0.253zM15.316 13.569v2.571h0.253v-2.571h-0.253zM14.858 13.569v2.571h0.243v-2.571h-0.243zM14.601 13.312h3.085v3.085h-3.085v-3.085zM17.185 10.010v2.57h0.244v-2.57h-0.244zM16.718 10.010v2.57h0.253v-2.57h-0.253zM16.251 10.010v2.57h0.253v-2.57h-0.253zM15.783 10.010v2.57h0.253v-2.57h-0.253zM15.316 10.010v2.57h0.253v-2.57h-0.253zM14.858 10.010v2.57h0.243v-2.57h-0.243zM14.601 9.753h3.085v3.085h-3.085v-3.085zM17.185 6.451v2.571h0.244v-2.571h-0.244zM16.718 6.451v2.571h0.253v-2.571h-0.253zM16.251 6.451v2.571h0.253v-2.571h-0.253zM15.783 6.451v2.571h0.253v-2.571h-0.253zM15.316 6.451v2.571h0.253v-2.571h-0.253zM14.858 6.451v2.571h0.243v-2.571h-0.243zM14.601 6.194h3.085v3.085h-3.085v-3.085zM20.744 13.569v2.571h0.243v-2.571h-0.243zM20.277 13.569v2.571h0.253v-2.571h-0.253zM19.809 13.569v2.571h0.253v-2.571h-0.253zM19.342 13.569v2.571h0.253v-2.571h-0.253zM18.875 13.569v2.571h0.253v-2.571h-0.253zM18.417 13.569v2.571h0.244v-2.571h-0.244zM18.16 13.312h3.085v3.085h-3.085v-3.085z"
-    />
-    <path
-      fill="#fff"
-      d="M10.375 21.398c0.47 0 0.851 0.381 0.851 0.851s-0.381 0.851-0.851 0.851c-0.47 0-0.851-0.381-0.851-0.851s0.381-0.851 0.851-0.851z"
-    />
-    <path
-      fill="#000"
-      d="M10.375 21.639c0.078 0 0.152 0.015 0.221 0.041-0.074 0.043-0.125 0.123-0.125 0.215 0 0.137 0.111 0.249 0.249 0.249 0.094 0 0.176-0.052 0.218-0.129 0.030 0.072 0.046 0.151 0.046 0.234 0 0.336-0.273 0.609-0.609 0.609s-0.61-0.273-0.61-0.609c0-0.337 0.273-0.61 0.609-0.61z"
-    />
-    <path
-      fill="#fff"
-      d="M12.637 27.53c-2.107-1-3.264-2.36-3.908-3.844-0.783 0.223-1.724 0.366-2.817 0.428-0.412 0.023-0.845 0.035-1.3 0.035-0.524 0-1.077-0.015-1.656-0.046 1.933 1.931 4.31 3.418 8.712 3.446 0.325 0 0.648-0.006 0.969-0.018z"
-    />
+    <defs>
+      <mask id="cutout">
+        <rect width="100%" height="100%" fill="#fff" />
+        <path
+          fill="#000"
+          d="M18 7h-2v2h2V7ZM10 10h2v2h-2v-2ZM6.002 16.941C6.172 19.843 7.9 24 14 24c6.8 0 9.833-5 10.5-7.5.833 0 2.7-.5 3.5-2.5-.5-.5-2.5-.5-3.5 0 0-.8-.5-2.5-1.5-3-.667.667-1.7 2.4-.5 4-.5 1-1.833 1-2.5 1H6.943c-.53 0-.973.413-.941.941ZM9 13H7v2h2v-2Z"
+        />
+        <path
+          fill="#000"
+          d="M10 13h2v2h-2v-2ZM15 13h-2v2h2v-2ZM16 13h2v2h-2v-2ZM21 13h-2v2h2v-2ZM15 10h-2v2h2v-2ZM16 10h2v2h-2v-2Z"
+        />
+      </mask>
+    </defs>
+
+    <circle cx={16} cy={16} r={14} mask="url(#cutout)" />
   </svg>
 ))`
   ${icon};
-  width: 1.099609375em;
+  transform: scale(1.15);
 `
 
 export const Github = styled(({ className }: { className?: string }) => (