@hypothesis/frontend-shared/lib/components/SvgIcon.d.ts

Shared components, styles and utilities for Hypothesis projects

/**
 * @typedef SvgIconProps
 * @prop {string|symbol} name - The name of the icon to display.
 *   The name must match a name that has already been registered using the
 *   `registerIcon` or `registerIcons` functions.
 * @prop {string} [className] - A CSS class to apply to the `<svg>` element.
 * @prop {boolean} [inline] - Apply a style allowing for inline display of icon wrapper.
 * @prop {string} [title] - Optional title attribute to apply to the SVG's containing `span`.
 */
/**
 * Component that renders icons using inline `<svg>` elements.
 * This enables their appearance to be customized via CSS.
 *
 * This matches the way we do icons on the website, see
 * https://github.com/hypothesis/h/pull/3675
 *
 * @param {SvgIconProps} props
 */
export function SvgIcon({ name, className, inline, title }: SvgIconProps): import("preact").JSX.Element;
/**
 * Register an icon for use with the `SvgIcon` component.
 *
 * Returns a symbol that can be passed as the `name` prop to `SvgIcon` in order
 * to render this icon.
 *
 * @param {string|symbol} name - A name for this icon
 * @param {string} markup - SVG markup for the icon
 * @return {symbol}
 */
export function registerIcon(name: string | symbol, markup: string): symbol;
/**
 * Register icons for use with the `SvgIcon` component.
 *
 * @deprecated Prefer the `registerIcon` function instead which will return a
 * key that does not conflict with existing icons.
 *
 * @param {Record<string, string>} icons
 * @param {Object} options
 *  @param {boolean} [options.reset] - If `true`, remove existing registered icons.
 */
export function registerIcons(icons: Record<string, string>, { reset }?: {
    reset?: boolean | undefined;
}): void;
/**
 * Return the currently available icons.
 *
 * To register icons, don't mutate this directly but call `registerIcons`
 * instead.
 *
 * @return {IconMap}
 */
export function availableIcons(): IconMap;
export type SvgIconProps = {
    /**
     * - The name of the icon to display.
     * The name must match a name that has already been registered using the
     * `registerIcon` or `registerIcons` functions.
     */
    name: string | symbol;
    /**
     * - A CSS class to apply to the `<svg>` element.
     */
    className?: string | undefined;
    /**
     * - Apply a style allowing for inline display of icon wrapper.
     */
    inline?: boolean | undefined;
    /**
     * - Optional title attribute to apply to the SVG's containing `span`.
     */
    title?: string | undefined;
};
/**
 * Object mapping icon names to SVG markup.
 */
export type IconMap = Map<string | symbol, string>;
export type Ref<T> = import("preact/hooks").Ref<T>;