Refactored icons.

src/components/common/Breadcrumb.tsx

@@ -1,7 +1,8 @@
-import Link from 'next/link';
-import { Flexbox, Icon, Icons, Text } from '@umami/react-zen';
-import styles from './Breadcrumb.module.css';
 import { Fragment } from 'react';
+import Link from 'next/link';
+import { Row, Icon, Text } from '@umami/react-zen';
+import { Chevron } from '@/components/icons';
+import styles from './Breadcrumb.module.css';
 
 export interface BreadcrumbProps {
   data: {
@@ -12,7 +13,7 @@ export interface BreadcrumbProps {
 
 export function Breadcrumb({ data }: BreadcrumbProps) {
   return (
-    <Flexbox alignItems="center" gap={3} className={styles.bar}>
+    <Row alignItems="center" gap className={styles.bar}>
       {data.map((a, i) => {
         return (
           <Fragment key={i}>
@@ -25,12 +26,12 @@ export function Breadcrumb({ data }: BreadcrumbProps) {
             )}
             {i !== data.length - 1 ? (
               <Icon rotate={270}>
-                <Icons.Chevron />
+                <Chevron />
               </Icon>
             ) : null}
           </Fragment>
         );
       })}
-    </Flexbox>
+    </Row>
   );
 }

src/components/common/DateDisplay.tsx

@@ -1,7 +1,7 @@
 import { Icon, Row, Text } from '@umami/react-zen';
 import { differenceInDays, isSameDay } from 'date-fns';
 import { useLocale } from '@/components/hooks';
-import { Lucide } from '@/components/icons';
+import { Calendar } from '@/components/icons';
 import { formatDate } from '@/lib/date';
 
 export function DateDisplay({ startDate, endDate }) {
@@ -11,7 +11,7 @@ export function DateDisplay({ startDate, endDate }) {
   return (
     <Row gap="3" alignItems="center" wrap="nowrap">
       <Icon>
-        <Lucide.Calendar />
+        <Calendar />
       </Icon>
       <Text wrap="nowrap">
         {isSingleDate ? (

src/components/common/EmptyPlaceholder.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Icon, Text, Column } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Logo } from '@/components/icons';
 
 export interface EmptyPlaceholderProps {
   message?: string;
@@ -11,7 +11,7 @@ export function EmptyPlaceholder({ message, children }: EmptyPlaceholderProps) {
   return (
     <Column alignItems="center" justifyContent="center" gap="5" height="100%" width="100%">
       <Icon size="xl" fillColor="3" strokeColor="3">
-        <Icons.Logo />
+        <Logo />
       </Icon>
       <Text>{message}</Text>
       <div>{children}</div>

src/components/common/ErrorMessage.tsx

@@ -1,6 +1,7 @@
-import { Icon, Icons, Text } from '@umami/react-zen';
+import { Icon, Text } from '@umami/react-zen';
 import styles from './ErrorMessage.module.css';
 import { useMessages } from '@/components/hooks';
+import { Alert } from '@/components/icons';
 
 export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();
@@ -8,7 +9,7 @@ export function ErrorMessage() {
   return (
     <div className={styles.error}>
       <Icon className={styles.icon} size="lg">
-        <Icons.Alert />
+        <Alert />
       </Icon>
       <Text>{formatMessage(messages.error)}</Text>
     </div>

src/components/common/FilterLink.tsx

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import Link from 'next/link';
-import { Icon, Icons } from '@umami/react-zen';
+import { Icon } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
+import { ExternalLink } from '@/components/icons';
 import styles from './FilterLink.module.css';
 
 export interface FilterLinkProps {
@@ -44,7 +45,7 @@ export function FilterLink({
       {externalUrl && (
         <a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
           <Icon className={styles.icon}>
-            <Icons.ExternalLink />
+            <ExternalLink />
           </Icon>
         </a>
       )}

src/components/common/FilterRecord.tsx

@@ -7,10 +7,10 @@ import {
   ListItem,
   Select,
   Icon,
-  Icons,
   Button,
 } from '@umami/react-zen';
 import { useFilters } from '@/components/hooks';
+import { Close } from '@/components/icons';
 
 export interface FilterRecordProps {
   name: string;
@@ -55,7 +55,7 @@ export function FilterRecord({
       <Column justifyContent="flex-end">
         <Button variant="quiet" onPress={() => onRemove?.(name)}>
           <Icon>
-            <Icons.Close />
+            <Close />
           </Icon>
         </Button>
       </Column>

src/components/common/HamburgerButton.tsx

@@ -1,5 +1,6 @@
-import { Button, Icon, Icons } from '@umami/react-zen';
+import { Button, Icon } from '@umami/react-zen';
 import { useState } from 'react';
+import { Close, Menu } from '@/components/icons';
 import { MobileMenu } from './MobileMenu';
 
 export function HamburgerButton({ menuItems }: { menuItems: any[] }) {
@@ -11,7 +12,7 @@ export function HamburgerButton({ menuItems }: { menuItems: any[] }) {
   return (
     <>
       <Button variant="quiet" onClick={handleClick}>
-        <Icon>{active ? <Icons.Close /> : <Icons.Menu />}</Icon>
+        <Icon>{active ? <Close /> : <Menu />}</Icon>
       </Button>
       {active && <MobileMenu items={menuItems} onClose={handleClose} />}
     </>

src/components/common/Pager.tsx

@@ -1,5 +1,6 @@
-import { Button, Icon, Icons, Row, Text } from '@umami/react-zen';
+import { Button, Icon, Row, Text } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
+import { Chevron } from '@/components/icons';
 
 export interface PagerProps {
   page: string | number;
@@ -38,12 +39,12 @@ export function Pager({ page, pageSize, count, onPageChange }: PagerProps) {
         <Text>{formatMessage(labels.pageOf, { current: page, total: maxPage })}</Text>
         <Button onPress={() => handlePageChange(-1)} isDisabled={firstPage}>
           <Icon size="sm" rotate={180}>
-            <Icons.Chevron />
+            <Chevron />
           </Icon>
         </Button>
         <Button onPress={() => handlePageChange(1)} isDisabled={lastPage}>
           <Icon size="sm">
-            <Icons.Chevron />
+            <Chevron />
           </Icon>
         </Button>
       </Row>