Stefan Hacker
69 lines
3.2 KiB
JavaScript
69 lines
3.2 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getFontIcon = exports.FontIcon = exports.getIconContent = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var React = require("react");
|
|
var Icon_styles_1 = require("./Icon.styles");
|
|
var Utilities_1 = require("../../Utilities");
|
|
var Styling_1 = require("../../Styling");
|
|
exports.getIconContent = (0, Utilities_1.memoizeFunction)(function (iconName) {
|
|
var _a = (0, Styling_1.getIcon)(iconName) || {
|
|
subset: {},
|
|
code: undefined,
|
|
}, code = _a.code, subset = _a.subset;
|
|
if (!code) {
|
|
return null;
|
|
}
|
|
return {
|
|
children: code,
|
|
iconClassName: subset.className,
|
|
fontFamily: subset.fontFace && subset.fontFace.fontFamily,
|
|
mergeImageProps: subset.mergeImageProps,
|
|
};
|
|
}, undefined, true /*ignoreNullOrUndefinedResult */);
|
|
/**
|
|
* Fast icon component which only supports font glyphs (not images) and can't be targeted by customizations.
|
|
* To style the icon, use `className` or reference `ms-Icon` in CSS.
|
|
* {@docCategory Icon}
|
|
*/
|
|
var FontIcon = function (props) {
|
|
var iconName = props.iconName, className = props.className, _a = props.style, style = _a === void 0 ? {} : _a;
|
|
var iconContent = (0, exports.getIconContent)(iconName) || {};
|
|
var iconClassName = iconContent.iconClassName, children = iconContent.children, fontFamily = iconContent.fontFamily, mergeImageProps = iconContent.mergeImageProps;
|
|
var nativeProps = (0, Utilities_1.getNativeProps)(props, Utilities_1.htmlElementProperties);
|
|
var accessibleName = props['aria-label'] || props.title;
|
|
var containerProps = props['aria-label'] || props['aria-labelledby'] || props.title
|
|
? {
|
|
role: mergeImageProps ? undefined : 'img',
|
|
}
|
|
: {
|
|
'aria-hidden': true,
|
|
};
|
|
var finalChildren = children;
|
|
if (mergeImageProps) {
|
|
if (typeof children === 'object' && typeof children.props === 'object' && accessibleName) {
|
|
finalChildren = React.cloneElement(children, { alt: accessibleName });
|
|
}
|
|
}
|
|
return (React.createElement("i", tslib_1.__assign({ "data-icon-name": iconName }, containerProps, nativeProps, (mergeImageProps
|
|
? {
|
|
title: undefined,
|
|
'aria-label': undefined,
|
|
}
|
|
: {}), { className: (0, Utilities_1.css)(Icon_styles_1.MS_ICON, Icon_styles_1.classNames.root, iconClassName, !iconName && Icon_styles_1.classNames.placeholder, className),
|
|
// Apply the font family this way to ensure it doesn't get overridden by Fabric Core ms-Icon styles
|
|
// https://github.com/microsoft/fluentui/issues/10449
|
|
style: tslib_1.__assign({ fontFamily: fontFamily }, style) }), finalChildren));
|
|
};
|
|
exports.FontIcon = FontIcon;
|
|
/**
|
|
* Memoized helper for rendering a FontIcon.
|
|
* @param iconName - The name of the icon to use from the icon font.
|
|
* @param className - Class name for styling the icon.
|
|
* @param ariaLabel - Label for the icon for the benefit of screen readers.
|
|
* {@docCategory Icon}
|
|
*/
|
|
exports.getFontIcon = (0, Utilities_1.memoizeFunction)(function (iconName, className, ariaLabel) {
|
|
return (0, exports.FontIcon)({ iconName: iconName, className: className, 'aria-label': ariaLabel });
|
|
});
|
|
//# sourceMappingURL=FontIcon.js.map
|