@reusable-ui/icon/dist/Icon.js

An icon set component for React app.

// react:
import { 
// react:
default as React, } from 'react';
// cssfn:
import { 
// style sheets:
dynamicStyleSheet, } from '@cssfn/cssfn-react'; // writes css in react hook
// reusable-ui core:
import { 
// react helper hooks:
useMergeClasses, useMergeStyles, useResizable, useThemeable, useMildable, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { Generic, } from '@reusable-ui/generic'; // a base component
// internals:
import { 
// features:
useIcon, } from './features/icon.js';
// styles:
export const useIconStyleSheet = dynamicStyleSheet(() => import(/* webpackPrefetch: true */ './styles/styles.js'), { id: 'oqfct2z8qv' }); // a unique salt for SSR support, ensures the server-side & client-side have the same generated class names
export const customIconList = [
    'instagram',
    'whatsapp',
    'google',
    'twitter',
    'apple',
    'close',
    'busy',
    'navup',
    'navdown',
    'navleft',
    'navright',
    'dropup',
    'dropdown',
    'dropleft',
    'dropright',
];
const Icon = (props) => {
    // styles:
    const styleSheet = useIconStyleSheet();
    // features:
    const icon = useIcon(props);
    // variants:
    const resizableVariant = useResizable(props);
    const themeableVariant = useThemeable(props);
    const mildableVariant = useMildable(props);
    // rest props:
    const { 
    // appearances:
    icon: _icon, // remove
    // variants:
    size: _size, // remove
    theme: _theme, // remove
    mild: _mild, // remove
    ...restGenericProps } = props;
    // classes:
    const variantClasses = useMergeClasses(
    // preserves the original `variantClasses`:
    props.variantClasses, 
    // variants:
    resizableVariant.class, themeableVariant.class, mildableVariant.class);
    const classes = useMergeClasses(
    // preserves the original `classes`:
    props.classes, 
    // appearances:
    icon.class);
    // styles:
    const mergedStyle = useMergeStyles(
    // appearances:
    icon.style, 
    // preserves the original `style` (can overwrite the `icon.style`):
    props.style);
    // jsx:
    return (React.createElement(Generic, { ...restGenericProps, 
        // semantics:
        tag: props.tag ?? 'span', role: props.role ?? 'img', 
        // classes:
        mainClass: props.mainClass ?? styleSheet.main, variantClasses: variantClasses, classes: classes, 
        // styles:
        style: mergedStyle }));
};
export { Icon, Icon as default, };