@amsterdam/design-system-react/dist/Icon/Icon.d.ts

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

/**
 * @license EUPL-1.2+
 * Copyright (c) 2021 Gemeente Utrecht
 * Copyright (c) 2021 Robbert Broersma
 * Copyright Gemeente Amsterdam
 */
import type { HTMLAttributes, ReactElement, SVGProps } from 'react';
export declare const iconSizes: readonly ["small", "large", "heading-1", "heading-2", "heading-3", "heading-4", "heading-5"];
type IconSize = (typeof iconSizes)[number];
/** All valid props for an `<svg>` element in React. */
type SvgProps = SVGProps<SVGSVGElement>;
/** A React element representing an `<svg>` element. */
type SvgElement = ReactElement<SvgProps>;
/**
 * A valid value for the `svg` prop of the `Icon` component. Can be:
 * - A rendered SVG element, e.g. `<WarningIcon />`
 * - An SVG component reference, e.g. `WarningIcon`
 * - A zero-argument function returning an SVG element, e.g. `() => <WarningIcon size="large" />`
 * - A function accepting SVG props and returning an SVG element, e.g. `(props) => <WarningIcon {...props} />`
 */
type IconSvg = SvgElement | ((props: SvgProps) => SvgElement);
export type IconProps = {
    /** Changes the icon colour for readability on a dark background. */
    color?: 'inverse';
    /** The size of the icon. Choose the size of the corresponding body text or heading. */
    size?: IconSize;
    /** Whether the icon container should be made square. */
    square?: boolean;
    /** The component rendering the icon’s markup. */
    svg: IconSvg;
} & HTMLAttributes<HTMLSpanElement>;
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-icon--docs Icon docs at Amsterdam Design System}
 * @see {@link https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs Icons overview at Amsterdam Design System}
 */
export declare const Icon: import("react").ForwardRefExoticComponent<{
    /** Changes the icon colour for readability on a dark background. */
    color?: "inverse";
    /** The size of the icon. Choose the size of the corresponding body text or heading. */
    size?: IconSize;
    /** Whether the icon container should be made square. */
    square?: boolean;
    /** The component rendering the icon’s markup. */
    svg: IconSvg;
} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLElement>>;
export {};