@gluestack-ui/icon/lib/createIcon/index.jsx

A universal headless icon component for React Native, Next.js & React

import React, { forwardRef } from 'react';
import { Path, G } from 'react-native-svg';
const ChildPath = ({ element, fill, stroke: pathStroke }) => {
    const pathStrokeColor = pathStroke || '';
    const fillColor = fill || '';
    if (!element) {
        return null;
    }
    if (element.type === React.Fragment) {
        return element;
    }
    return React.cloneElement(element, {
        fill: fillColor ? fillColor : 'currentColor',
        stroke: pathStrokeColor,
    });
};
export function createIcon({ Root, path, d, ...initialProps }) {
    const IconTemp = forwardRef((props, ref) => {
        let children = path;
        if (d && (!path || Object.keys(path).length === 0)) {
            children = <Path fill="currentColor" d={d}/>;
        }
        const finalProps = {
            ...initialProps,
            ...props,
        };
        const { stroke = 'currentColor', color, role = 'img', ...resolvedProps } = finalProps;
        let type = resolvedProps.type;
        if (type === undefined) {
            type = 'svg';
        }
        let colorProps = {};
        if (color) {
            colorProps = { ...colorProps, color: color };
        }
        if (stroke) {
            colorProps = { ...colorProps, stroke: stroke };
        }
        let sizeProps = {};
        let sizeStyle = {};
        if (type === 'font') {
            if (resolvedProps.sx) {
                sizeProps = { ...sizeProps, fontSize: resolvedProps?.sx?.h };
            }
            if (resolvedProps.size) {
                // sizeProps = { ...sizeProps, fontSize: resolvedProps?.size };
            }
        }
        return (<Root {...resolvedProps} {...colorProps} role={role} ref={ref} {...sizeProps} {...sizeStyle}>
        {React.Children.count(children) > 0 ? (<G>
            {React.Children.map(children, (child, i) => (<ChildPath key={child?.key ?? i} element={child} {...child?.props}/>))}
          </G>) : null}
      </Root>);
    });
    const Icon = IconTemp;
    return Icon;
}