@featherk/icons

Small package providing a set of SVG icons consumable by Kendo UI's SvgIcon component.

Built and tested against Kendo UI for Vue 6.4.1 (@progress/kendo-vue-common is an optional peer dependency).

Usage

There are two ways to get an icon. Both return the same icon object for Kendo's SvgIcon; they differ in how much of the icon set your app bundles.

getCustomIcon is unchanged and fully backward compatible, so existing code keeps working without changes. Because it looks icons up by name, a bundler can't tell which ones you use, so it loads all of them. Switch to named imports to load only the icons you specify.

Named imports (recommended)

Every icon has a named export: the icon name in camelCase plus Icon, so date_range is dateRangeIcon. The icon gallery lists each export name.

<template>
  <SvgIcon :icon="searchIcon" />
</template>
<script setup lang="ts">
  import { SvgIcon } from "@progress/kendo-vue-common";
  import { searchIcon } from "@featherk/icons";
</script>

getCustomIcon (loads every icon)

Use getCustomIcon when the icon name is only known at runtime, or to change the color or viewBox. It takes a CustomIcon name and returns a new icon object on each call:

import { getCustomIcon } from "@featherk/icons";

const icon = getCustomIcon("search");

Calling getCustomIcon anywhere in your app bundles the full icon set, even if named imports are used elsewhere. The same applies to importing the icons registry.

Types

• CustomIcon: union of supported icon identifier strings (see packages/icons/src/custom-icon.ts).
• GetCustomIconOptions: { viewBox?: string; color?: string } — viewBox overrides the SVG viewBox; color replaces currentColor fills/strokes.

Example — type an icon name:

import type { CustomIcon } from "@featherk/icons";

const iconName: CustomIcon = "search";
// const badIcon: CustomIcon = "not-a-real-icon"; // Type error

Example — use the typed name with the helper:

import { getCustomIcon, type CustomIcon } from "@featherk/icons";

const iconName: CustomIcon = "help";
const icon = getCustomIcon(iconName);

Example — change viewBox and color:

<template>
  <SvgIcon :icon="helpIcon" />
  <SvgIcon :icon="successIcon" />
</template>
<script setup lang="ts">
  import { SvgIcon } from "@progress/kendo-vue-common";
  import { getCustomIcon } from "@featherk/icons";

  const helpIcon = getCustomIcon("help", {
    viewBox: "0 0 28 28",
    color: "var(--kendo-color-primary)",
  });

  const successIcon = getCustomIcon("check", {
    color: "var(--kendo-color-success)",
  });
</script>

For experimental and in-development helper functions (CSS helpers, base64 variants, data URL usage, and related utilities) see COMING-SOON.md.

Icon gallery

View the icon gallery

Font Awesome Build Integration

Font Awesome services are separate from getCustomIcon() and the owned icon registry. They generate selected icons from the consumer's installed Font Awesome packages; the package includes no Free or paid Font Awesome artwork and grants no license rights.

One keys-only manifest drives the whole setup:

# 1. List UX-provided catalog keys in fontawesome.keys.json: { "free": [...], "pro": [...] }
# 2. Install exactly those source packages: Free into the app, Pro into fontawesome-pro-sources/.
#    (Add --free-only when there are no Pro keys.)
npx featherk-fontawesome-setup --manifest fontawesome.keys.json

// 3. Generate them in vite.config.ts; builds include Pro icons wherever fontawesome-pro-sources/ is installed.
featherkFontAwesome({ manifest: "fontawesome.keys.json" });

Follow FeatherK FontAwesome Developer Setup for the step-by-step local and CI setup. See Choose Font Awesome Icons and Create a Manifest for keys, and Font Awesome setup for the Quick Start and advanced setups. The metadata-only Free/Pro catalog is published at @featherk/icons/fontawesome/catalog.

For paid source packages, see Pro licensing and setup. Pro access is consumer-owned and optional; no paid artwork is distributed by this package.

Adding icons

Icons in this package are curated from the validated source assets in NantHealth/iconography. See the icon contribution guide for the source-to-package copy and generation workflow.

Changelog

Release history for all @featherk/* packages is maintained in a single CHANGELOG.md.