Default iconsClass to 'fa6'

Also update CDN links to latest version.

Author: jakezatecky

CHANGELOG.md

@@ -17,11 +17,11 @@
   * Replaced `toggle` key with `collapseNode` and `expandNode` to better reflect state (#275)
   * Will now merge any missing keys with the default language
 * `icons`: Setting a node icon to `null` will no longer render the wrapper element (#30)
+* `iconsClass`: Now defaults to `'fa6'` for Font Awesome 5/6 instead of Font Awesome 4
 
 #### Styling
 
 * Drop support for Less.js styles
-* The `iconsClass` property now defaults to `"fa5"` for Font Awesome 5/6 instead of Font Awesome 4
 * The `rct-options` and `rct-option` CSS classes are now `rct-actions` and `rct-action` respectively
 * The `rct-title` CSS class is now `rct-label`
 

examples/src/index.html

@@ -6,9 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#3498db">
     <meta name="description" content="React Checkbox Tree: A simple, yet elegant checkbox treeview for React.">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="./scss/style.scss">
 
     <!-- Google tag (gtag.js) -->

src/scss/react-checkbox-tree.scss

@@ -1,5 +1,6 @@
+$rct-icon-font-family: "Font Awesome 6 Free", "Font Awesome 5 Free",
+  "FontAwesome", sans-serif;
 $rct-icon-color: #33c !default;
-$rct-icon-font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
 $rct-label-hover: rgba($rct-icon-color, 0.1) !default;
 $rct-label-active: rgba($rct-icon-color, 0.15) !default;
 $rct-clickable-hover: rgba($rct-icon-color, 0.1) !default;
@@ -256,8 +257,9 @@ $rct-outline-offset: -2px !default;
   }
 }
 
-// Font Awesome 5 style
-.rct-icons-fa5 {
+// Font Awesome 5 and 6 styles
+.rct-icons-fa5,
+.rct-icons-fa6 {
   .rct-icon-expand-close::before {
     font-weight: 900;
     content: "\f054";