Pyro

Appearance

Icon ​

RC 0.9Kb
js
import 'pyro/icon'
Preview Code Stackblitz

Usage ​

html
<pyro-icon color="error" src="./assets/chevron-down.svg"></pyro-icon>

Variations ​

Props ​

ts
interface IconProps {
  /** Icon source path */
  src: string;
  /** Icon color */
  color?: Color;
  /** Icon size */
  size?: 's' | 'm' | 'l';
  /** Accessible name. If not provided, icon is ignored by screen readers */
  alt?: string;
  children?: any;
}

Slots ​

No slots.

CSS prop theming ​

The

Full theming sheet ​

js
/**
 * @prop {--pyro-icon-height = --pyro-font-size} - `height`
 * @prop {--pyro-icon-width = --pyro-font-size} - `width`
 * @prop {--pyro-icon-min-width = --pyro-font-size} - `min-width`
 * @prop {--pyro-icon-min-height = --pyro-font-size} - `min-height`
 *
 * @prop {--pyro-icon-height-s = --pyro-font-size-s} - `height` when size="s"
 * @prop {--pyro-icon-width-s = --pyro-font-size-s} - `width` when size="s"
 * @prop {--pyro-icon-min-width-s = --pyro-font-size-s} - `min-width` when size="s"
 * @prop {--pyro-icon-min-height-s = --pyro-font-size-s} - `min-height` when size="s"
 *
 * @prop {--pyro-icon-height-l = --pyro-font-size-l} - `height` when size="l"
 * @prop {--pyro-icon-width-l = --pyro-font-size-l} - `width` when size="l"
 * @prop {--pyro-icon-min-width-l = --pyro-font-size-l} - `min-width` when size="l"
 * @prop {--pyro-icon-min-height-l = --pyro-font-size-l} - `min-height` when size="l"
 */