@featherk/icons

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

Usage

Resolve an icon once, then pass the returned object to Kendo's SvgIcon:

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

const icon = getCustomIcon("search");
// pass `icon` to Kendo's `SvgIcon` component

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