Skip to main content

Icon

Renders an SVG icon from the @kittl/ui-icons library.

Import​

import '@kittl/ui';
import { search } from '@kittl/ui-icons';
import { Icon } from '@kittl/ui-react';
import { search } from '@kittl/ui-icons';

Usage​

<kittl-icon></kittl-icon>
import type { Icon } from '@kittl/ui/Icon';
import { search } from '@kittl/ui-icons';

/** Icons are data, not markup, so the element's `icon` property is set here. */
export const setupIconUsage = (root: HTMLElement) => {
  const icon = root.querySelector<Icon>('kittl-icon');
  if (icon) {
    icon.icon = search;
  }
};
import { search } from '@kittl/ui-icons';
import { Icon } from '@kittl/ui-react';

/** Basic Icon usage, rendered live on the docs site. */
export const IconUsage = () => <Icon icon={search} />;

Props​

This element takes no properties.

IconData Type​

type IconData = {
  viewBox: string;
  fill?: string;
  stroke?: string;
  path: string;
};

Accessibility​

  • aria-hidden="true" — icons are decorative by default
  • focusable="false" — not reachable via keyboard

Notes​

  • The icon property must be set via JavaScript (.icon = ...), not as an HTML attribute.
  • See the Icons section for the full list of available icons.