pro/src/components/icon/index.tsx

import IconAll, { ALL_ICON_KEYS, IconType, IIconAllProps } from '@icon-park/react/es/all'
import React, { Fragment } from 'react'
import * as AntIcons from '@ant-design/icons/es/icons'
import { IconComponentProps } from '@ant-design/icons/es/components/Icon'

export function Icon(props: Partial<IIconAllProps | IconComponentProps>) {

    const { type, ...other } = props
    const AntIcon = AntIcons[type as keyof typeof AntIcons]
    if (AntIcon) {
        return <AntIcon {...other}/>
    }

    //如果是http或https链接，直接返回图片
    if (type && (type.startsWith('http') || type.startsWith('https') || type.startsWith('data:image'))) {
        // @ts-ignore 没有办法把所有的属性都传递给img
        return <img src={type} alt="icon" width={16} height={16} {...other}/>
    }

    if (ALL_ICON_KEYS.indexOf(type as IconType) < 0) {
        return null
    }

    return (
            <Fragment>
                <IconAll type={type as IconType}
                         theme="outline" size="20" fill="#868686" strokeWidth={3}
                         {...other}/>
            </Fragment>
    )
}

// eslint-disable-next-line react-refresh/only-export-components
export const getIcon = (type: string, props?: Partial<IIconAllProps>) => {

    if(React.isValidElement(type)){
        return type
    }
    //判断是否为json格式
    if (type && type.startsWith('{') && type.endsWith('}')) {
        try {
            const obj = JSON.parse(type)
            type = obj.type
            props = obj
        } catch (e) { /* empty */
        }
    }

    return <Icon type={type} {...props}/>
}

export default Icon