我正在为我的应用程序使用react-bootstrap。用于表单验证的给定图标如下所示：
代码
<Form noValidate validated={validated} onSubmit={this.handleSubmit}>
<Form.Group controlId="formEmail">
<Form.Label >Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" required />
</Form.Group>
</Form>
我想将成功图标更改为如下所示
我该如何实现？
尝试自定义背景SVG图片
CSS：
.form-control.is-valid,.was-validated .form-control:valid {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0,SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 363.025 363.024' style='enable-background:new 0 0 363.025 363.024;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath style='fill:%2328a745;' d='M181.512,363.024C81.43,363.024,281.601,181.513C0,81.424,81.43,181.512,0 c100.083,181.513,181.513C363.025,281.595,363.024z M181.512,11.71 C87.88,11.71,87.886,181.513s76.17,169.802,169.802c93.633,169.803-76.175,169.803-169.802 S275.145,11.71z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpolygon style='fill:%2328a745;' points='147.957,258.935 83.068,194.046 91.348,185.767 147.957,242.375 271.171,119.166 279.451,127.445 '/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
}