Removed more string icons

matt-aitken · matt-aitken · commit edbbf16fca18 · 2025-01-23T11:28:09.000Z
diff --git a/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx b/apps/webapp/app/components/runs/v3/ScheduleFilters.tsx
@@ -1,4 +1,4 @@
-import { XMarkIcon } from "@heroicons/react/20/solid";
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/20/solid";
 import { useNavigate } from "@remix-run/react";
 import { type RuntimeEnvironment } from "@trigger.dev/database";
 import { useCallback } from "react";
@@ -97,7 +97,7 @@ export function ScheduleFilters({ possibleEnvironments, possibleTasks }: Schedul
       <Input
         name="search"
         placeholder="Search schedule id, external id, deduplication id or CRON pattern"
-        icon="search"
+        icon={MagnifyingGlassIcon}
         variant="tertiary"
         className="grow"
         defaultValue={search}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx
@@ -1,6 +1,6 @@
 import { conform, list, requestIntent, useFieldList, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { LockOpenIcon, UserPlusIcon } from "@heroicons/react/20/solid";
+import { EnvelopeIcon, LockOpenIcon, UserPlusIcon } from "@heroicons/react/20/solid";
 import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
@@ -172,7 +172,7 @@ export default function Page() {
                   <Input
                     {...conform.input(email, { type: "email" })}
                     placeholder={index === 0 ? "Enter an email address" : "Add another email"}
-                    icon="envelope"
+                    icon={EnvelopeIcon}
                     autoFocus={index === 0}
                     onChange={(e) => {
                       fieldValues.current[index] = e.target.value;
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam._index/route.tsx
@@ -5,6 +5,7 @@ import {
   ChevronDownIcon,
   ChevronUpIcon,
   LightBulbIcon,
+  MagnifyingGlassIcon,
   UserPlusIcon,
   VideoCameraIcon,
 } from "@heroicons/react/20/solid";
@@ -242,7 +243,7 @@ export default function Page() {
                       <Input
                         placeholder="Search tasks"
                         variant="tertiary"
-                        icon="search"
+                        icon={MagnifyingGlassIcon}
                         fullWidth={true}
                         value={filterText}
                         onChange={(e) => setFilterText(e.target.value)}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam/route.tsx
@@ -6,6 +6,7 @@ import {
   ChevronRightIcon,
   InformationCircleIcon,
   LockOpenIcon,
+  MagnifyingGlassIcon,
   MagnifyingGlassMinusIcon,
   MagnifyingGlassPlusIcon,
   StopCircleIcon,
@@ -1278,7 +1279,7 @@ function SearchField({ onChange }: { onChange: (value: string) => void }) {
     <Input
       placeholder="Search log"
       variant="tertiary"
-      icon="search"
+      icon={MagnifyingGlassIcon}
       fullWidth={true}
       value={value}
       onChange={(e) => updateValue(e.target.value)}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.runs.electric.$runParam/route.tsx
@@ -4,6 +4,7 @@ import {
   ChevronRightIcon,
   InformationCircleIcon,
   LockOpenIcon,
+  MagnifyingGlassIcon,
   MagnifyingGlassMinusIcon,
   MagnifyingGlassPlusIcon,
   StopCircleIcon,
@@ -1256,7 +1257,7 @@ function SearchField({ onChange }: { onChange: (value: string) => void }) {
     <Input
       placeholder="Search log"
       variant="tertiary"
-      icon="search"
+      icon={MagnifyingGlassIcon}
       fullWidth={true}
       value={value}
       onChange={(e) => updateValue(e.target.value)}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.settings/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.settings/route.tsx
@@ -1,5 +1,6 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
+import { FolderIcon } from "@heroicons/react/20/solid";
 import { Form, MetaFunction, useActionData, useNavigation } from "@remix-run/react";
 import { ActionFunction, json } from "@remix-run/server-runtime";
 import { z } from "zod";
@@ -165,7 +166,7 @@ export default function Page() {
                     {...conform.input(projectName, { type: "text" })}
                     defaultValue={project.name}
                     placeholder="Your project name"
-                    icon="folder"
+                    icon={FolderIcon}
                     autoFocus
                   />
                   <FormError id={projectName.errorId}>{projectName.error}</FormError>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.v3.$projectParam.test/route.tsx
@@ -1,4 +1,4 @@
-import { BookOpenIcon } from "@heroicons/react/20/solid";
+import { BookOpenIcon, MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import {
   Link,
   MetaFunction,
@@ -209,7 +209,7 @@ function TaskSelector({
         <Input
           placeholder="Search tasks"
           variant="medium"
-          icon="search"
+          icon={MagnifyingGlassIcon}
           fullWidth={true}
           value={filterText}
           autoFocus
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx
@@ -1,6 +1,6 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { TrashIcon } from "@heroicons/react/20/solid";
+import { ExclamationTriangleIcon, FolderIcon, TrashIcon } from "@heroicons/react/20/solid";
 import { Form, MetaFunction, useActionData, useNavigation } from "@remix-run/react";
 import { ActionFunction, json } from "@remix-run/server-runtime";
 import { redirect } from "remix-typedjson";
@@ -208,7 +208,7 @@ export default function Page() {
                     {...conform.input(organizationName, { type: "text" })}
                     defaultValue={organization.title}
                     placeholder="Your organization name"
-                    icon="folder"
+                    icon={FolderIcon}
                     autoFocus
                   />
                   <FormError id={organizationName.errorId}>{organizationName.error}</FormError>
@@ -243,7 +243,7 @@ export default function Page() {
                   <Input
                     {...conform.input(organizationSlug, { type: "text" })}
                     placeholder="Your organization slug"
-                    icon="warning"
+                    icon={ExclamationTriangleIcon}
                     autoFocus
                   />
                   <FormError id={organizationSlug.errorId}>{organizationSlug.error}</FormError>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug_.projects.new/route.tsx
@@ -160,7 +160,7 @@ export default function Page() {
               <Input
                 {...conform.input(projectName, { type: "text" })}
                 placeholder="Your project name"
-                icon="folder"
+                icon={FolderIcon}
                 autoFocus
               />
               <FormError id={projectName.errorId}>{projectName.error}</FormError>
diff --git a/apps/webapp/app/routes/_app.orgs.new/route.tsx b/apps/webapp/app/routes/_app.orgs.new/route.tsx
@@ -129,7 +129,7 @@ export default function NewOrganizationPage() {
             <Input
               {...conform.input(orgName, { type: "text" })}
               placeholder="Your Organization name"
-              icon="organization"
+              icon={BuildingOffice2Icon}
               autoFocus
             />
             <Hint>E.g. your company name or your workspace name.</Hint>
diff --git a/apps/webapp/app/routes/account._index/route.tsx b/apps/webapp/app/routes/account._index/route.tsx
@@ -1,5 +1,6 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
+import { EnvelopeIcon, UserCircleIcon } from "@heroicons/react/20/solid";
 import { Form, MetaFunction, useActionData } from "@remix-run/react";
 import { ActionFunction, json } from "@remix-run/server-runtime";
 import { z } from "zod";
@@ -149,7 +150,7 @@ export default function Page() {
                 {...conform.input(name, { type: "text" })}
                 placeholder="Your full name"
                 defaultValue={user?.name ?? ""}
-                icon="account"
+                icon={UserCircleIcon}
               />
               <Hint>Your teammates will see this</Hint>
               <FormError id={name.errorId}>{name.error}</FormError>
@@ -160,7 +161,7 @@ export default function Page() {
                 {...conform.input(email, { type: "text" })}
                 placeholder="Your email"
                 defaultValue={user?.email ?? ""}
-                icon="envelope"
+                icon={EnvelopeIcon}
               />
               <FormError id={email.errorId}>{email.error}</FormError>
             </InputGroup>
diff --git a/apps/webapp/app/routes/confirm-basic-details.tsx b/apps/webapp/app/routes/confirm-basic-details.tsx
@@ -1,6 +1,6 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import { ArrowRightIcon } from "@heroicons/react/20/solid";
+import { ArrowRightIcon, EnvelopeIcon, HeartIcon, UserIcon } from "@heroicons/react/20/solid";
 import { HandRaisedIcon } from "@heroicons/react/24/solid";
 import { ActionFunction, json } from "@remix-run/node";
 import { Form, useActionData } from "@remix-run/react";
@@ -172,7 +172,7 @@ export default function Page() {
                 {...conform.input(name, { type: "text" })}
                 defaultValue={user.name ?? ""}
                 placeholder="Your full name"
-                icon="user"
+                icon={UserIcon}
                 autoFocus
               />
               <Hint>Your team will see this name and we'll use it if we need to contact you.</Hint>
@@ -187,7 +187,7 @@ export default function Page() {
                   setEnteredEmail(e.target.value);
                 }}
                 placeholder="Your email address"
-                icon="envelope"
+                icon={EnvelopeIcon}
                 spellCheck={false}
               />
               {!shouldShowConfirm && (
@@ -204,7 +204,7 @@ export default function Page() {
                 <Input
                   {...conform.input(confirmEmail, { type: "email" })}
                   placeholder="Your email, again"
-                  icon="envelope"
+                  icon={EnvelopeIcon}
                   spellCheck={false}
                 />
                 <Hint>
@@ -223,7 +223,7 @@ export default function Page() {
                 <Input
                   {...conform.input(referralSource, { type: "text" })}
                   placeholder="Google, X (Twitter)…?"
-                  icon="heart"
+                  icon={HeartIcon}
                   spellCheck={false}
                 />
               </InputGroup>
diff --git a/apps/webapp/app/routes/storybook.clipboard-field/route.tsx b/apps/webapp/app/routes/storybook.clipboard-field/route.tsx
@@ -39,7 +39,11 @@ export default function Story() {
           variant="tertiary/small"
           icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
         />
-        <ClipboardField value="with leadingIcon" variant="tertiary/small" icon="search" />
+        <ClipboardField
+          value="with leadingIcon"
+          variant="tertiary/small"
+          icon={MagnifyingGlassIcon}
+        />
         <ClipboardField value="with iconButton" variant="primary/small" iconButton />
         <ClipboardField value="with iconButton" variant="secondary/small" iconButton />
         <ClipboardField value="with iconButton" variant="tertiary/small" iconButton />
@@ -51,7 +55,11 @@ export default function Story() {
           variant="tertiary/medium"
           icon={<EnvironmentLabel environment={{ type: "DEVELOPMENT" }} />}
         />
-        <ClipboardField value="with leadingIcon" variant="tertiary/medium" icon="search" />
+        <ClipboardField
+          value="with leadingIcon"
+          variant="tertiary/medium"
+          icon={MagnifyingGlassIcon}
+        />
         <ClipboardField value="with iconButton" variant="primary/medium" iconButton />
         <ClipboardField value="with iconButton" variant="secondary/medium" iconButton />
         <ClipboardField value="with iconButton" variant="tertiary/medium" iconButton />
@@ -70,7 +78,7 @@ export default function Story() {
         <ClipboardField
           value="with leadingIcon"
           variant="tertiary/small"
-          icon="search"
+          icon={MagnifyingGlassIcon}
           secure={true}
         />
         <ClipboardField value="with iconButton" variant="primary/small" iconButton secure={true} />
@@ -94,7 +102,7 @@ export default function Story() {
         <ClipboardField
           value="with leadingIcon"
           variant="tertiary/medium"
-          icon="search"
+          icon={MagnifyingGlassIcon}
           secure={true}
         />
         <ClipboardField value="with iconButton" variant="primary/medium" iconButton secure={true} />
@@ -125,7 +133,7 @@ export default function Story() {
         <ClipboardField
           value="npx abcdefghi"
           variant="tertiary/small"
-          icon="search"
+          icon={MagnifyingGlassIcon}
           secure="npx ••••••••"
         />
         <ClipboardField
@@ -159,7 +167,7 @@ export default function Story() {
         <ClipboardField
           value="npx abcdefghi"
           variant="tertiary/medium"
-          icon="search"
+          icon={MagnifyingGlassIcon}
           secure="npx ••••••••"
         />
         <ClipboardField
diff --git a/apps/webapp/app/routes/storybook.detail-cell/route.tsx b/apps/webapp/app/routes/storybook.detail-cell/route.tsx
@@ -1,4 +1,10 @@
-import { ClockIcon, CodeBracketIcon } from "@heroicons/react/20/solid";
+import {
+  ArrowTopRightOnSquareIcon,
+  CheckIcon,
+  ClockIcon,
+  CodeBracketIcon,
+  PlusIcon,
+} from "@heroicons/react/20/solid";
 import { DateTime } from "~/components/primitives/DateTime";
 import { DetailCell } from "~/components/primitives/DetailCell";
 
@@ -10,22 +16,22 @@ export default function Story() {
         leadingIconClassName="text-text-dimmed"
         label="Learn how to create your own API Integrations"
         variant="base"
-        trailingIcon="external-link"
+        trailingIcon={ArrowTopRightOnSquareIcon}
         trailingIconClassName="text-charcoal-700 group-hover:text-text-bright"
       />
       <DetailCell
         leadingIcon={CodeBracketIcon}
         leadingIconClassName="text-blue-500"
         label="Issue comment created"
-        trailingIcon="check"
+        trailingIcon={CheckIcon}
         trailingIconClassName="text-green-500 group-hover:text-green-400"
       />
       <DetailCell
         leadingIcon={ClockIcon}
         leadingIconClassName="text-charcoal-400"
         label={<DateTime date={new Date()} />}
         description="Run #42 complete"
-        trailingIcon="plus"
+        trailingIcon={PlusIcon}
         trailingIconClassName="text-charcoal-500 group-hover:text-text-bright"
       />
     </div>
diff --git a/apps/webapp/app/routes/storybook.input-fields/route.tsx b/apps/webapp/app/routes/storybook.input-fields/route.tsx
@@ -24,28 +24,28 @@ function InputFieldSet({ disabled }: { disabled?: boolean }) {
           disabled={disabled}
           variant="large"
           placeholder="Search"
-          icon="search"
+          icon={MagnifyingGlassIcon}
           shortcut="⌘K"
         />
         <Input
           disabled={disabled}
           variant="medium"
           placeholder="Search"
-          icon="search"
+          icon={MagnifyingGlassIcon}
           shortcut="⌘K"
         />
         <Input
           disabled={disabled}
           variant="small"
           placeholder="Search"
-          icon="search"
+          icon={MagnifyingGlassIcon}
           shortcut="⌘K"
         />
         <Input
           disabled={disabled}
           variant="tertiary"
           placeholder="Search"
-          icon="search"
+          icon={MagnifyingGlassIcon}
           shortcut="⌘K"
         />
       </div>
diff --git a/apps/webapp/app/routes/storybook.search-fields/route.tsx b/apps/webapp/app/routes/storybook.search-fields/route.tsx
diff --git a/apps/webapp/app/routes/storybook.simple-form/route.tsx b/apps/webapp/app/routes/storybook.simple-form/route.tsx
diff --git a/apps/webapp/app/routes/storybook.tree-view/route.tsx b/apps/webapp/app/routes/storybook.tree-view/route.tsx
diff --git a/apps/webapp/app/routes/storybook.typography/route.tsx b/apps/webapp/app/routes/storybook.typography/route.tsx
