From 236ba627fe2da61938cce05b16fc865c76a83e8a Mon Sep 17 00:00:00 2001 From: Nasreddine Bac Ali Date: Sat, 12 Mar 2022 15:44:32 +0100 Subject: [PATCH] feat: use react-icons icons library --- package.json | 6 +-- src/Root.tsx | 47 ++++++++++++++--------- src/components/Accordion.tsx | 8 ++-- src/components/Alert.tsx | 4 +- src/components/Breadcrumb.tsx | 4 +- src/components/DarkThemeToggle.tsx | 61 ++++++++++-------------------- src/components/Sidebar.tsx | 4 +- src/pages/AccordionPage.tsx | 6 +-- src/pages/AlertsPage.tsx | 22 +++++------ src/pages/BadgesPage.tsx | 28 +++++++------- src/pages/BreadcrumbPage.tsx | 6 +-- src/pages/DashboardPage.tsx | 4 +- yarn.lock | 10 ++--- 13 files changed, 100 insertions(+), 110 deletions(-) diff --git a/package.json b/package.json index e777c2949..c04ab559a 100644 --- a/package.json +++ b/package.json @@ -33,9 +33,9 @@ "prepublishOnly": "yarn build-components" }, "dependencies": { - "@heroicons/react": "^1.0.5", - "@popperjs/core": "^2.11.2", - "classnames": "^2.3.1" + "@popperjs/core": "^2.11.2", + "classnames": "^2.3.1", + "react-icons": "^4.3.1" }, "peerDependencies": { "react": "^17", diff --git a/src/Root.tsx b/src/Root.tsx index 47e4622dc..cf36cda7e 100644 --- a/src/Root.tsx +++ b/src/Root.tsx @@ -1,14 +1,15 @@ import { FC, useState } from 'react'; import { - BadgeCheckIcon, - BellIcon, - ChevronDoubleRightIcon, - CreditCardIcon, - DotsCircleHorizontalIcon, - DuplicateIcon, - MenuAlt1Icon, - TemplateIcon, -} from '@heroicons/react/solid'; + HiBadgeCheck, + HiBell, + HiChevronDoubleRight, + HiCreditCard, + HiDotsCircleHorizontal, + HiDuplicate, + HiHome, + HiMenuAlt1, +} from 'react-icons/hi'; +import { BsGithub } from 'react-icons/bs'; import { Route, Routes } from 'react-router-dom'; import { DarkThemeToggle, Navbar, Sidebar, SidebarItem } from './components'; @@ -26,43 +27,43 @@ export const Root: FC = () => { [ { group: false, - icon: TemplateIcon, + icon: HiHome, title: 'Dashboard', href: '/', }, { group: false, - icon: BellIcon, + icon: HiBell, title: 'Alerts', href: '/alerts', }, { group: false, - icon: CreditCardIcon, + icon: HiCreditCard, title: 'Accordion', href: '/accordion', }, { group: false, - icon: BadgeCheckIcon, + icon: HiBadgeCheck, title: 'Badges', href: '/badges', }, { group: false, - icon: ChevronDoubleRightIcon, + icon: HiChevronDoubleRight, title: 'Breadcrumb', href: '/breadcrumb', }, { group: false, - icon: DuplicateIcon, + icon: HiDuplicate, title: 'Buttons', href: '/buttons', }, { group: false, - icon: DotsCircleHorizontalIcon, + icon: HiDotsCircleHorizontal, title: 'Tooltips', href: '/tooltips', }, @@ -73,13 +74,23 @@ export const Root: FC = () => {
- setCollapsed(!collapsed)} /> Flowbite React Components
- +
+ + + + +
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx index 28da44e58..74f4baadb 100644 --- a/src/components/Accordion.tsx +++ b/src/components/Accordion.tsx @@ -1,5 +1,5 @@ import { ComponentProps, FC, Fragment, ReactNode, useState } from 'react'; -import { ChevronDownIcon } from '@heroicons/react/solid'; +import { HiChevronDown } from 'react-icons/hi'; import classNames from 'classnames'; export type AccordionItem = { @@ -14,11 +14,11 @@ export type AccordionProps = { arrowIcon?: FC>; }; -export const Accordion: FC = ({ items, flush, arrowIcon: ArrowIcon = ChevronDownIcon }) => { +export const Accordion: FC = ({ items, flush, arrowIcon: ArrowIcon = HiChevronDown }) => { const [openItems, setOpenItems] = useState<(boolean | undefined)[]>(items.map((item) => item.open)); return ( - <> +
{items.map((item, index) => (

@@ -59,6 +59,6 @@ export const Accordion: FC = ({ items, flush, arrowIcon: ArrowIc

))} - +
); }; diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx index cdc5b4c83..2af3fab33 100644 --- a/src/components/Alert.tsx +++ b/src/components/Alert.tsx @@ -1,6 +1,6 @@ import { ComponentProps, FC, ReactNode } from 'react'; import classNames from 'classnames'; -import { XIcon } from '@heroicons/react/solid'; +import { HiX } from 'react-icons/hi'; export type AlertProps = { color?: 'blue' | 'red' | 'green' | 'yellow' | 'gray'; @@ -58,7 +58,7 @@ export const Alert: FC = ({ onClick={onDismiss} > Close - + )}
diff --git a/src/components/Breadcrumb.tsx b/src/components/Breadcrumb.tsx index 2b7974ac2..44777a506 100644 --- a/src/components/Breadcrumb.tsx +++ b/src/components/Breadcrumb.tsx @@ -1,5 +1,5 @@ import { ComponentProps, FC } from 'react'; -import { ChevronRightIcon } from '@heroicons/react/outline'; +import { HiOutlineChevronRight } from 'react-icons/hi'; export type BreadcrumbItem = { icon?: FC>; @@ -17,7 +17,7 @@ export const Breadcrumb: FC = ({ items }) => {
    {items.map((item, index) => (
  1. - {index > 0 && } + {index > 0 && } {index < items.length - 1 ? ( { - useEffect(() => { - const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon'); - const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon'); + const [theme, setTheme] = useState(); - // Change the icons inside the button based on previous settings + useEffect(() => { if ( localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) ) { - themeToggleLightIcon?.classList.remove('hidden'); + setTheme('dark'); } else { - themeToggleDarkIcon?.classList.remove('hidden'); + setTheme('light'); } + }, []); - const themeToggleBtn = document.getElementById('theme-toggle'); - - const listener = () => { - // toggle icons inside button - themeToggleDarkIcon?.classList.toggle('hidden'); - themeToggleLightIcon?.classList.toggle('hidden'); - - // if set via local storage previously - if (localStorage.getItem('color-theme')) { - if (localStorage.getItem('color-theme') === 'light') { - document.documentElement.classList.add('dark'); - localStorage.setItem('color-theme', 'dark'); - } else { - document.documentElement.classList.remove('dark'); - localStorage.setItem('color-theme', 'light'); - } - - // if NOT set via local storage previously + useEffect(() => { + if (theme) { + localStorage.setItem('color-theme', theme); + if (theme === 'dark') { + document.documentElement.classList.add('dark'); } else { - if (document.documentElement.classList.contains('dark')) { - document.documentElement.classList.remove('dark'); - localStorage.setItem('color-theme', 'light'); - } else { - document.documentElement.classList.add('dark'); - localStorage.setItem('color-theme', 'dark'); - } + document.documentElement.classList.remove('dark'); } - }; - - themeToggleBtn?.addEventListener('click', listener); + } + }, [theme]); - return () => themeToggleBtn?.removeEventListener('click', listener); - }, []); + const toggleTheme = () => setTheme(theme === 'dark' ? 'light' : 'dark'); return ( ); }; diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index e2e471bdb..3be406d16 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,7 +1,7 @@ import { ComponentProps, FC, useState } from 'react'; import classNames from 'classnames'; -import { ChevronDownIcon } from '@heroicons/react/solid'; import { Link, useLocation } from 'react-router-dom'; +import { HiChevronDown } from 'react-icons/hi'; export type SidebarItem = { icon: FC>; @@ -84,7 +84,7 @@ export const Sidebar: FC = ({ collapsed, itemsGroups }) => { {!collapsed && ( <> {item.title} - + )} diff --git a/src/pages/AccordionPage.tsx b/src/pages/AccordionPage.tsx index 83a9b25e3..83fd7b059 100644 --- a/src/pages/AccordionPage.tsx +++ b/src/pages/AccordionPage.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { ArrowCircleDownIcon } from '@heroicons/react/outline'; +import { HiOutlineArrowCircleDown } from 'react-icons/hi'; import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'; @@ -147,9 +147,9 @@ const items = [
    Arrow style - + - {``} + {``}
    diff --git a/src/pages/AlertsPage.tsx b/src/pages/AlertsPage.tsx index 513af30c0..c431dcb04 100644 --- a/src/pages/AlertsPage.tsx +++ b/src/pages/AlertsPage.tsx @@ -1,5 +1,5 @@ import { FC } from 'react'; -import { EyeIcon, InformationCircleIcon } from '@heroicons/react/solid'; +import { HiEye, HiInformationCircle } from 'react-icons/hi'; import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism'; import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'; @@ -32,12 +32,12 @@ export const AlertsPage: FC = () => {
    Alerts with icon - + {alertText} {` - + Info alert! Change a few things... `.trim()} @@ -101,7 +101,7 @@ export const AlertsPage: FC = () => { type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900" > - + View more
    } - Icon={InformationCircleIcon} + Icon={HiInformationCircle} >

    This is a info alert

    @@ -133,7 +133,7 @@ export const AlertsPage: FC = () => { type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 mr-2 text-center inline-flex items-center dark:bg-blue-800 dark:hover:bg-blue-900" > - + View more