@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
81 lines (78 loc) • 2.19 kB
JavaScript
"use client";
import { jsx } from 'react/jsx-runtime';
import { nex } from '@nex-ui/styled';
import { __DEV__ } from '@nex-ui/utils';
import { useNexUI } from '../provider/Context.mjs';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { useSlotProps } from '../utils/useSlotProps.mjs';
import { composeClasses } from '../utils/composeClasses.mjs';
import { iconRecipe } from '../../theme/recipes/icon.mjs';
import { getUtilityClass } from '../utils/getUtilityClass.mjs';
const useSlotClasses = (ownerState)=>{
const { prefix } = useNexUI();
const iconRoot = `${prefix}-icon`;
const { spin, size } = ownerState;
const slots = {
root: [
'root',
spin && `spin`,
size && `size-${size}`
]
};
const composedClasses = composeClasses(slots, getUtilityClass(iconRoot));
return composedClasses;
};
const useAriaProps = ()=>{
return {
'aria-hidden': true,
focusable: false
};
};
const Icon = (inProps)=>{
const props = useDefaultProps({
name: 'Icon',
props: inProps
});
const { as, ref, color, spin = false, size = 'md', width = '1em', height = '1em', ...remainingProps } = props;
if (__DEV__ && !as) {
console.warn('[Nex UI] Icon: Please pass the "as" property.');
}
const ownerState = {
...props,
color,
as,
spin,
size,
width,
height
};
const ariaProps = useAriaProps();
const styles = useStyles({
ownerState,
name: 'Icon',
recipe: iconRecipe
});
const classes = useSlotClasses(ownerState);
const rootIcon = useSlotProps({
ownerState,
externalForwardedProps: remainingProps,
sx: styles,
classNames: classes.root,
additionalProps: {
ref,
as,
...ariaProps,
sx: {
color,
width,
height
}
}
});
return /*#__PURE__*/ jsx(nex.span, {
...rootIcon
});
};
Icon.displayName = 'Icon';
export { Icon };