@stratakit/foundations/dist/Icon.d.ts

Foundational pieces of StrataKit

import * as React from "react";
import type { BaseProps } from "./~utils.js";
interface IconProps extends Omit<BaseProps<"svg">, "children"> {
    /**
     * URL of the `.svg` file (e.g. from `@stratakit/icons`).
     *
     * The URL can contain a hash pointing to a specific symbol within the SVG (e.g. `#icon`, `#icon-large`).
     * By default, the `#icon` symbol is used if no hash is provided.
     *
     * Note: The `.svg` must be an external HTTP resource for it to be processed by
     * the `<use>` element. As a fallback, JS will be used to `fetch` the SVG from
     * non-supported URLs; the fetched SVG content will be sanitized using the
     * `unstable_htmlSanitizer` function passed to `<Root>`.
     */
    href?: string;
    /**
     * Size of the icon. This only affects the icon's physical dimensions (not the SVG contents).
     *
     * Defaults to `"regular"` (16px) and can be optionally set to `"large"` (24px).
     */
    size?: "regular" | "large";
    /**
     * Alternative text describing the icon.
     *
     * When this prop is passed, the SVG gets rendered as `role="img"` and labelled
     * using the provided text.
     *
     * This prop is not required if the icon is purely decorative. By default, the icon
     * will be hidden from the accessibility tree.
     */
    alt?: string;
}
/**
 * Icon component that provides fill and sizing to the SVGs from `@stratakit/icons`.
 *
 * ```tsx
 * const arrowIcon = new URL("@stratakit/icons/arrow.svg", import.meta.url).href;
 * <Icon href={arrowIcon} />
 * ```
 *
 * The `href` can point to a specific symbol (e.g. `#icon`, `#icon-large`) within the SVG file:
 *
 * ```tsx
 * <Icon href={`${arrowIcon}#icon-large`} />
 * ```
 *
 * It also accepts a custom SVG, via the `render `prop:
 *
 * ```tsx
 * <Icon render={<svg><path d="…" fill="currentColor" /></svg>} />
 * ```
 *
 * By default, this component assumes that the icon is decorative, so it adds `aria-hidden` by default.
 *
 * If the icon is semantically meaningful, the `alt` prop can be used to provide alternative text.
 *
 * ```tsx
 * <Icon href={…} alt="Help" />
 * ```
 */
export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
export {};