in packages/react/src/components/Icon/Icon.base.tsx [30:100]
public render() {
const { children, className, styles, iconName, imageErrorAs, theme } = this.props;
const isPlaceholder = typeof iconName === 'string' && iconName.length === 0;
const isImage =
// eslint-disable-next-line deprecation/deprecation
!!this.props.imageProps || this.props.iconType === IconType.image || this.props.iconType === IconType.Image;
const iconContent = getIconContent(iconName) || {};
const { iconClassName, children: iconContentChildren, mergeImageProps } = iconContent;
const classNames = getClassNames(styles, {
theme: theme!,
className,
iconClassName,
isImage,
isPlaceholder,
});
const RootType = isImage ? 'span' : 'i';
const nativeProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(this.props, htmlElementProperties, [
'aria-label',
]);
const { imageLoadError } = this.state;
const imageProps: IImageProps = {
...this.props.imageProps,
onLoadingStateChange: this._onImageLoadingStateChange,
};
const ImageType = (imageLoadError && imageErrorAs) || Image;
// eslint-disable-next-line deprecation/deprecation
const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
const accessibleName = imageProps.alt || ariaLabel || this.props.title;
const hasName = !!(
accessibleName ||
this.props['aria-labelledby'] ||
imageProps['aria-label'] ||
imageProps['aria-labelledby']
);
const containerProps = hasName
? {
role: isImage || mergeImageProps ? undefined : 'img',
'aria-label': isImage || mergeImageProps ? undefined : accessibleName,
}
: {
'aria-hidden': true,
};
let finalIconContentChildren = iconContentChildren;
if (mergeImageProps && iconContentChildren && typeof iconContentChildren === 'object' && accessibleName) {
finalIconContentChildren = React.cloneElement(iconContentChildren, {
alt: accessibleName,
});
}
return (
<RootType
data-icon-name={iconName}
{...containerProps}
{...nativeProps}
{...(mergeImageProps
? {
title: undefined,
'aria-label': undefined,
}
: {})}
className={classNames.root}
>
{isImage ? <ImageType {...imageProps} /> : children || finalIconContentChildren}
</RootType>
);
}