office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
45 lines • 1.94 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { classNames, MS_ICON } from './Icon.styles';
import { css, getNativeProps, htmlElementProperties, memoizeFunction } from '../../Utilities';
import { getIcon } from '../../Styling';
export var getIconContent = memoizeFunction(function (iconName) {
var iconDefinition = getIcon(iconName) || {
subset: {
className: undefined
},
code: undefined
};
return {
children: iconDefinition.code,
iconClassName: iconDefinition.subset.className
};
});
/**
* 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}
*/
export var FontIcon = function (props) {
var iconName = props.iconName, className = props.className;
var _a = getIconContent(iconName), iconClassName = _a.iconClassName, children = _a.children;
var nativeProps = getNativeProps(props, htmlElementProperties);
var containerProps = props['aria-label']
? {}
: {
role: 'presentation',
'aria-hidden': true
};
return (React.createElement("i", tslib_1.__assign({ "data-icon-name": iconName }, containerProps, nativeProps, { className: css(MS_ICON, classNames.root, iconClassName, !iconName && classNames.placeholder, className) }), children));
};
/**
* 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}
*/
export var getFontIcon = memoizeFunction(function (iconName, className, ariaLabel) {
return FontIcon({ iconName: iconName, className: className, 'aria-label': ariaLabel });
});
//# sourceMappingURL=FontIcon.js.map