
import { IconPropsWithSVGProps } from "../tokens/types.js";
import "../tokens/index.js";
import * as react from "react";

//#region src/components/Icon.d.ts
/**
 * Props for the Icon component.
 * @see IconPropsWithSVGProps
 */
type IconProps = IconPropsWithSVGProps;
/**
 * **🎨 A component for displaying icons**
 *
 * @description
 * [Iconography](https://uds.build/docs/core-concepts/icons) contains small symbols for actions or
 * other items. They are available in four different sizes: `xs`, `sm`, `md`, and
 * `lg`. Each size also supports an outline and fill variant. Icons can be
 * colored using the `color` prop.
 *
 * The component is available in the `@yahoo/uds` package but is meant to be used
 * with the assets in `@yahoo/uds-icons`. You will need both packages to use icons.
 * A separate package provides modularity from the core library, better
 * versioning strategies, and tree shakeability.
 *
 * @example
 * ```tsx
 * import { Icon } from '@yahoo/uds';
 * import { AddFolder } from '@yahoo/uds-icons';
 *
 * <Icon name={AddFolder} variant="fill" size="sm" />
 * ```
 *
 * @usage
 * - If you need to display an icon.
 *
 * @see The {@link https://uds.build/docs/components/icon Icon Docs} for more info
 *
 * @related [IconButton](https://uds.build/docs/components/icon-button)
 */
declare const Icon: react.ForwardRefExoticComponent<IconPropsWithSVGProps & react.RefAttributes<SVGSVGElement>>;
//#endregion
export { Icon, type IconProps };