[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:
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:
- Destructure the
classNameprop from$props():
<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}
/>
<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
- initialize shadcn-svelte with Hugeicons icons library
- add Spinner component
Logs
error
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
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
Source: huntabyte/shadcn-svelte