feat: icons use currentcolor for fill

konstaui · Feb 16, 2021 · befa7b5 · befa7b5
1 parent 1ec342b
commit befa7b5
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 65 deletions.
diff --git a/TODO.md b/TODO.md
@@ -1,6 +1,6 @@
 - Tooling
 
-  - Lint/Prettier
+  - Lint - check rules
 
 - Components
 
@@ -23,6 +23,5 @@
   - Actions
 
 - Common
-  - Icons to use `fill-current`
   - `margin`/`setMargin` prop enabled by default to unset margin
   - `positition`/`posititionClass`/`setPosition` prop to set/unset position
diff --git a/src/react/components/NavbarBackLink.js b/src/react/components/NavbarBackLink.js
@@ -41,7 +41,7 @@ const NavbarBackLink = (props) => {
         material: 'min-w-12',
       },
       icon: {
-        initial: 'fill-current',
+        initial: '',
       },
     },
     className

diff --git a/src/react/components/Preloader.js b/src/react/components/Preloader.js
@@ -44,8 +44,8 @@ const Preloader = (props) => {
         initial: `${
           theme === 'ios' ? 'ios-preloader' : 'material-preloader'
         } inline-block ${size} ${colors.text}`,
-        ios: `fill-current`,
-        material: `stroke-current stroke-4`,
+        ios: ``,
+        material: `stroke-4`,
       },
       inner: {
         initial: `block w-full h-full`,

diff --git a/src/react/components/Radio.js b/src/react/components/Radio.js
@@ -65,7 +65,7 @@ const Radio = (props) => {
       },
       icon: {
         initial: `w-3/5 h-3/5`,
-        ios: 'text-primary fill-current',
+        ios: 'text-primary',
         material: `rounded-full ${colors.bgChecked}`,
         notChecked: 'opacity-0',
         checked: 'opacity-100',

diff --git a/src/react/components/icons/BackIcon.js b/src/react/components/icons/BackIcon.js
@@ -7,6 +7,7 @@ const BackIcon = ({ theme, ...rest }) => {
       width="12"
       height="20"
       viewBox="0 0 12 20"
+      fill="currentcolor"
       {...rest}
     >
       <path d="M0.18261596,9.4221638 C0.21783626,9.37068075 0.25835058,9.32165682 0.30416276,9.27584463 L9.1425872,0.4374202 C9.7256776,-0.14567018 10.6691555,-0.1475686 11.2590259,0.44230183 C11.8448123,1.02808827 11.8502479,1.97240019 11.2639075,2.55874056 L3.82594417,9.9967039 L11.2578297,17.4285894 C11.8409201,18.0116798 11.8428185,18.9551577 11.252948,19.5450281 C10.6671616,20.1308146 9.7228497,20.1362501 9.13650932,19.5499097 L0.2980849,10.7114853 C-0.0545897,10.3588107 -0.0959125,9.8144953 0.18261596,9.4221638 Z" />
@@ -17,6 +18,7 @@ const BackIcon = ({ theme, ...rest }) => {
       width="16"
       height="16"
       viewBox="0 0 16 16"
+      fill="currentcolor"
       {...rest}
     >
       <polygon points="16 7 3.83 7 9.42 1.41 8 0 0 8 8 16 9.41 14.59 3.83 9 16 9" />

diff --git a/src/react/components/icons/CheckboxIcon.js b/src/react/components/icons/CheckboxIcon.js
@@ -11,6 +11,7 @@ const CheckboxIcon = (props) => {
       width="12"
       height="9"
       viewBox="0 0 12 9"
+      fill="currentcolor"
       {...rest}
     >
       <polygon
@@ -24,6 +25,7 @@ const CheckboxIcon = (props) => {
       width="18"
       height="14"
       viewBox="0 0 18 14"
+      fill="currentcolor"
       {...rest}
     >
       <polygon

diff --git a/src/react/components/icons/ChevronIcon.js b/src/react/components/icons/ChevronIcon.js
@@ -7,6 +7,7 @@ const ChevronIcon = (props) => {
       width="8"
       height="14"
       viewBox="0 0 12 20"
+      fill="currentcolor"
       {...props}
     >
       <path d="M11.518406,10.5648622 C11.4831857,10.6163453 11.4426714,10.6653692 11.3968592,10.7111814 L2.5584348,19.5496058 C1.9753444,20.1326962 1.03186648,20.1345946 0.44199608,19.5447242 C-0.14379032,18.9589377 -0.14922592,18.0146258 0.43711448,17.4282854 L7.87507783,9.9903221 L0.4431923,2.5584366 C-0.1398981,1.9753462 -0.1417965,1.0318683 0.448074,0.4419979 C1.0338604,-0.1437886 1.9781723,-0.1492241 2.56451268,0.4371163 L11.4029371,9.2755407 C11.7556117,9.6282153 11.7969345,10.1725307 11.518406,10.5648622 Z" />

diff --git a/src/react/components/icons/DeleteIcon.js b/src/react/components/icons/DeleteIcon.js
@@ -7,6 +7,7 @@ const DeleteIcon = (props) => {
       width="28"
       height="28"
       viewBox="0 0 28 28"
+      fill="currentcolor"
       {...props}
     >
       <path d="M14,0 C21.7319865,0 28,6.2680135 28,14 C28,21.7319865 21.7319865,28 14,28 C6.2680135,28 0,21.7319865 0,14 C0,6.2680135 6.2680135,0 14,0 Z M18.9393398,6.93933983 L14,11.8786797 L9.06066017,6.93933983 L6.93933983,9.06066017 L11.8786797,14 L6.93933983,18.9393398 L9.06066017,21.0606602 L14,16.1213203 L18.9393398,21.0606602 L21.0606602,18.9393398 L16.1213203,14 L21.0606602,9.06066017 L18.9393398,6.93933983 Z" />

diff --git a/src/react/components/icons/PreloaderIOS.js b/src/react/components/icons/PreloaderIOS.js
@@ -7,66 +7,38 @@ const PreloaderIOS = (props) => {
       width="20"
       height="20"
       viewBox="0 0 20 20"
+      fill="currentcolor"
       {...props}
     >
-      <g fillRule="evenodd" transform="translate(-.5)">
-        <rect width="2" height="7" x="9.5" rx="1" />
-        <rect width="2" height="7" x="9.5" y="13" opacity=".64" rx="1" />
-        <rect
-          width="2"
-          height="7"
-          x="16"
-          y="6.5"
-          opacity=".82"
-          rx="1"
-          transform="rotate(-90 17 10)"
-        />
-        <rect
-          width="2"
-          height="7"
-          x="3"
-          y="6.5"
-          opacity=".46"
-          rx="1"
-          transform="rotate(-90 4 10)"
-        />
-        <rect
-          width="2"
-          height="7"
-          x="4.904"
-          y="1.904"
-          opacity=".37"
-          rx="1"
-          transform="rotate(-45 5.904 5.404)"
-        />
-        <rect
-          width="2"
-          height="7"
-          x="14.096"
-          y="11.096"
-          opacity=".73"
-          rx="1"
-          transform="rotate(-45 15.096 14.596)"
-        />
-        <rect
-          width="2"
-          height="7"
-          x="14.096"
-          y="1.904"
-          opacity=".91"
-          rx="1"
-          transform="rotate(-135 15.096 5.404)"
-        />
-        <rect
-          width="2"
-          height="7"
-          x="4.904"
-          y="11.096"
-          opacity=".55"
-          rx="1"
-          transform="rotate(-135 5.904 14.596)"
-        />
-      </g>
+      <path d="M10,0 C10.5522847,0 11,0.44771525 11,1 L11,6 C11,6.55228475 10.5522847,7 10,7 C9.44771525,7 9,6.55228475 9,6 L9,1 C9,0.44771525 9.44771525,0 10,0 Z" />
+      <path
+        d="M10,13 C10.5522847,13 11,13.4477153 11,14 L11,19 C11,19.5522847 10.5522847,20 10,20 C9.44771525,20 9,19.5522847 9,19 L9,14 C9,13.4477153 9.44771525,13 10,13 Z"
+        opacity=".64"
+      />
+      <path
+        d="M13,10 C13,9.44771525 13.4477153,9 14,9 L19,9 C19.5522847,9 20,9.44771525 20,10 C20,10.5522847 19.5522847,11 19,11 L14,11 C13.4477153,11 13,10.5522847 13,10 Z"
+        opacity=".82"
+      />
+      <path
+        d="M-3.8285687e-16,10 C-3.8285687e-16,9.44771525 0.44771525,9 1,9 L6,9 C6.55228475,9 7,9.44771525 7,10 C7,10.5522847 6.55228475,11 6,11 L1,11 C0.44771525,11 -3.8285687e-16,10.5522847 -3.8285687e-16,10 Z"
+        opacity=".46"
+      />
+      <path
+        d="M2.92912627,2.92912627 C3.31965056,2.53860197 3.95281554,2.53860197 4.34333983,2.92912627 L7.87887373,6.46466017 C8.26939803,6.85518446 8.26939803,7.48834944 7.87887373,7.87887373 C7.48834944,8.26939803 6.85518446,8.26939803 6.46466017,7.87887373 L2.92912627,4.34333983 C2.53860197,3.95281554 2.53860197,3.31965056 2.92912627,2.92912627 Z"
+        opacity=".37"
+      />
+      <path
+        d="M12.1211263,12.1211263 C12.5116506,11.730602 13.1448155,11.730602 13.5353398,12.1211263 L17.0708737,15.6566602 C17.461398,16.0471845 17.461398,16.6803494 17.0708737,17.0708737 C16.6803494,17.461398 16.0471845,17.461398 15.6566602,17.0708737 L12.1211263,13.5353398 C11.730602,13.1448155 11.730602,12.5116506 12.1211263,12.1211263 Z"
+        opacity=".73"
+      />
+      <path
+        d="M12.1211263,7.87887373 C11.730602,7.48834944 11.730602,6.85518446 12.1211263,6.46466017 L15.6566602,2.92912627 C16.0471845,2.53860197 16.6803494,2.53860197 17.0708737,2.92912627 C17.461398,3.31965056 17.461398,3.95281554 17.0708737,4.34333983 L13.5353398,7.87887373 C13.1448155,8.26939803 12.5116506,8.26939803 12.1211263,7.87887373 Z"
+        opacity=".91"
+      />
+      <path
+        d="M2.92912627,17.0708737 C2.53860197,16.6803494 2.53860197,16.0471845 2.92912627,15.6566602 L6.46466017,12.1211263 C6.85518446,11.730602 7.48834944,11.730602 7.87887373,12.1211263 C8.26939803,12.5116506 8.26939803,13.1448155 7.87887373,13.5353398 L4.34333983,17.0708737 C3.95281554,17.461398 3.31965056,17.461398 2.92912627,17.0708737 Z"
+        opacity=".55"
+      />
     </svg>
   );
 };

diff --git a/src/react/components/icons/PreloaderMaterial.js b/src/react/components/icons/PreloaderMaterial.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 const PreloaderMaterial = (props) => {
   return (
-    <svg viewBox="0 0 36 36" {...props} fill="none">
+    <svg viewBox="0 0 36 36" {...props} fill="none" stroke="currentcolor">
       <circle cx="18" cy="18" r="16" />
     </svg>
   );

diff --git a/src/react/components/icons/RadioIcon.js b/src/react/components/icons/RadioIcon.js
@@ -9,6 +9,7 @@ const RadioIcon = (props) => {
       width="13"
       height="10"
       viewBox="0 0 13 10"
+      fill="currentcolor"
       {...rest}
     >
       <polygon