[Spinner] TS error when using Hugeicons: "Types of property 'className' are incompatible. Type 'null' is not assignable to type 'string | undefined'"

Author: bnn1Created Aug 3, 2026Updated Aug 3, 2026
Labelstriage

Describe the bug

shadcn-svelte spinner component file, spinner.svelte, contains TS error:

error
bash
Type '{ className?: string | undefined | null; height?: number | string | undefined | null; id?: string | undefined | null; lang?: string | undefined | null; part?: string | undefined | null; ... 636 more ...; class: string; }' is not assignable to type 'Props'.
  Types of property 'className' are incompatible.
    Type 'string | null | undefined' is not assignable to type 'string | undefined'.
      Type 'null' is not assignable to type 'string | undefined'.ts(2322)

Two fixes are available:

  1. Destructure the className prop from $props():
destructuring example
svelte
<script lang="ts">
	import { Loading03Icon } from '@hugeicons/core-free-icons';
	import { HugeiconsIcon } from '@hugeicons/svelte';
	import type { SVGAttributes } from 'svelte/elements';
	import { cn } from '#lib/utils.js';

	let {
		className: _className, // <-- pull `className` out of `restProps`.
		class: className,
		role = 'status',
		// we add name, color, and stroke for compatibility with different icon libraries props
		name,
		color,
		stroke,
		'aria-label': ariaLabel = 'Loading',
		...restProps
	}: SVGAttributes<SVGSVGElement> = $props();
</script>

<HugeiconsIcon
	icon={Loading03Icon}
	strokeWidth={2}
	{role}
	name={name === null ? undefined : name}
	color={color === null ? undefined : color}
	stroke={stroke === null ? undefined : stroke}
	aria-label={ariaLabel}
	class={cn('size-4 animate-spin', className)}
	{...restProps}
/>
2. Derive type from `HugeiconsIcon` component using `ComponentProps`:from component example
svelte
<script lang="ts">
	import { Loading03Icon } from '@hugeicons/core-free-icons';
	import { HugeiconsIcon } from '@hugeicons/svelte';
	import { cn } from '#lib/utils.js';
	import type { ComponentProps } from 'svelte';

	type HugeiconsProps = ComponentProps<typeof HugeiconsIcon>;
	type Props = Omit<HugeiconsProps, 'icon'>;

	let {
		class: className,
		role = 'status',
		// we add name, color, and stroke for compatibility with different icon libraries props
		name,
		color,
		stroke,
		'aria-label': ariaLabel = 'Loading',
		...restProps
	}: Props = $props();
</script>

<HugeiconsIcon
	icon={Loading03Icon}
	strokeWidth={2}
	{role}
	name={name === null ? undefined : name}
	color={color === null ? undefined : color}
	stroke={stroke === null ? undefined : stroke}
	aria-label={ariaLabel}
	class={cn('size-4 animate-spin', className)}
	{...restProps}
/>

Reproduction

  1. initialize shadcn-svelte with Hugeicons icons library
  2. add Spinner component

Logs

error
bash

Type '{ className?: string | undefined | null; height?: number | string | undefined | null; id?: string | undefined | null; lang?: string | undefined | null; part?: string | undefined | null; ... 636 more ...; class: string; }' is not assignable to type 'Props'.
  Types of property 'className' are incompatible.
    Type 'string | null | undefined' is not assignable to type 'string | undefined'.
      Type 'null' is not assignable to type 'string | undefined'.ts(2322)

System Info

system info
bash

  System:
    OS: Linux 7.1 CachyOS Linux
    CPU: (12) x64 AMD Ryzen 5 4600H with Radeon Graphics
    Memory: 15.20 GB / 30.71 GB
    Container: Yes
    Shell: 4.8.1 - /bin/fish
  Binaries:
    Node: 26.4.0 - /usr/bin/node
    Yarn: 1.22.22 - /home/bnn1/.npm-global/bin/yarn
    npm: 12.0.2 - /usr/bin/npm
    pnpm: 11.17.0 - /home/bnn1/.npm-global/bin/pnpm
    bun: 1.3.14 - /usr/bin/bun
    Deno: 2.9.4 - /usr/bin/deno
  Browsers:
    Brave Browser: 151.1.93.129
    Firefox: 153.0.1
    Firefox Developer Edition: 153.0.1
  npmPackages:
    @hugeicons/core-free-icons: ^4.2.3 => 4.2.3 
    @hugeicons/svelte: ^1.1.4 => 1.1.4 
    @sveltejs/kit: next => 3.0.0-next.13 
    bits-ui: ^2.18.1 => 2.18.1 
    formsnap: ^2.0.1 => 2.0.1 
    mode-watcher: ^1.1.0 => 1.1.0 
    shadcn-svelte: ^1.4.2 => 1.4.2 
    svelte: ^5.56.1 => 5.56.8 
    svelte-sonner: ^1.1.1 => 1.1.1 
    sveltekit-superforms: ^2.30.2 => 2.30.2 
    tailwindcss: ^4.3.0 => 4.3.3 
    vaul-svelte: 1.0.0-next.7 => 1.0.0-next.7 

Severity

annoyance