@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 symbol sprite.
     *
     * Should be a URL to an `.svg` file from `@stratakit/icons`.
     *
     * 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 affects the icon's physical dimensions, as well as the
     * actual SVG contents (different sizes might have different fidelity).
     *
     * 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`.
 * It renders the correct symbol sprite based on the specified `size`.
 *
 * ```tsx
 * const arrowIcon = new URL("@stratakit/icons/arrow.svg", import.meta.url).href;
 * <Icon href={arrowIcon} />
 * ```
 *
 * 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 {};