Primitives

Icon

104 icons as path data, not components. Presentation attributes (fill, stroke-width, linecap) live in CSS, which is why the markup is byte-identical in all four frameworks.

data-scope="icon"

Usage

import { Icon } from "@crosskit-ui/react";

<Icon name="rocket" size="lg" />
<script setup lang="ts">
import { Icon } from "@crosskit-ui/vue";
</script>

<template>
  <Icon name="rocket" size="lg" />
</template>
<script lang="ts">
  import { Icon } from "@crosskit-ui/svelte";
</script>

<Icon name="rocket" size="lg" />
import { CkIcon } from "@crosskit-ui/angular";

@Component({
  imports: [CkIcon],
  template: `<svg ckIcon name="rocket" size="lg"></svg>`,
})
export class Demo {}

Props

PropTypeDefaultNotes
nameIconName—One of the 104 icon names.
size"sm" | "md" | "lg" | "xl""md"Icon size.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.