From d31fcb590bcfa3c5b8886a1d7bc75f5a01a608a6 Mon Sep 17 00:00:00 2001
From: Maxim Molochkov <klaseca@gmail.com>
Date: Thu, 7 Jul 2022 00:09:25 +0400
Subject: [PATCH] fix(CIcon): fix class order and incorrect class name, update
 docs

---
 packages/coreui-icons-react/README.md     | 13 ++++++++++++
 packages/coreui-icons-react/src/CIcon.css | 24 +++++++++++------------
 packages/coreui-icons-react/src/CIcon.tsx | 10 +++-------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/coreui-icons-react/README.md b/packages/coreui-icons-react/README.md
index aaef2b1b..bbb05262 100644
--- a/packages/coreui-icons-react/README.md
+++ b/packages/coreui-icons-react/README.md
@@ -74,6 +74,19 @@ render() {
 ...
 ```
 
+## Stylesheets
+
+### Using `@coreui/icons-react` with `@coreui/react`
+
+Styles for icon included in `@coreui/react`, see [instructions](https://coreui.io/react/docs/getting-started/introduction/#stylesheets)
+
+### Using only `@coreui/icons-react`
+
+Import css in your app's entry file:
+
+```jsx
+import '@coreui/icons-react/dist/index.css';
+```
 
 ## API
 
diff --git a/packages/coreui-icons-react/src/CIcon.css b/packages/coreui-icons-react/src/CIcon.css
index 1ce713d7..9a981b86 100644
--- a/packages/coreui-icons-react/src/CIcon.css
+++ b/packages/coreui-icons-react/src/CIcon.css
@@ -5,73 +5,73 @@
   fill: currentColor;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size) {
+.icon:not(.icon-custom):not(.icon-custom-size) {
   width: 1rem;
   height: 1rem;
   font-size: 1rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-xxl {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-xxl {
   width: 2rem;
   height: 2rem;
   font-size: 2rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-3xl {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-3xl {
   width: 3rem;
   height: 3rem;
   font-size: 3rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-4xl {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-4xl {
   width: 4rem;
   height: 4rem;
   font-size: 4rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-5xl {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-5xl {
   width: 5rem;
   height: 5rem;
   font-size: 5rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-6xl {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-6xl {
   width: 6rem;
   height: 6rem;
   font-size: 6rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-7xl {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-7xl {
   width: 7rem;
   height: 7rem;
   font-size: 7rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-8xl {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-8xl {
   width: 8rem;
   height: 8rem;
   font-size: 8rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-9xl {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-9xl {
   width: 9rem;
   height: 9rem;
   font-size: 9rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-xl {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-xl {
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1.5rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-lg {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-lg {
   width: 1.25rem;
   height: 1.25rem;
   font-size: 1.25rem;
 }
 
-.icon:not(.icon-c-s):not(.icon-custom-size).icon-sm {
+.icon:not(.icon-custom):not(.icon-custom-size).icon-sm {
   width: 0.875rem;
   height: 0.875rem;
   font-size: 0.875rem;
diff --git a/packages/coreui-icons-react/src/CIcon.tsx b/packages/coreui-icons-react/src/CIcon.tsx
index 5c6cb17b..0dba2a82 100644
--- a/packages/coreui-icons-react/src/CIcon.tsx
+++ b/packages/coreui-icons-react/src/CIcon.tsx
@@ -119,13 +119,9 @@ export const CIcon = forwardRef<SVGSVGElement, CIconProps>(
       return Array.isArray(code) ? code[1] || code[0] : code
     }, [change])
 
-    const scale = (() => {
-      return Array.isArray(code) && code.length > 1 ? code[0] : '64 64'
-    })()
+    const scale = Array.isArray(code) && code.length > 1 ? code[0] : '64 64'
 
-    const viewBox = (() => {
-      return rest['viewBox'] || `0 0 ${scale}`
-    })()
+    const viewBox = rest['viewBox'] || `0 0 ${scale}`
 
     // render
 
@@ -134,8 +130,8 @@ export const CIcon = forwardRef<SVGSVGElement, CIconProps>(
       : classNames(
           'icon',
           {
-            [`icon-${size}`]: size,
             [`icon-custom-size`]: height || width,
+            [`icon-${size}`]: size,
           },
           className,
         )