Site: Add Logo (#121)

* bump package

* Add Logo

* remove console

* prettify it

* add favicons and fix issue

site/src/components/Header.tsx

@@ -1,7 +1,7 @@
 import {Button, Flex, Link, Stack, Text,} from "@chakra-ui/core";
 import download from "downloadjs";
 import JSZip from "jszip";
-import { Download, GitHub } from 'lucide-react';
+import { Download, Github } from 'lucide-react';
 import {IconCustomizerDrawer} from "./IconCustomizerDrawer";
 
 function generateZip(icons) {
@@ -24,7 +24,7 @@ const Header = ({ data }) => {
 
   return (
     <Flex direction="column" align="center" justify="center">
-      <Text fontSize="3xl" as="b" mb="4" textAlign="center">
+      <Text fontSize="4xl" as="b" mb="4" textAlign="center">
         Simply beautiful open source icons, community-sourced
       </Text>
       <Text fontSize="lg" as="p" textAlign="center" mb="8">
@@ -41,7 +41,7 @@ const Header = ({ data }) => {
         <IconCustomizerDrawer/>
         <Button
           as="a"
-          leftIcon={<GitHub/>}
+          leftIcon={<Github/>}
           size="lg"
           href={repositoryUrl}
           target="__blank"

site/src/components/Layout.tsx

@@ -1,7 +1,9 @@
 import { Box, Divider, Flex, Text, Link, Icon, useColorMode, useColorModeValue, IconButton } from "@chakra-ui/core";
 import { useKeyBindings } from "../lib/key";
 import { useRouter } from "next/router";
+import NextLink from "next/link"
 import { Moon, Sun } from 'lucide-react';
+import Logo from 'babel-loader!react-svg-loader?jsx=true!../../public/logo.svg';
 
 const Layout = ({ children }) => {
   const router = useRouter();
@@ -39,16 +41,27 @@ const Layout = ({ children }) => {
           px={8}
         >
           <Flex justifyContent="center" alignItems="center">
-            <Text
-              fontSize="4xl"
-              onClick={() => setQuery("")}
-              style={{ cursor: "pointer" }}
-            >
-              Lucide
-            </Text>
+            <NextLink href="/" passHref>
+              <Link display="flex" _hover={{textDecoration: 'none'}}>
+                <Icon boxSize={12} marginRight="8px">
+                  <Logo/>
+                </Icon>
+                <Text
+                  fontSize="40px"
+                  lineHeight="48px"
+                >
+                  Lucide
+                </Text>
+              </Link>
+            </NextLink>
           </Flex>
           <Flex justifyContent="center" alignItems="center">
-          <Link href="https://github.com/lucide-icons/lucide" isExternal style={{ fontSize: "18px", marginRight: '24px' }}>
+          <Link
+            href="https://github.com/lucide-icons/lucide"
+            isExternal
+            marginRight={6}
+            fontSize="xl"
+          >
             Github
           </Link>
           <IconButton

site/src/pages/_document.tsx

@@ -10,6 +10,14 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Mukta:wght@400;600;700&display=swap"
             rel="stylesheet"
           />
+          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
+          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
+          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
+          <link rel="manifest" href="/site.webmanifest"/>
+          <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F56565"/>
+          <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+          <meta name="msapplication-TileColor" content="#F56565"/>
+          <meta name="theme-color" content="#F56565"></meta>
         </Head>
         <style jsx global>{`
           * {