Right rail template

app/components/asset/Icon.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { memo } from "react";
+import ExclamationIcon from "./icon/exclamation.svg";
+
+export type IconName = "exclamation";
+
+/** SVG import may be a React component or a module object { default: Component } (e.g. with Turbopack) */
+const iconMap: Record<
+  IconName,
+  React.ComponentType<React.SVGProps<SVGSVGElement>> | { default: React.ComponentType<React.SVGProps<SVGSVGElement>> }
+> = {
+  exclamation: ExclamationIcon,
+};
+
+export interface IconProps {
+  name: IconName;
+  className?: string;
+  /** Width and height (default 24) */
+  size?: number;
+  "aria-hidden"?: boolean;
+}
+
+function IconComponent({
+  name,
+  className = "",
+  size = 24,
+  "aria-hidden": ariaHidden = true,
+}: IconProps) {
+  const SvgModule = iconMap[name];
+  if (!SvgModule) return null;
+  // Turbopack/bundler may expose SVG as { default: Component } instead of the component directly
+  const Svg =
+    typeof SvgModule === "object" && SvgModule !== null && "default" in SvgModule
+      ? (SvgModule as { default: React.ComponentType<React.SVGProps<SVGSVGElement>> }).default
+      : (SvgModule as React.ComponentType<React.SVGProps<SVGSVGElement>>);
+  if (typeof Svg !== "function") return null;
+  return (
+    <Svg
+      width={size}
+      height={size}
+      className={className}
+      aria-hidden={ariaHidden}
+    />
+  );
+}
+
+export default memo(IconComponent);

app/components/asset/icon/exclamation.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.25 14.0386V5.53857H12.75V14.0386H11.25ZM11.25 18.4616V16.9616H12.75V18.4616H11.25Z" fill="currentColor"/>
+</svg>

app/components/asset/index.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from "./Icon";
+export type { IconName, IconProps } from "./Icon";