Setup icon spritesheet

app/components/icon.tsx

@@ -0,0 +1,17 @@
+import { type SVGProps } from "react";
+import href from "./icon.svg";
+export { href };
+
+export default function Icon({
+	icon,
+	...props
+}: SVGProps<SVGSVGElement> & { icon: IconName }) {
+	return (
+		<svg {...props}>
+			<use href={`${href}#${icon}`} />
+		</svg>
+	);
+}
+
+export const iconNames = ["bookmark", "pencil"] as const;
+export type IconName = (typeof iconNames)[number];

app/routes/_index/feed.tsx

@@ -4,10 +4,10 @@ import type { sort } from "./queries";
 import type { TFunction } from "i18next";
 import type { ReactNode } from "react";
 
-import { BookmarkIcon, PencilIcon } from "@heroicons/react/20/solid";
 import { Link } from "@remix-run/react";
 import { Trans } from "react-i18next";
 
+import Icon from "~/components/icon";
 import { useLocale } from "~/helpers/use-i18n.hook";
 import { cn } from "~/utils/cn";
 
@@ -44,7 +44,11 @@ export function FeedList({ t, items }: Props) {
 								/>
 							}
 							icon={
-								<PencilIcon className="h-5 w-5 text-white" aria-hidden="true" />
+								<Icon
+									icon="pencil"
+									className="h-5 w-5 text-white"
+									aria-hidden="true"
+								/>
 							}
 							iconColor="bg-amber-500"
 							createdAt={new Date(item.payload.createdAt)}
@@ -76,7 +80,11 @@ export function FeedList({ t, items }: Props) {
 								/>
 							}
 							icon={
-								<PencilIcon className="h-5 w-5 text-white" aria-hidden="true" />
+								<Icon
+									icon="pencil"
+									className="h-5 w-5 text-white"
+									aria-hidden="true"
+								/>
 							}
 							iconColor="bg-amber-500"
 							createdAt={new Date(item.payload.createdAt)}
@@ -109,7 +117,8 @@ export function FeedList({ t, items }: Props) {
 								/>
 							}
 							icon={
-								<BookmarkIcon
+								<Icon
+									icon="bookmark"
 									className="h-5 w-5 text-white"
 									aria-hidden="true"
 								/>

package.json

@@ -28,7 +28,8 @@
     "db:run": "wrangler d1 execute",
     "db:migration:create": "wrangler d1 migrations create",
     "db:migration:list": "wrangler d1 migrations list",
-    "db:migration:run": "wrangler d1 migrations apply"
+    "db:migration:run": "wrangler d1 migrations apply",
+    "g:icons": "bunx rmx-cli svg-sprite icons app/components"
   },
   "lint-stage": {
     "*.{ts,tsx}": [
@@ -116,6 +117,7 @@
     "pptr-testing-library": "^0.7.0",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.4.0",
+    "rmx-cli": "^0.4.15",
     "tailwindcss": "^3.3.2",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.2.2",