Tabler icons added to NamedIcon

commit 13ed268f1d6732ef28c6e4a9eeb927c1af822032
Author: Matt Aitken <matt@mattaitken.com>
Date:   Fri Oct 20 11:38:22 2023 +0100

    Added all the tabler-icons to Storybook

commit 62738d71a40f17c45c0b29332359b2b670233a97
Author: Matt Aitken <matt@mattaitken.com>
Date:   Fri Oct 20 11:38:09 2023 +0100

    Use the no-stroke version of the tabler-sprite so we can control the stroke width

commit a1b7edd57f8b2d3f2a5f4d96cbc9eb0a887f3442
Author: Matt Aitken <matt@mattaitken.com>
Date:   Fri Oct 20 11:37:54 2023 +0100

    Set the default width to 1.5, so they’re a bit thinner

commit 69ba38802b849376611678537f7d8e248b60086b
Author: Matt Aitken <matt@mattaitken.com>
Date:   Fri Oct 20 10:55:34 2023 +0100

    Added a tabler icon to an events job catalog job

commit eb3c5f649d06adcc9ce0641f50e082ecdeead7a2
Author: Matt Aitken <matt@mattaitken.com>
Date:   Fri Oct 20 10:53:40 2023 +0100

    Moved the tabler sprite to the app and use an import. This means it’ll be cached and we can move it

commit c24d76e6df9233b001a0242f8806076562ca2e90
Author: Chaturved Degloorkar <48447253+chaturrved@users.noreply.github.com>
Date:   Fri Oct 20 15:22:59 2023 +0530

    feat: Add support for tabler-icons when using the icon for Tasks  (#629)

    * Add support for tabler-icons

    * Changed the core update type from minor to a patch

    ---------

    Co-authored-by: Matt Aitken <matt@mattaitken.com>

.changeset/slimy-moles-smash.md

@@ -0,0 +1,5 @@
+---
+"@trigger.dev/core": patch
+---
+
+Updated icon documentation in runTasks

apps/webapp/app/components/primitives/NamedIcon.tsx

@@ -68,6 +68,8 @@ import { Spinner } from "./Spinner";
 import { SaplingIcon } from "~/assets/icons/SaplingIcon";
 import { TwoTreesIcon } from "~/assets/icons/TwoTreesIcon";
 import { OneTreeIcon } from "~/assets/icons/OneTreeIcon";
+import { tablerIcons } from "~/utils/tablerIcons";
+import tablerSpritePath from "./tabler-sprite.svg";
 
 const icons = {
   account: (className: string) => <UserCircleIcon className={cn("text-slate-400", className)} />,
@@ -215,6 +217,12 @@ export function NamedIcon({
     );
   }
 
+  if (tablerIcons.has("tabler-" + name)) {
+    return <TablerIcon name={"tabler-" + name} className={className} />;
+  } else if (name.startsWith("tabler-") && tablerIcons.has(name)) {
+    return <TablerIcon name={name} className={className} />;
+  }
+
   console.log(`Icon ${name} not found`);
 
   if (fallback) {
@@ -247,3 +255,11 @@ export function NamedIconInBox({
     </div>
   );
 }
+
+export function TablerIcon({ name, className }: { name: string; className?: string }) {
+  return (
+    <svg className={cn("stroke-[1.5]", className)}>
+      <use xlinkHref={`${tablerSpritePath}#${name}`} />
+    </svg>
+  );
+}

apps/webapp/app/components/stories/NamedIcon.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import { NamedIcon, iconNames } from "../primitives/NamedIcon";
+import { tablerIcons } from "~/utils/tablerIcons";
+import { Header1 } from "../primitives/Headers";
 
 const meta: Meta<typeof NamedIcons> = {
   title: "Icons",
@@ -25,17 +27,35 @@ export const Basic: Story = {
 
 function NamedIcons() {
   return (
-    <div className="grid grid-cols-8 gap-4">
-      {iconNames
-        .sort((a, b) => a.localeCompare(b))
-        .map((iconName) => (
-          <div key={iconName} className="flex items-center gap-2">
-            <div>
-              <NamedIcon name={iconName} className={"h-6 w-6"} />
+    <div className="flex flex-col gap-4">
+      <div>
+        <Header1 spacing>Internal</Header1>
+        <div className="grid grid-cols-8 gap-4">
+          {iconNames
+            .sort((a, b) => a.localeCompare(b))
+            .map((iconName) => (
+              <div key={iconName} className="flex items-center gap-2">
+                <div>
+                  <NamedIcon name={iconName} className={"h-6 w-6"} />
+                </div>
+                <span className="text-xs text-dimmed">{iconName}</span>
+              </div>
+            ))}
+        </div>
+      </div>
+      <div>
+        <Header1 spacing>Tabler</Header1>
+        <div className="grid grid-cols-8 gap-4">
+          {Array.from(tablerIcons).map((iconName) => (
+            <div key={iconName} className="flex items-center gap-2">
+              <div>
+                <NamedIcon name={iconName} className={"h-6 w-6 text-indigo-500"} />
+              </div>
+              <span className="text-xs text-dimmed">{iconName}</span>
             </div>
-            <span className="text-xs text-dimmed">{iconName}</span>
-          </div>
-        ))}
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

apps/webapp/app/utils/icon.ts

@@ -1,9 +1,10 @@
 import { hasIcon } from "@trigger.dev/companyicons";
 import { iconNames as namedIcons } from "~/components/primitives/NamedIcon";
+import { tablerIcons } from "~/utils/tablerIcons";
 
 export const isValidIcon = (icon?: string): boolean => {
   if (!icon) {
     return false;
   }
-  return namedIcons.includes(icon) || hasIcon(icon);
+  return namedIcons.includes(icon) || hasIcon(icon) || tablerIcons.has(icon);
 };

docs/sdk/io/runtask.mdx

@@ -60,8 +60,7 @@ The wrappers at `io.integration.runTask()` expose the underlying Integration cli
   </ResponseField>
   <ResponseField name="icon" type="string">
     The icon for the Task, it will appear in the logs. You can use the name of a
-    company in lowercase, e.g. "github". Or any icon name that [Font
-    Awesome](https://fontawesome.com/icons) supports.
+    company in lowercase, e.g. "github". Or any icon name that [Tabler Icons](https://tabler-icons.io/) supports.
   </ResponseField>
   <ResponseField name="description" type="string">
     A description of the Task.

packages/core/src/schemas/api.ts

@@ -664,7 +664,7 @@ export const RunTaskOptionsSchema = z.object({
   retry: RetryOptionsSchema.optional(),
   /** The icon for the Task, it will appear in the logs.
    *  You can use the name of a company in lowercase, e.g. "github".
-   *  Or any icon name that [Font Awesome](https://fontawesome.com/icons) supports. */
+   *  Or any icon name that [Tabler Icons](https://tabler-icons.io/) supports. */
   icon: z.string().optional(),
   /** The key for the Task that you want to appear in the logs */
   displayKey: z.string().optional(),

references/job-catalog/src/events.ts

@@ -19,11 +19,15 @@ client.defineJob({
     name: "event.example",
   }),
   run: async (payload, io, ctx) => {
-    await io.runTask("task-example-1", async () => {
-      return {
-        message: "Hello World",
-      };
-    });
+    await io.runTask(
+      "task-example-1",
+      async () => {
+        return {
+          message: "Hello World",
+        };
+      },
+      { icon: "360" }
+    );
 
     await io.wait("wait-1", 1);