Add a css class to the checkbox indicator

src/components/checkbox/checkbox.js

@@ -36,7 +36,7 @@ export default {
     return (
       <label class="checkbox" {...wrapperProps}>
         <input type="checkbox" {...inputProps} />
-        <i />
+        <i class="checkbox-indicator" />
         {children && <span>{children}</span>}
       </label>
     )

src/components/checkbox/checkbox.scss

@@ -5,10 +5,7 @@
   display: inline-block;
   padding-left: 1.2em;
 
-  input[type=checkbox] {
-    display: none;
-
-    & + i::before {
+  &-indicator::before {
     position: absolute;
     left: 0;
     top: 0;
@@ -32,12 +29,15 @@
     box-sizing: border-box;
   }
 
-    &:checked + i::before {
+  input[type=checkbox] {
+    display: none;
+
+    &:checked + .checkbox-indicator::before {
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
 
-    &:disabled + i::before {
+    &:disabled + .checkbox-indicator::before {
       opacity: .5;
     }
   }