@kf/preact-icons

fluentui-system-icons for preact. You can browse all icons at this page: catalog

I export icons like this:

import { createIcon, bundleIcon, type FluentIcon } from "../core.tsx";
export const AccessibilityFilled = ...
export const AccessibilityRegular = ...
export const Accessibility = ...

So your import statements should be in this format:

import { AccessibilityFilled, AccessibilityRegular, Accessibility } from "jsr:@kf/preact-icons/icons/Accessibility.ts";

islands

In order to make bundledIcon work in islands, you need define an 'initial' island like this and insert the component to _app.tsx.

// islands/Initial.tsx
import { initIconConfiguration } from "jsr:@kf/preact-icons";

initIconConfiguration("icon", "filled", "regular")

export default function Initial() {
  return null;
}

// routes/_app.tsx
...
<Initial />
...

Now, icons has correct class name. Then you can style them with css.

.filled {
  display: none;
}

.Container:hover .filled {
  display: unset;
}
.Container:hover .regular {
  display: none;
}