39 lines
1.5 KiB
JavaScript
39 lines
1.5 KiB
JavaScript
import * as React from 'react';
|
|
import { iconClassName, cx } from './shared';
|
|
import { useIconState } from './useIconState';
|
|
/**
|
|
* Base createFluentIcon — SVG icon factory without Styles.
|
|
*
|
|
* Returns a React component that renders an SVG icon with:
|
|
* - data-fui-icon attribute for CSS targeting
|
|
* - a11y attributes (aria-hidden, aria-label, role)
|
|
* - RTL flip via data-fui-icon-rtl attribute
|
|
* - HCM forced-color-adjust via CSS attribute selector
|
|
*
|
|
* @access private
|
|
* @alpha
|
|
*/
|
|
export const createFluentIcon = (displayName, width, pathsOrSvg, options) => {
|
|
const viewBoxWidth = width === '1em' ? '20' : width;
|
|
const Icon = React.forwardRef((props, ref) => {
|
|
const iconState = useIconState(props, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl });
|
|
const state = {
|
|
...iconState,
|
|
className: cx(iconClassName, iconState.className),
|
|
ref,
|
|
width,
|
|
height: width,
|
|
viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`,
|
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
};
|
|
if (typeof pathsOrSvg === 'string') {
|
|
return React.createElement('svg', { ...state, dangerouslySetInnerHTML: { __html: pathsOrSvg } });
|
|
}
|
|
else {
|
|
return React.createElement('svg', state, ...pathsOrSvg.map((d) => React.createElement('path', { d, fill: state.fill })));
|
|
}
|
|
});
|
|
Icon.displayName = displayName;
|
|
return Icon;
|
|
};
|