mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
758 B
TypeScript
32 lines
758 B
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
Icon as Iconify,
|
|
IconProps,
|
|
addIcon,
|
|
addCollection,
|
|
} from '@iconify/react';
|
|
|
|
const placeHolderStyle = { width: '1em', height: '1em' };
|
|
|
|
const InternalIcon: React.FC<Omit<IconProps, 'ref'>> = React.memo((props) => {
|
|
const [loaded, setLoaded] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Iconify {...props} onLoad={() => setLoaded(true)} />
|
|
{!loaded && <span style={placeHolderStyle} />}
|
|
</>
|
|
);
|
|
});
|
|
InternalIcon.displayName = 'Icon';
|
|
|
|
type CompoundedComponent = React.FC<Omit<IconProps, 'ref'>> & {
|
|
addIcon: typeof addIcon;
|
|
addCollection: typeof addCollection;
|
|
};
|
|
|
|
export const Icon = InternalIcon as CompoundedComponent;
|
|
|
|
Icon.addIcon = addIcon;
|
|
Icon.addCollection = addCollection;
|