@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, ReactNode } from 'react';
export declare const iconSizes: readonly ["small", "large", "heading-0", "heading-1", "heading-2", "heading-3", "heading-4", "heading-5", "heading-6"];
type IconSize = (typeof iconSizes)[number];
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.
     * The values ‘heading-0’ and ‘heading-6’ are deprecated.
     */
    size?: IconSize;
    /** Whether the icon container should be made square. */
    square?: boolean;
    /** The component rendering the icon’s markup. */
    svg: Function | ReactNode;
} & 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.
     * The values ‘heading-0’ and ‘heading-6’ are deprecated.
     */
    size?: IconSize;
    /** Whether the icon container should be made square. */
    square?: boolean;
    /** The component rendering the icon’s markup. */
    svg: Function | ReactNode;
} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLElement>>;
export {};