chore: icon cleanup (calcom#13770)

Co-authored-by: Joe Au-Yeung <[email protected]> Co-authored-by: sean-brydon <[email protected]>
athaulrehman0304 · Apr 3, 2024 · 3f02de8 · 3f02de8
1 parent 7421cea
commit 3f02de8
Show file tree

Hide file tree

Showing 294 changed files with 3,149 additions and 1,703 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -4,3 +4,4 @@ node_modules
 **/**/public
 packages/prisma/zod
 apps/web/public/embed
+packages/ui/components/icon/dynamicIconImports.tsx
diff --git a/.prettierignore b/.prettierignore
@@ -17,3 +17,4 @@ packages/prisma/zod
 packages/prisma/enums
 apps/web/public/embed
 apps/api/v2/swagger/documentation.json
+packages/ui/components/icon/dynamicIconImports.tsx
diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { X } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 export default function AddToHomescreen() {
   const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <X className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
+                <Icon name="x" className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
               </button>
             </div>
           </div>

diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx
@@ -9,8 +9,7 @@ import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
-import { Badge, ListItemText, Avatar } from "@calcom/ui";
-import { AlertCircle } from "@calcom/ui/components/icon";
+import { Avatar, Badge, Icon, ListItemText } from "@calcom/ui";
 
 type ShouldHighlight =
   | {
@@ -105,7 +104,7 @@ export default function AppListCard(props: AppListCardProps) {
           <ListItemText component="p">{description}</ListItemText>
           {invalidCredential && (
             <div className="flex gap-x-2 pt-2">
-              <AlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
+              <Icon name="circle-alert" className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
               <ListItemText component="p" className="whitespace-pre-wrap text-red-500">
                 {t("invalid_credential")}
               </ListItemText>

diff --git a/apps/web/components/EnterprisePage.tsx b/apps/web/components/EnterprisePage.tsx
@@ -3,40 +3,39 @@
 import { ShellMain } from "@calcom/features/shell/Shell";
 import { UpgradeTip } from "@calcom/features/tips";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, ButtonGroup } from "@calcom/ui";
-import { BarChart, CreditCard, Globe, Lock, Paintbrush, Users } from "@calcom/ui/components/icon";
+import { Button, ButtonGroup, Icon } from "@calcom/ui";
 
 export default function EnterprisePage() {
   const { t } = useLocale();
 
   const features = [
     {
-      icon: <Globe className="h-5 w-5 text-red-500" />,
+      icon: <Icon name="globe" className="h-5 w-5 text-red-500" />,
       title: t("branded_subdomain"),
       description: t("branded_subdomain_description"),
     },
     {
-      icon: <BarChart className="h-5 w-5 text-blue-500" />,
+      icon: <Icon name="bar-chart" className="h-5 w-5 text-blue-500" />,
       title: t("org_insights"),
       description: t("org_insights_description"),
     },
     {
-      icon: <Paintbrush className="h-5 w-5 text-pink-500" />,
+      icon: <Icon name="paintbrush" className="h-5 w-5 text-pink-500" />,
       title: t("extensive_whitelabeling"),
       description: t("extensive_whitelabeling_description"),
     },
     {
-      icon: <Users className="h-5 w-5 text-orange-500" />,
+      icon: <Icon name="users" className="h-5 w-5 text-orange-500" />,
       title: t("unlimited_teams"),
       description: t("unlimited_teams_description"),
     },
     {
-      icon: <CreditCard className="h-5 w-5 text-green-500" />,
+      icon: <Icon name="credit-card" className="h-5 w-5 text-green-500" />,
       title: t("unified_billing"),
       description: t("unified_billing_description"),
     },
     {
-      icon: <Lock className="h-5 w-5 text-purple-500" />,
+      icon: <Icon name="lock" className="h-5 w-5 text-purple-500" />,
       title: t("advanced_managed_events"),
       description: t("advanced_managed_events_description"),
     },

diff --git a/apps/web/components/apps/AdditionalCalendarSelector.tsx b/apps/web/components/apps/AdditionalCalendarSelector.tsx
@@ -6,12 +6,11 @@ import { trpc } from "@calcom/trpc/react";
 import {
   Button,
   Dropdown,
+  DropdownItem,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
-  DropdownItem,
+  DropdownMenuTrigger,
 } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -42,15 +41,15 @@ const AdditionalCalendarSelector = ({ isPending }: AdditionalCalendarSelectorPro
         return (
           <Dropdown modal={false}>
             <DropdownMenuTrigger asChild>
-              <Button StartIcon={Plus} color="secondary" {...(isPending && { loading: isPending })}>
+              <Button StartIcon="plus" color="secondary" {...(isPending && { loading: isPending })}>
                 {t("add")}
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               {options.map((data) => (
                 <DropdownMenuItem key={data.slug} className="focus:outline-none">
                   {data.slug === "add-new" ? (
-                    <DropdownItem StartIcon={Plus} color="minimal" href="/apps/categories/calendar">
+                    <DropdownItem StartIcon="plus" color="minimal" href="/apps/categories/calendar">
                       {t("install_new_calendar_app")}
                     </DropdownItem>
                   ) : (

diff --git a/apps/web/components/apps/AppList.tsx b/apps/web/components/apps/AppList.tsx
@@ -11,17 +11,16 @@ import type { AppCategories } from "@calcom/prisma/enums";
 import { trpc, type RouterOutputs } from "@calcom/trpc";
 import type { App } from "@calcom/types/App";
 import {
+  Alert,
+  Button,
   Dropdown,
   DropdownItem,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
   List,
   showToast,
-  Button,
-  DropdownMenuItem,
-  Alert,
 } from "@calcom/ui";
-import { MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
 
 import AppListCard from "@components/AppListCard";
 
@@ -82,15 +81,15 @@ export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppL
             <div className="flex justify-end">
               <Dropdown modal={false}>
                 <DropdownMenuTrigger asChild>
-                  <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
+                  <Button StartIcon="ellipsis" variant="icon" color="secondary" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   {!appIsDefault && variant === "conferencing" && !item.credentialOwner?.teamId && (
                     <DropdownMenuItem>
                       <DropdownItem
                         type="button"
                         color="secondary"
-                        StartIcon={Video}
+                        StartIcon="video"
                         onClick={() => {
                           const locationType = getEventLocationTypeFromApp(item?.locationOption?.value ?? "");
                           if (locationType?.linkType === "static") {
@@ -214,7 +213,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
           color="destructive"
           onClick={() => handleDisconnect(credentialId, teamId)}
           disabled={isGlobal}
-          StartIcon={Trash}>
+          StartIcon="trash">
           {t("remove_app")}
         </DropdownItem>
       </DropdownMenuItem>

diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import type { IframeHTMLAttributes } from "react";
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
@@ -10,8 +10,7 @@ import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/consta
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App as AppType } from "@calcom/types/App";
-import { Badge, Button, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
-import { BookOpen, Check, ExternalLink, File, Flag, Mail, Shield } from "@calcom/ui/components/icon";
+import { Badge, Button, Icon, SkeletonButton, SkeletonText, showToast } from "@calcom/ui";
 
 import { InstallAppButtonChild } from "./InstallAppButtonChild";
 
@@ -196,7 +195,7 @@ export const AppPage = ({
           isGlobal ||
           (existingCredentials.length > 0 && allowedMultipleInstalls ? (
             <div className="flex space-x-3">
-              <Button StartIcon={Check} color="secondary" disabled>
+              <Button StartIcon="check" color="secondary" disabled>
                 {existingCredentials.length > 0
                   ? t("active_install", { count: existingCredentials.length })
                   : t("default")}
@@ -323,7 +322,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis text-sm font-normal no-underline hover:underline"
                 href={docs}>
-                <BookOpen className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
+                <Icon name="book-open" className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
                 {t("documentation")}
               </a>
             </li>
@@ -335,7 +334,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={website}>
-                <ExternalLink className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <Icon name="external-link" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -347,7 +346,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={`mailto:${email}`}>
-                <Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <Icon name="mail" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
 
                 {email}
               </a>
@@ -360,7 +359,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={tos}>
-                <File className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <Icon name="file" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -372,7 +371,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={privacy}>
-                <Shield className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <Icon name="shield" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                 {t("privacy_policy")}
               </a>
             </li>
@@ -383,7 +382,7 @@ export const AppPage = ({
           {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
         </span>
         <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
-          <Flag className="inline h-3 w-3" /> {t("report_app")}
+          <Icon name="flag" className="inline h-3 w-3" /> {t("report_app")}
         </a>
       </div>
     </div>

diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx
@@ -11,13 +11,12 @@ import {
   Alert,
   Button,
   EmptyScreen,
+  Label,
   List,
-  AppSkeletonLoader as SkeletonLoader,
   ShellSubHeading,
-  Label,
+  AppSkeletonLoader as SkeletonLoader,
   showToast,
 } from "@calcom/ui";
-import { Calendar } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -267,7 +266,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
               </>
             ) : (
               <EmptyScreen
-                Icon={Calendar}
+                Icon="calendar"
                 headline={t("no_category_apps", {
                   category: t("calendar").toLowerCase(),
                 })}

diff --git a/apps/web/components/apps/InstallAppButtonChild.tsx b/apps/web/components/apps/InstallAppButtonChild.tsx
@@ -122,14 +122,13 @@ export const InstallAppButtonChild = ({
                 data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
                 key={team.id}
                 disabled={isInstalled}
-                StartIcon={(props: { className?: string }) => (
+                CustomStartIcon={
                   <Avatar
                     alt={team.logo || ""}
                     imageSrc={team.logo || `${WEBAPP_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
                     size="sm"
-                    {...props}
                   />
-                )}
+                }
                 onClick={() => {
                   mutation.mutate(
                     team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }

diff --git a/apps/web/components/apps/layouts/AppsLayout.tsx b/apps/web/components/apps/layouts/AppsLayout.tsx
@@ -6,7 +6,6 @@ import React from "react";
 import { ShellMain } from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui";
-import { AlertCircle } from "@calcom/ui/components/icon";
 
 type AppsLayoutProps = {
   children: React.ReactNode;
@@ -27,7 +26,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
         <main className="w-full">
           {emptyStore ? (
             <EmptyScreen
-              Icon={AlertCircle}
+              Icon="circle-alert"
               headline={isAdmin ? t("no_apps") : t("no_apps_configured")}
               description={isAdmin ? t("enable_in_settings") : t("please_contact_admin")}
               buttonText={isAdmin ? t("apps_settings") : ""}

diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx
@@ -1,7 +1,4 @@
-import React from "react";
-
 import { Button, SkeletonText } from "@calcom/ui";
-import { MoreHorizontal } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -31,7 +28,7 @@ function SkeletonItem() {
           type="button"
           variant="icon"
           color="secondary"
-          StartIcon={MoreHorizontal}
+          StartIcon="ellipsis"
           disabled
         />
       </div>