#9163·ui

[bug]: hugeicons generator creates type error in Spinner component (strokeWidth mismatch)

Author: OfiroCreated Dec 20, 2025Updated Sep 17, 2026
Labelsbug

Describe the bug

When using iconLibrary: "hugeicons" in components.json, the CLI generates a Spinner component that fails TypeScript compilation immediately after installation.

The generator types the component props as React.ComponentProps<"svg">, which allows strokeWidth to be a string or number. It then spreads these props into the HugeiconsIcon component, which strictly expects strokeWidth to be a number.

This causes a mismatch because TypeScript correctly flags that we're passing a potentially invalid prop type (string) to the icon component.

Affected component/components

Spinner

How to reproduce

  1. Setup a project with components.json configured for hugeicons
  2. Run npx shadcn@latest add spinner.
  3. Try to build the project (npm run build)

Codesandbox/StackBlitz link

https://codesandbox.io/p/devbox/8lzh5c

Logs

➜  next-app git:(main) ✗ 
➜  next-app git:(main) ✗ npx shadcn@latest add spinner
✔ Checking registry.
✔ Created 1 file:
  - components/ui/spinner.tsx

➜  next-app git:(main) ✗ npm run build

> [email protected] build
> next build

⚠ Warning: Next.js inferred your workspace root, but it may not be correct.
 We detected multiple lockfiles and selected the directory of /project/workspace/yarn.lock as the root directory.
 To silence this warning, set `turbopack.root` in your Next.js config, or consider removing one of the lockfiles if it's not needed.
   See https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopack#root-directory for more information.
 Detected additional lockfiles: 
   * /project/workspace/shadcn/next-app/package-lock.json

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

▲ Next.js 16.1.0 (Turbopack)

  Creating an optimized production build ...
✓ Compiled successfully in 5.7s
  Running TypeScript  .Failed to compile.

./components/ui/spinner.tsx:7:41
Type error: Type 'string | number' is not assignable to type 'number | undefined'.
  Type 'string' is not assignable to type 'number'.

   5 | function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
   6 |   return (
>  7 |     <HugeiconsIcon icon={Loading03Icon} strokeWidth={2} role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props} />
     |                                         ^
   8 |   )
   9 | }
  10 |
Next.js build worker exited with code: 1 and signal: null
➜  next-app git:(main) ✗

System Info

- shadcn CLI: 3.6.2
- @hugeicons/react: 1.1.3
- TypeScript: 5.x
- Style: base-maia

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues