Create Logo component with logo svg that changes color based on theme

devlarabar · Nov 8, 2023 · 46bc86b · 46bc86b
1 parent cafc1a9
commit 46bc86b
Showing 1 changed file with 52 additions and 0 deletions.
diff --git a/client/components/ui/Logo.jsx b/client/components/ui/Logo.jsx
@@ -0,0 +1,52 @@
+const Logo = (props) => {
+    return (
+        <svg
+
+            xmlns="http://www.w3.org/2000/svg"
+                width={500}
+                height={150}
+                viewBox="0 0 750 375"
+                {...props}
+            >
+            <defs>
+            <clipPath id="a">
+                <path d="M44.234 86.016H138V180H44.234Zm0 0" />
+            </clipPath>
+            <clipPath id="b">
+                <path d="M141.836 86.016H236V180h-94.164Zm0 0" />
+            </clipPath>
+            </defs>
+            <g clipPath="url(#a)">
+            <path
+                fill="#0089b6"
+                d="M91.04 86.016c-25.86 0-46.806 20.941-46.806 46.8 0 25.86 20.946 46.805 46.805 46.805 25.856 0 46.8-20.945 46.8-46.805 0-25.859-20.944-46.8-46.8-46.8Zm0 84.242c-20.688 0-37.446-16.754-37.446-37.442 0-20.687 16.758-37.441 37.445-37.441 20.684 0 37.441 16.754 37.441 37.441 0 20.688-16.757 37.442-37.44 37.442Zm0 0"
+            />
+            </g>
+            <g clipPath="url(#b)">
+            <path
+                fill="#0089b6"
+                d="M188.64 86.016c-25.859 0-46.804 20.941-46.804 46.8 0 25.86 20.945 46.805 46.805 46.805 25.859 0 46.8-20.945 46.8-46.805 0-25.859-20.941-46.8-46.8-46.8Zm0 84.242c-20.687 0-37.445-16.754-37.445-37.442 0-20.687 16.758-37.441 37.446-37.441 20.687 0 37.441 16.754 37.441 37.441 0 20.688-16.754 37.442-37.441 37.442Zm0 0"
+            />
+            </g>
+            <path
+            className='fill-current text-secondary'
+            fill="#d7e4eb"
+            d="M23.892 196.676v64.157h9.348v-28.32h35.836v-7.516H33.24v-20.805h43.808v-7.516ZM92.99 204.192h21.902c8.617 0 13.75 4.676 13.75 12.742 0 8.063-5.043 12.738-13.75 12.738H92.99Zm0 32.902h26.762c4.765 0 8.89 4.125 8.89 8.89v11.364c0 1.285.547 3.028 1.559 3.485h9.715c-1.286-.551-1.926-2.11-1.926-3.485v-10.996c0-6.598-3.207-11.73-9.164-13.746 5.957-2.844 9.164-8.34 9.164-16.684 0-12.554-7.79-19.246-20.531-19.246H83.642v64.157h9.348ZM149.258 196.676v64.157h53.156v-7.516h-43.808v-20.805h35.836v-7.515h-35.836v-20.805h43.808v-7.516ZM210.841 196.676v64.157h53.157v-7.516h-43.809v-20.805h35.836v-7.515h-35.836v-20.805h43.809v-7.516ZM272.331 196.676v64.157h53.156v-7.516h-43.715v-56.64ZM353.254 196.676l-26.211 64.157h9.988l6.965-16.774h31.895l6.875 16.774h10.082l-26.215-64.157Zm19.52 39.871h-25.66l12.831-31.164ZM399.257 196.676v64.157h9.254v-50.774l42.71 50.774h9.255v-64.157h-9.438v50.778l-42.617-50.778ZM504.19 195.211c-22.458 0-33.727 12.832-33.727 33.543 0 20.715 11.27 33.543 33.727 33.543 17.777 0 28.41-7.879 32.074-21.078h-9.438c-3.39 8.617-10.816 13.563-22.453 13.563-16.59 0-24.473-9.895-24.473-26.028 0-16.128 7.883-26.027 24.473-26.027 11.637 0 19.063 4.95 22.453 13.563h9.438c-3.664-13.196-14.297-21.079-32.074-21.079ZM546.25 196.676v64.157h53.157v-7.516h-43.809v-20.805h35.836v-7.515h-35.836v-20.805h43.809v-7.516ZM616.998 204.192H638.9c8.617 0 13.75 4.676 13.75 12.742 0 8.063-5.043 12.738-13.75 12.738h-21.902Zm0 32.902h26.762c4.765 0 8.89 4.125 8.89 8.89v11.364c0 1.285.547 3.028 1.559 3.485h9.715c-1.286-.551-1.926-2.11-1.926-3.485v-10.996c0-6.598-3.207-11.73-9.164-13.746 5.957-2.844 9.164-8.34 9.164-16.684 0-12.554-7.79-19.246-20.531-19.246H607.65v64.157h9.348Zm0 0"
+            />
+            <path
+
+            fill="#0089b6"
+            d="M693.344 187.512v7.973c-14.48 1.469-21.906 8.34-21.906 18.789 0 7.7 4.125 13.383 13.75 16.68l21.813 7.332c4.03 1.375 5.132 3.027 5.132 5.59 0 4.308-4.125 6.417-10.906 6.417-8.617 0-13.656-2.66-13.656-8.156h-17.047c0 10.446 7.055 18.239 22.82 19.887v7.973h12.832v-7.973c15.579-1.465 22.727-8.25 22.727-18.606 0-8.156-3.39-13.195-12.188-16.039l-22.914-7.878c-3.574-1.286-5.316-3.395-5.316-6.235 0-3.941 3.574-6.047 9.441-6.047 8.25 0 13.29 3.114 13.29 8.157h16.863c0-11.368-7.422-18.239-21.903-19.797v-8.067Zm0 0"
+            />
+            <path
+            fill="none"
+            stroke="#0089b6"
+            strokeLinecap="round"
+            strokeWidth={9.75}
+            d="M27.914 171.07V90.887"
+            />
+        </svg>
+    )
+}
+
+export default Logo