Keep Pure Icon Components Out of "use client" Bundles

A stateless SVG icon component does not use useState or browser APIs—it simply returns JSX elements. When you export icons from the SVG Nexus React TSX exporter without adding "use client", Next.js renders the SVG to static HTML on the server and ships 0 bytes of icon JavaScript for server-rendered pages, while still letting client components import the exact same file when needed.

Typing Accessible vs Decorative Props Cleanly

Self-documenting React TSX icon signature handling both decorative and labeled modes
import * as React from "react";

export interface IconProps extends React.SVGProps<SVGSVGElement> {
  /** Provide label only when the icon conveys standalone meaning without adjacent text */
  label?: string;
}

export function BellAlertIcon({ label, className = "size-5", ...props }: IconProps) {
  const titleId = React.useId();
  const isDecorative = !label;

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      role={isDecorative ? undefined : "img"}
      aria-hidden={isDecorative ? true : undefined}
      aria-labelledby={isDecorative ? undefined : titleId}
      focusable="false"
      {...props}
    >
      {label ? <title id={titleId}>{label}</title> : null}
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
    </svg>
  );
}

Preventing Gradient ID Collisions Without Breaking Hydration

Never call Math.random() inside an SVG component to scope <linearGradient> or <clipPath> IDs—server HTML and client hydration will generate different IDs and throw a React mismatch warning! Either rely on deterministic per-icon IDs (which SVG Nexus developer exports scope per icon slug) or bind const gradId = React.useId() when the same gradient component renders multiple times with dynamic stop colors.