feat(react-icons): introduce granular export maps for svg utils

[Hotell]

Introduces another public api endpoint for svg related utilities to improve tree-shaking and bundle size -> @fluentui/react-icons/utils

Before:

import {AccessTimeFilled, AccessTimeRegular} from '@fluentui/react-icons/svg/access-time';
import {bundleIcon, iconRegularClassName} from '@fluentui/react-icons';

const Bundled = bundleIcon(AccessTimeFilled,AccessTimeRegular);

After

import {AccessTimeFilled, AccessTimeRegular} from '@fluentui/react-icons/svg/access-time'
// 🚢 NEW api
import {bundleIcon, iconRegularClassName} from '@fluentui/react-icons/utils';

const Bundled = bundleIcon(AccessTimeFilled,AccessTimeRegular);

Additional changes

• changes bundleIcon from default to named export for better three shaking
• fixes invalid custom filled property propagation to <svg>

[Hotell]

added only explicit return annotation - the body was reformatted by prettier

[dmytrokirpa]

Does it make sense to have two separate types like:

export type FluentIconsProps<
  TBaseAttributes extends
    | React.SVGAttributes<SVGElement>
    | React.HTMLAttributes<HTMLElement> = React.SVGAttributes<SVGElement>,
  TRefType extends HTMLElement | SVGSVGElement = SVGSVGElement,
> = TBaseAttributes &
  React.RefAttributes<TRefType> & {
    primaryFill?: string;
    className?: string;
    title?: string;
}

export type FluentCompoundIconProps<
  TBaseAttributes extends
    | React.SVGAttributes<SVGElement>
    | React.HTMLAttributes<HTMLElement> = React.SVGAttributes<SVGElement>,
  TRefType extends HTMLElement | SVGSVGElement = SVGSVGElement,
> = FluentIconsProps<TBaseAttributes> & {
/**
     * Whether to render the filled version of the icon.
     */
    filled?: boolean;
}

[Hotell]

it does, but if we do this it would break user pipeline if someone "by accident" set filled on normal icon