Skip to main content

Icon

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

Preview
Loading preview…

Import​

// Web Component
import '@kittl/ui';
import { search } from '@kittl/ui-icons';

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

Usage​

Web Component​

<script type="module">
  import '@kittl/ui';
  import { search } from '@kittl/ui-icons';

  document.querySelector('kittl-icon').icon = search;
</script>

<kittl-icon></kittl-icon>

React​

<Icon icon={search} />

Props​

PropertyTypeDefaultDescription
iconIconData—Icon data object from @kittl/ui-icons

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.