48 lines
949 B
TypeScript
Raw Normal View History

2023-05-15 08:51:32 +08:00
import type { FC } from 'react'
import classNames from 'classnames'
2023-05-19 17:36:44 +08:00
import data from '@emoji-mart/data'
import { init } from 'emoji-mart'
import style from './style.module.css'
2023-05-19 17:36:44 +08:00
init({ data })
2023-05-15 08:51:32 +08:00
export type AppIconProps = {
size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large'
2023-05-15 08:51:32 +08:00
rounded?: boolean
icon?: string
background?: string
className?: string
innerIcon?: React.ReactNode
2023-05-19 17:36:44 +08:00
onClick?: () => void
2023-05-15 08:51:32 +08:00
}
const AppIcon: FC<AppIconProps> = ({
size = 'medium',
rounded = false,
2023-05-19 17:36:44 +08:00
icon,
2023-05-15 08:51:32 +08:00
background,
className,
innerIcon,
2023-05-19 17:36:44 +08:00
onClick,
2023-05-15 08:51:32 +08:00
}) => {
return (
<span
className={classNames(
style.appIcon,
size !== 'medium' && style[size],
rounded && style.rounded,
className ?? '',
)}
style={{
background,
}}
2023-05-19 17:36:44 +08:00
onClick={onClick}
2023-05-15 08:51:32 +08:00
>
{innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />)}
2023-05-15 08:51:32 +08:00
</span>
)
}
export default AppIcon