@featherk/icons

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

Usage

Import the helper and pass the returned object to Kendo's SvgIcon:

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

const iconName: CustomIcon = "search"

const icon = getCustomIcon("search");
// render with 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 — change viewBox and color:

<template>
  <SvgIcon :icon="getCustomIcon(helpIcon, options)" />
  <SvgIcon
    :icon="
      getCustomIcon(icon2, { color: 'var(--kendo-color-success)' })
    "
  />
</template>
<script setup lang="ts">
import { SvgIcon } from "@progress/kendo-vue-common";
import {
  getCustomIcon,
  type CustomIcon,
  type GetCustomIconOptions,
} from "@featherk/icons";

const helpIcon = "help" as CustomIcon;
const icon2 = "check" as CustomIcon;

const options: GetCustomIconOptions = {
  viewBox: "0 0 28 28",
  color: "var(--kendo-color-primary)",
};
</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