add IconComponent

components/IconComponent.tsx

@@ -0,0 +1,18 @@
+import { Icons, IconName as RaycastIconName, StarsIcon } from "@raycast/icons";
+import { SVGProps } from "react";
+import { GitHubIcon } from "./Icons";
+
+export type IconName = RaycastIconName | "github";
+
+export function IconComponent(
+  props: { icon: IconName } & SVGProps<SVGSVGElement>
+) {
+  if (props.icon === "github") {
+    return <GitHubIcon {...props} />;
+  }
+  if (Icons[props.icon]) {
+    const Icon = Icons[props.icon];
+    return <Icon {...props} />;
+  }
+  return null;
+}

data/snippets.ts

@@ -1,15 +1,7 @@
+import { Icons, IconName as RaycastIconName } from "@raycast/icons";
 import { nanoid } from "nanoid";
-import { GitHubIcon, SnippetsIcon } from "../components/Icons";
-import {
-  CalendarIcon,
-  CodeBlockIcon,
-  CoinsIcon,
-  CommandSymbolIcon,
-  KeyboardIcon,
-  LowercaseIcon,
-  ShuffleIcon,
-  SpeechBubbleIcon,
-} from "@raycast/icons";
+
+export type IconName = RaycastIconName | "github";
 
 export type Snippet = {
   id: string;
@@ -23,7 +15,7 @@ export type Category = {
   name: string;
   slug: string;
   snippets: Snippet[];
-  icon: (props: any) => JSX.Element;
+  icon: IconName;
   gridCols: number;
 };
 
@@ -1107,69 +1099,69 @@ export const snippetGroups: Category[] = [
     slug: "/symbols",
     gridCols: 4,
     snippets: [...technical, ...bulletsAndStars, ...maths, ...symbols],
-    icon: CommandSymbolIcon,
+    icon: "command-symbol",
   },
   {
     name: "Arrows",
     slug: "/arrows",
     gridCols: 6,
     snippets: arrows,
-    icon: ShuffleIcon,
+    icon: "shuffle",
   },
   {
     name: "Unicode",
     slug: "/unicode",
     gridCols: 4,
     snippets: unicodes,
-    icon: KeyboardIcon,
+    icon: "keyboard",
   },
   {
     name: "Date & Time",
     slug: "/dates",
     gridCols: 3,
     snippets: date,
-    icon: CalendarIcon,
+    icon: "calendar",
   },
   {
     name: "Miscellaneous",
     slug: "/misc",
     gridCols: 2,
     snippets: misc,
-    icon: SnippetsIcon,
+    icon: "snippets",
   },
   {
     name: "Spelling",
     slug: "/spelling",
     gridCols: 4,
     snippets: spelling,
-    icon: LowercaseIcon,
+    icon: "lowercase",
   },
   {
     name: "Currency",
     slug: "/currency",
     gridCols: 4,
     snippets: currency,
-    icon: CoinsIcon,
+    icon: "coins",
   },
   {
     name: "Coding",
     slug: "/coding",
     gridCols: 3,
     snippets: coding,
-    icon: CodeBlockIcon,
+    icon: "code-block",
   },
   {
     name: "Feedback",
     slug: "/feedback",
     gridCols: 3,
     snippets: feedback,
-    icon: SpeechBubbleIcon,
+    icon: "speech-bubble",
   },
   {
     name: "GitHub",
     slug: "/github",
     gridCols: 2,
     snippets: github,
-    icon: GitHubIcon,
+    icon: "github",
   },
 ];

package.json

@@ -16,7 +16,7 @@
     "@radix-ui/react-scroll-area": "^1.0.2",
     "@radix-ui/react-select": "^1.1.1",
     "@radix-ui/react-toast": "^1.1.1",
-    "@raycast/icons": "^0.1.1",
+    "@raycast/icons": "^0.4.1",
     "@vercel/analytics": "^0.1.8",
     "@viselect/react": "^3.2.4",
     "autoprefixer": "^10.4.11",

pages/[[...slug]].tsx

@@ -45,6 +45,7 @@ import {
 } from "@raycast/icons";
 import type { Category, Snippet } from "../data/snippets";
 import { extractSnippets } from "../utils/extractSnippets";
+import { IconComponent } from "../components/IconComponent";
 
 const raycastProtocolForEnvironments = {
   development: "raycastinternal",
@@ -661,7 +662,8 @@ export default function Home({ onTouchReady }: { onTouchReady: () => void }) {
                     tabIndex={-1}
                   >
                     <h2 className={styles.subtitle}>
-                      <snippetGroup.icon /> {snippetGroup.name}
+                      <IconComponent icon={snippetGroup.icon} />{" "}
+                      {snippetGroup.name}
                     </h2>
                     <div
                       className={styles.snippets}
@@ -736,7 +738,11 @@ function NavItem({ snippetGroup }: { snippetGroup: Category }) {
       className={styles.sidebarNavItem}
       data-active={activeSection === snippetGroup.slug}
     >
-      {snippetGroup.icon ? <snippetGroup.icon /> : <SnippetsIcon />}
+      {snippetGroup.icon ? (
+        <IconComponent icon={snippetGroup.icon} />
+      ) : (
+        <SnippetsIcon />
+      )}
 
       {snippetGroup.name}
       <span className={styles.badge}>{snippetGroup.snippets.length}</span>

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -13,8 +17,20 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }