ONEO.FluentUIIconsLike 2.1.0

FluentUI Icons Like

fluentui-icons-like is a small monorepo for shipping Microsoft Fluent UI System Icons in practical app-friendly forms.

Screenshot

Packages

Package	Ecosystem	Status
@oneo/fluentui-icons-like	npm
@oneo/fluentui-icons-like-react	npm
ONEO.FluentUIIconsLike	NuGet
ONEO.FluentUIIconsLike.Generator	NuGet

Features

• Fluent UI System Icons for Svelte, React, and Avalonia
• Tree-shakable Svelte components
• Tree-shakable React SVG components
• Avalonia source generator workflow for referenced symbols
• Shared generator pipeline for icon data
• React + TanStack Router preview app for browsing and exporting icons

Quick Use

Svelte

Install the package:

pnpm add @oneo/fluentui-icons-like

Use icons in a Svelte component:

<script lang="ts">
  import FluentIconAccessTime from '@oneo/fluentui-icons-like/FluentIconAccessTime.svelte';
  import FluentIconAccessibility from '@oneo/fluentui-icons-like/FluentIconAccessibility.svelte';
  import FluentIconAdd from '@oneo/fluentui-icons-like/FluentIconAdd.svelte';
</script>

<div style="display:flex;gap:12px;align-items:center;">
  <FluentIconAccessTime size={24} style="Regular" />
  <FluentIconAccessibility size={24} style="Filled" />
  <FluentIconAdd size={20} style="Regular" />
</div>

React

Install the package:

pnpm add @oneo/fluentui-icons-like-react

Use icons in a React component:

import FluentIconAccessTime from '@oneo/fluentui-icons-like-react/FluentIconAccessTime';
import FluentIconAccessibility from '@oneo/fluentui-icons-like-react/FluentIconAccessibility';
import FluentIconAdd from '@oneo/fluentui-icons-like-react/FluentIconAdd';

export function Example() {
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
      <FluentIconAccessTime size={24} variant="Regular" />
      <FluentIconAccessibility size={24} variant="Filled" />
      <FluentIconAdd size={20} variant="Regular" />
    </div>
  );
}

React icons accept standard SVG attributes plus size, variant, and title. Set title={null} to omit the generated SVG title element.

Avalonia

Install the packages:

dotnet add package ONEO.FluentUIIconsLike
dotnet add package ONEO.FluentUIIconsLike.Generator

Reference the source generator as an analyzer in your project file:

<ItemGroup>
  <PackageReference Include="ONEO.FluentUIIconsLike" Version="2.0.0-preview.0" />
  <PackageReference Include="ONEO.FluentUIIconsLike.Generator" Version="2.0.0-preview.0" PrivateAssets="all" />
</ItemGroup>

Add FluentIconReferences to list the icons your app uses. The source generator builds icon data from these references:

using FluentUIIconsLike;

[assembly: FluentIconReferences(
    FluentIconSymbol.AccessTime,
    FluentIconSymbol.Accessibility,
    FluentIconSymbol.Add)]

Use the icon control in axaml:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:icons="https://github.com/oneo-me/fluentui-icons-like">
  <StackPanel Spacing="12">
    <icons:FluentIcon Symbol="AccessTime" Size="Size24" Style="Regular" Foreground="DodgerBlue" />
    <icons:FluentIcon Symbol="Accessibility" Size="Size24" Style="Filled" Foreground="MediumSeaGreen" />
  </StackPanel>
</Window>

Contributing

Environment

• Node.js 22+
• pnpm 11+
• Wrangler 4
• .NET SDK 10.0.0

Install Node dependencies from the repository root:

pnpm install

The root workspace manages all Node packages. Use the root lockfile and avoid installing dependencies from individual package directories.

Project Structure

.
├── pnpm-workspace.yaml   # pnpm workspace packages and build approvals
├── package.json          # root scripts for preview dev, deployment, checks, sync, generation, and packing
├── wrangler.jsonc        # Cloudflare Workers Assets config for preview deployment
├── biome.jsonc           # shared formatter and linter configuration
├── apps/
│   ├── builder/          # icon build and generation scripts
│   └── preview/          # React + TanStack Router preview app
├── packages/
│   ├── svelte/           # Svelte package
│   ├── react/            # React package
│   └── avalonia/         # Avalonia library, generator, and demo
├── README.md
└── LICENSE

Workspace Scripts

The root scripts expose the main workspace tasks:

pnpm run dev
pnpm run build
pnpm run deploy
pnpm run check
pnpm run sync
pnpm run gen
pnpm run gen -- svelte
pnpm run gen -- react
pnpm run gen -- avalonia
pnpm run pack

pnpm run deploy builds the React preview app and deploys apps/preview/dist with Wrangler. The root wrangler.jsonc uses Workers Assets in static SPA mode, so unmatched navigation requests are served by index.html.

pnpm run gen writes all generated package artifacts, including the preview icon metadata at apps/preview/src/preview/icons.json. Pass a generator name to limit output to one target.

apps/builder uses tsx for local CLI scripts, so generation commands run the TypeScript source directly while build still emits the published dist entry.

The React generator also writes the preview metadata used by apps/preview.

apps/preview uses shadcn/ui with Tailwind CSS 4. The app-local UI primitives live in apps/preview/src/components/ui, are configured by apps/preview/components.json, and are installed with the shadcn CLI, for example pnpm dlx shadcn@latest add button.

apps/preview/src/styles.css is reserved for Tailwind/shadcn imports, design tokens, base rules, and shared keyframes. Component-specific layout, state, and responsive styling belong in the relevant React component as Tailwind classes.

The preview icon catalog uses @tanstack/react-virtual for row virtualization. The catalog owns viewport measurement and derives tile size, columns, and row height from the selected icon size and display scale.

License

MIT