modal-dialog - React:styled-components 模态警报成功图标

Question

我在我的应用程序中使用 react-typescript。对于样式，我使用style-components。我正在创建一个模态警报组件。我的模态警报已准备就绪，看起来像这样，Image。我正在检查这个甜蜜的警报网站。在那里他们有成功的图标。我想在我的模态警报组件中使用它。但我不知道在哪里可以找到这个图标以及如何在我的模态警报组件中使用它。

这是我的模态警报组件

import React from 'react';
import iconX from './close.svg';
import styled from 'styled-components';

export const Modals = styled.div`
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
`
const ModalOverlay = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
cursor: pointer;
`

const ModalBox = styled.div`
position: relative;
width: 80%;
margin: 0 10%;
padding: 50px;
box-sizing: border-box;
border-radius: 10px;
background-color: white;
cursor: auto;`

const ModalTitle = styled.div`
color: #9E25FC;
font-size: 30px;
text-align: center;
`

const ModalContent = styled.div`
margin-top: 30px;
color: #6B6B6B;
font-size: 16px;`

const ModalClose = styled.button`
position: absolute;
top: 20px;
right: 20px;
transition: transform 250ms ease-in-out;
transform-origin: 50% 50%;
&:hover {
  transform: rotate(180deg);
}
`
interface IModalProps {
  title: string;
  isOpen: boolean;
  onClose: () => void;
  children?: JSX.Element | string[] | string;
  icon?: JSX.Element; //This is icon i am declaring. I am not sure is it JSX.Element.
}

export default ({ title, isOpen, onClose, children }: IModalProps) => {
  const outsideRef = React.useRef(null);
  const handleCloseOnOverlay = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
    if (e.target === outsideRef.current) {
      onClose();
    }
  }
  return isOpen ? (
    <Modals>
      <ModalOverlay
        ref={outsideRef}
        onClick={handleCloseOnOverlay}
      />
      <ModalBox>
        <ModalClose
          onClick={onClose}
        >
          <img src={iconX} alt={'close'} />
        </ModalClose >
        <ModalTitle>
// I want to use it in here the success icon.
          {title}
        </ModalTitle>
        <ModalContent>
          {children}
        </ModalContent>
      </ModalBox>
    </Modals>
  ) : null;
};

标签： modal-dialogstylesreact-typescript