@patreon/studio
Version:
Patreon Studio Design System
47 lines • 2.29 kB
JSX
'use client';
import cx from 'classnames';
import React, { memo } from 'react';
import { classNameForHighlightSize } from '~/styles/classNameForHighlightSize';
import { classNameForIconColor } from '~/styles/classNameForIconColor';
import { tokens } from '~/tokens';
import { wrapResponsive } from '~/utilities/opaque-responsive';
import { classNameForResponsiveValue, createResponsiveClassNameLookup } from '~/utilities/responsive-style';
import styles from './Icon.module.css';
const classNameSizeLookup = createResponsiveClassNameLookup(styles, {
'8px': 'sizePx8',
'10px': 'sizePx10',
'12px': 'sizePx12',
'16px': 'sizePx16',
'20px': 'sizePx20',
'24px': 'sizePx24',
'32px': 'sizePx32',
'40px': 'sizePx40',
'48px': 'sizePx48',
'64px': 'sizePx64',
'88px': 'sizePx88',
});
const verticalAlignMap = {
baseline: styles.verticalAlignBaseline,
sub: styles.verticalAlignSub,
super: styles.verticalAlignSuper,
'text-top': styles.verticalAlignTextTop,
'text-bottom': styles.verticalAlignTextBottom,
middle: styles.verticalAlignMiddle,
top: styles.verticalAlignTop,
bottom: styles.verticalAlignBottom,
};
export const Icon = memo(function IconWrapper({ innerRef, size = '16px', color = tokens.global.content.regular.default, highlight = false, highlightColor = tokens.global.primary.surfaceMuted.default, highlightSize = tokens.global.space.x40, children, verticalAlign, title, id, 'data-tag': dataTag, className, style, ...props }) {
const responsiveSize = wrapResponsive(size);
const classList = cx(styles.root, classNameForIconColor({ color }), classNameForResponsiveValue(responsiveSize, classNameSizeLookup), verticalAlign && verticalAlignMap[verticalAlign], className);
const icon = (<span ref={innerRef} title={title} aria-hidden id={id} data-tag={dataTag} className={classList} style={style} {...props}>
{children}
</span>);
if (highlight) {
const hightlightClassList = cx(styles.highlight, classNameForIconColor({ color: highlightColor }), classNameForHighlightSize({ highlightSize }));
return (<span className={hightlightClassList} data-tag={dataTag && 'icon-highlight-container'}>
{icon}
</span>);
}
return icon;
});
//# sourceMappingURL=Icon.jsx.map