load all icons with tree-shaking

This commit is contained in:
spencerwooo
2021-12-20 17:10:29 +08:00
parent c778c6d94a
commit ae3c8144b8
3 changed files with 45 additions and 40 deletions
+22 -26
View File
@@ -1,4 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconName } from '@fortawesome/fontawesome-svg-core'
import { Dialog, Transition } from '@headlessui/react'
import toast, { Toaster } from 'react-hot-toast'
@@ -40,39 +41,34 @@ const Navbar = () => {
}
return (
<div className="text-left py-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 border-b border-gray-900/10 backdrop-blur-md z-[100]">
<div className="flex items-center justify-between w-full max-w-5xl mx-auto px-2">
<Toaster />
<div className="bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 border-b border-gray-900/10 backdrop-blur-md z-[100]">
<Toaster />
<div className="flex items-center justify-between w-full max-w-5xl mx-auto pr-4 py-1">
<Link href="/">
<a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2">
<Image src={siteConfig.icon} alt="icon" width="28" height="28" />
<span className="sm:block hidden text-xl font-bold">{siteConfig.title}</span>
<span className="sm:block hidden text-lg font-bold">{siteConfig.title}</span>
</a>
</Link>
<div className="flex items-center text-gray-700">
<a
href={siteConfig.contact.github}
target="_blank"
rel="noopener noreferrer"
className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 p-2 rounded"
>
<FontAwesomeIcon icon={['fab', 'github']} size="lg" />
</a>
<a
href={siteConfig.contact.telegram}
target="_blank"
rel="noopener noreferrer"
className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 p-2 rounded"
>
<FontAwesomeIcon icon={['fab', 'telegram-plane']} size="lg" />
</a>
<a
href={siteConfig.contact.email}
className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 p-2 rounded"
>
<FontAwesomeIcon icon={['far', 'envelope']} size="lg" />
<div className="flex items-center space-x-4 text-gray-700">
{siteConfig.links.map(l => (
<a
key={l.name}
href={l.link}
target="_blank"
rel="noopener noreferrer"
className="flex items-center space-x-2 dark:text-white hover:opacity-80"
>
<FontAwesomeIcon icon={['fab', l.name.toLowerCase() as IconName]} />
<span className="text-sm hidden md:inline-block">{l.name}</span>
</a>
))}
<a href={siteConfig.email} className="flex items-center space-x-2 dark:text-white hover:opacity-80">
<FontAwesomeIcon icon={['far', 'envelope']} />
<span className="text-sm hidden md:inline-block">Email</span>
</a>
{tokenPresent && (