@tabler/icons-preact error on islands component and dev mode

[wangbinyq]

The following island component that use @tabler/icons-preact report errors during development. However, if I build the project and run it, it works correctly. Additionally, if I use @tabler/icons-react with compat enabled, it also works without issues. My expectation is that @tabler/icons-preact should work seamlessly without any additional configuration. You can reproduce this issue with the repository: : https://github.com/wangbinyq/tabler-icons-preact-error.

import type { Signal } from "@preact/signals";
import { Button } from "../components/Button.tsx";
import { IconArrowDown, IconArrowUp } from "@tabler/icons-preact";

interface CounterProps {
  count: Signal<number>;
}

export default function CounterPreact(props: CounterProps) {
  return (
    <div class="flex gap-8 py-6">
      <Button onClick={() => props.count.value -= 1}>
        <IconArrowDown />
        -1
      </Button>
      <p class="text-3xl tabular-nums">{props.count}</p>
      <Button onClick={() => props.count.value += 1}>
        <IconArrowUp />
        +1
      </Button>
    </div>
  );
}

[marvinhagemeister]

@wangbinyq Just checked and this is a bug in the Preact adapter of tabler-icons. For some reason they are spreading the remaining props and trying to render that as a JSX child which causes the error. Preact throws this error because rendering random untrusted objects could easily lead to security vulnerabilities. The fix in table icon is to spread the remaining props into the props object where it belongs. Basically, the same way they already do it in their react adapter.

Opened a PR that fixes the issue in tabler-icon, see: https://github.com/tabler/tabler-icons/pull/1084

Closing as it's not an issue in Fresh, but in tabler-icons. Once they release a new version with the fix you'll be able to use tabler-icons with Preact.