DialogIcon.tsx

import React from 'react';
import { CheckIcon, ExclamationIcon, InformationCircleIcon, ShieldExclamationIcon } from '@heroicons/react/outline';
import classNames from 'classnames';

interface Props {
    type: 'danger' | 'info' | 'success' | 'warning';
    className?: string;
}

export default ({ type, className }: Props) => {
    const [ Component, styles ] = (function (): [ (props: React.ComponentProps<'svg'>) => JSX.Element, string ] {
        switch (type) {
            case 'danger':
                return [ ShieldExclamationIcon, 'bg-red-500 text-red-50' ];
            case 'warning':
                return [ ExclamationIcon, 'bg-yellow-600 text-yellow-50' ];
            case 'success':
                return [ CheckIcon, 'bg-green-600 text-green-50' ];
            case 'info':
                return [ InformationCircleIcon, 'bg-primary-500 text-primary-50' ];
        }
    })();

    return (
        <div className={classNames('flex items-center justify-center w-10 h-10 rounded-full', styles, className)}>
            <Component className={'w-6 h-6'}/>
        </div>
    );
};