Icon

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download icon -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/icon";

const Component = UI.Icon;

const args = {
  "name": "CircleDashed",
  "size": "4",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    size?: "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
  };
</script>

<template>
  <Icon v-bind="args" />
</template>

Examples

Default

<script setup lang="ts">
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/icon";

const Component = UI.Icon;

const args = {
  "name": "CircleDashed",
  "size": "4",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    size?: "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
  };
</script>

<template>
  <Icon v-bind="args" />
</template>

Custom

<script setup lang="ts">
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/icon";

const Component = UI.Icon;

const args = {
  "name": "IconDay",
  "size": "4",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    size?: "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
  };
</script>

<template>
  <Icon v-bind="args" />
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.