@hackplan/polaris
Version:
Shopify’s product component library
39 lines (38 loc) • 1.52 kB
JavaScript
import React from 'react';
import { classNames, variationName } from '../../utilities/css';
import { withAppProvider } from '../AppProvider';
import styles from './Icon.scss';
const COLORS_WITH_BACKDROPS = [
'teal',
'tealDark',
'greenDark',
'redDark',
'yellowDark',
'ink',
'inkLighter',
];
function Icon({ source, color, backdrop, accessibilityLabel, polaris: { intl }, }) {
if (color && backdrop && COLORS_WITH_BACKDROPS.indexOf(color) < 0) {
// eslint-disable-next-line no-console
console.warn(intl.translate('Polaris.Icon.backdropWarning', {
color,
colorsWithBackDrops: COLORS_WITH_BACKDROPS.join(', '),
}));
}
const className = classNames(styles.Icon, color && styles[variationName('color', color)], color && color !== 'white' && styles.isColored, backdrop && styles.hasBackdrop);
let contentMarkup;
if (typeof source === 'function') {
const SourceComponent = source;
contentMarkup = (<SourceComponent className={styles.Svg} focusable="false" aria-hidden="true"/>);
}
else if (source === 'placeholder') {
contentMarkup = <div className={styles.Placeholder}/>;
}
else if (typeof source === 'string') {
contentMarkup = (<img className={styles.Img} src={`data:image/svg+xml;utf8,${source}`} alt="" aria-hidden="true"/>);
}
return (<span className={className} aria-label={accessibilityLabel}>
{contentMarkup}
</span>);
}
export default withAppProvider()(Icon);