@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
82 lines (79 loc) • 2.23 kB
JavaScript
"use client";
import { jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
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 { useSlot } from '../utils/useSlot.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 { spin, size } = ownerState;
return useMemo(()=>{
const iconRoot = `${prefix}-icon`;
const slots = {
root: [
'root',
spin && `spin`,
size && `size-${size}`
]
};
return composeClasses(slots, getUtilityClass(iconRoot));
}, [
prefix,
size,
spin
]);
};
const Icon = (inProps)=>{
const props = useDefaultProps({
name: 'Icon',
props: inProps
});
const { as, color, focusable = false, 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 style = useStyles({
ownerState,
name: 'Icon',
recipe: iconRecipe
});
const classes = useSlotClasses(ownerState);
const [IconRoot, getIconRootProps] = useSlot({
style,
ownerState,
elementType: 'svg',
externalForwardedProps: remainingProps,
classNames: classes.root,
a11y: {
focusable,
'aria-hidden': props['aria-hidden'] ?? true
},
additionalProps: {
as,
sx: {
color,
width,
height
}
}
});
return /*#__PURE__*/ jsx(IconRoot, {
...getIconRootProps()
});
};
Icon.displayName = 'Icon';
export { Icon };