Replace unicode icons with SVG in YesNo component

[MAILPOET-2773]

assets/css/src/generic/_forms-yesno.scss

@@ -52,11 +52,8 @@
 
 .mailpoet-form-yesno-yes {
   border-radius: 3px 0 0 3px;
-  font-size: 13px;
   left: 0;
 
-  &:before { content: '✔'; }
-
   input:checked + & {
     background: $color-input-success;
     color: #fff;
@@ -65,14 +62,8 @@
 
 .mailpoet-form-yesno-no {
   border-radius: 0 3px 3px 0;
-  font-size: 18px;
   right: 0;
 
-  &:before {
-    content: '×';
-    padding-bottom: 4px;
-  }
-
   input:checked + & {
     background: $color-input-error;
     color: #fff;

assets/js/src/common/form/yesno/icons/no.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default (
+  <svg width="17" height="16" viewBox="0 0 17 16">
+    <path fill="currentColor" d="M12.407 3.31c.576.576.576 1.509 0 2.084L9.914 7.888l2.411 2.412c.586.585.586 1.535 0 2.121-.585.586-1.535.586-2.12 0l-2.413-2.412L5.3 12.503c-.576.575-1.509.575-2.084 0-.575-.575-.575-1.508 0-2.083l2.493-2.495-2.41-2.41c-.587-.587-.587-1.536 0-2.122.585-.586 1.535-.586 2.12 0L7.83 5.804l2.494-2.493c.575-.576 1.508-.576 2.083 0z" />
+  </svg>
+);

assets/js/src/common/form/yesno/icons/yes.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default (
+  <svg width="13" height="11" viewBox="0 0 13 11">
+    <path fill="currentColor" d="M9.967.638c.483-.698 1.405-.846 2.06-.33.654.515.793 1.499.31 2.197l-5.44 7.857c-.55.794-1.64.857-2.267.132l-3.4-3.928c-.552-.638-.515-1.632.083-2.22.598-.59 1.53-.55 2.082.088l2.19 2.532L9.968.638z" />
+  </svg>
+);

assets/js/src/common/form/yesno/yesno.tsx

@@ -1,5 +1,7 @@
 import React, { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
+import iconYes from './icons/yes';
+import iconNo from './icons/no';
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   name: string,
@@ -27,7 +29,9 @@ const YesNo = ({
         onChange={(e) => onCheck(true)}
         {...attributes}
       />
-      <span className="mailpoet-form-yesno-control mailpoet-form-yesno-yes" />
+      <span className="mailpoet-form-yesno-control mailpoet-form-yesno-yes">
+        {iconYes}
+      </span>
     </label>
     <label>
       <input
@@ -35,7 +39,9 @@ const YesNo = ({
         onChange={(e) => onCheck(false)}
         {...attributes}
       />
-      <span className="mailpoet-form-yesno-control mailpoet-form-yesno-no" />
+      <span className="mailpoet-form-yesno-control mailpoet-form-yesno-no">
+        {iconNo}
+      </span>
     </label>
   </div>
 );