import type { SharedProps } from '@bonniernews/dn-design-system-web/assets/types/shared-props.ts';
import type { DsColorIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-color.d.ts';
import type { DsIcon } from '@bonniernews/dn-design-system-web/types-lib/ds-icon.d.ts';
export interface IconProps extends SharedProps {
    iconName: DsIcon;
    size?: number;
    color?: DsColorIcon;
    forcePx?: boolean;
}
/**
 * - GitHub: [BonnierNews/dn-design-system/web/src/components/icon](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-sprite)
 * - Storybook: [icon](https://designsystem.dn.se/?path=/docs/foundations-icons--docs)
 *
 * The component will not include styling by itself. Make sure to include the right styles for the component. See example below:
 * `@use '@bonniernews/dn-design-system-web/components/icon/icon.scss'`
 *
 * ###There are three ways to use icons from DS:
 * Use Icon from sprite: `IconUse({})`, this is the **recomended** way since this reduces the html output.
 * Use Icon with wrapper: `IconWithWrapper({})`, the component itself uses the icons from the sprite but wraps it with a div and takes properties like size and color
 * Use Icon from foundations: `Icon({})`, only use this if you need an inline icon, this will output the entire svg wherever it is used.
 */
export declare const IconWithWrapper: ({ iconName, size, color, attributes, classNames, forcePx, }: IconProps) => import("preact").JSX.Element;