Add Font Awesome support (#6)

README.md

@@ -1,7 +1,13 @@
 # Heroicon Nova Field
 
-A Laravel Nova Field for managing icons. [Heroicons](https://heroicons.com/) used by default.
-Custom sets of icons can be registered and used with or instead heroicons, each icon can be changed via editor. Icon saved as svg html tag into db.
+A Laravel Nova Field for managing icons. [Heroicons](https://heroicons.com/) and free [Font Awesome](https://fontawesome.com/) supported out of the box,
+pro version of Font Awesome can be registered as custom set of icons.
+
+Custom sets of icons can be registered globally for each field or locally for concrete field instanse and used with or instead default sets.
+
+Each icon can be changed via editor.
+
+Icon saved as svg html tag into db.
 
 ## Installation:
 
@@ -20,14 +26,23 @@ use AlexAzartsev\Heroicon\Heroicon;
 
 Heroicon::make('Icon');
 ```
+### Default icon sets available:
+
+| Name       | Label                | Icons                                                                                      |
+|------------|----------------------|--------------------------------------------------------------------------------------------|
+| solid      | Heroicons solid      | [Heroicons solid](https://heroicons.com/)                                                  |
+| outline    | Heroicons outline    | [Heroicons outline](https://heroicons.com/)                                                |
+| fa-brands  | Font Awesome brands  | [Font Awesome brands](https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=brands&m=free)   |
+| fa-solid   | Font Awesome solid   | [Font Awesome solid](https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free)     |
+| fa-regular | Font Awesome regular | [Font Awesome regular](https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=regular&m=free) |
+
 
 To use custom or customize existing icon click on `Edit` button and just edit svg code of selected icon:
 
-<img src="screenshots/custom_icon.gif" width="800">
+<img src="screenshots/heroicon_demo.gif" width="800">
 
-To register custom set of icons use global or local configuration discribed below:
 
-<img src="screenshots/custom_set.png" width="800">
+To register custom set of icons use global or local configuration discribed below:
 
 ## Configuration:
 
@@ -52,8 +67,8 @@ class NovaServiceProvider extends NovaApplicationServiceProvider
         // 'custom' icon set will be available for every Heroicon in your app
         Heroicon::registerGlobalIconSet('custom', 'Custom Icons', resource_path('img/icons'));
         // to pick default icon sets that will be available on field all over app use this:
-        // default sets available: 'solid','outline'
-        Heroicon::defaultIconSets(['solid', 'custom']);
+        // default sets available: 'solid', 'outline', 'fa-brands', 'fa-regular', 'fa-solid'
+        Heroicon::defaultIconSets(['solid', 'fa-brands', 'custom']);
         // to make svg editor disabled by default for every field use this:
         Heroicon::defaultEditorEnable(false);
 
@@ -88,6 +103,9 @@ Heroicon::make('Icon')->only(['custom', 'solid']);
 //for default sets you can use these methods:
 Heroicon::make('Icon')->onlySolid();
 Heroicon::make('Icon')->onlyOutline();
+Heroicon::make('Icon')->onlyFaBrands();
+Heroicon::make('Icon')->onlyFaSolid();
+Heroicon::make('Icon')->onlyFaRegular();
 ```
 
 ## Support:

generate-icons.js

@@ -1,28 +1,34 @@
 const fs = require('fs');
 const path = require('path');
 
-const iconsfolders = ['./resources/icons/outline', './resources/icons/solid'];
+const iconsfolders = [
+  { type: 'outline', path: './resources/icons/heroicons/outline' },
+  { type: 'solid', path: './resources/icons/heroicons/solid' },
+  { type: 'fa-brands', path: './resources/icons/fa/free/brands' },
+  { type: 'fa-regular', path: './resources/icons/fa/free/regular' },
+  { type: 'fa-solid', path: './resources/icons/fa/free/solid' },
+];
 let files = [];
 iconsfolders.forEach((folder) => {
-  const folderFiles = fs.readdirSync(folder).map((fileName) => path.join(folder, fileName));
+  const { type } = folder;
+  const folderFiles = fs.readdirSync(folder.path).map((fileName) => ({
+    type,
+    path: path.join(folder.path, fileName),
+  }));
   files = [...folderFiles, ...files];
 });
 // eslint-disable-next-line no-shadow
-const data = files.map((path) => {
-  const type = path.split('/').reverse()[1];
-  const name = path.split('/').reverse()[0].replace('.svg', '');
-  const content = fs.readFileSync(path, 'utf-8');
+const data = files.map((file) => {
+  const { type } = file;
+  const name = file.path.split('/').reverse()[0].replace('.svg', '');
+  const content = fs.readFileSync(file.path, 'utf-8').replace(/<!--(.*?)-->/gm, '');
   return { type, name, content };
 });
-fs.writeFile(
-  './resources/js/icons.js',
-  `export const icons = ${JSON.stringify(data)}`,
-  (err) => {
-    if (err) {
-      // eslint-disable-next-line no-console
-      console.error('Crap happens');
-    }
-  },
-);
+fs.writeFile('./resources/js/icons.js', `export const icons = ${JSON.stringify(data)}`, (err) => {
+  if (err) {
+    // eslint-disable-next-line no-console
+    console.error('Crap happens');
+  }
+});
 // eslint-disable-next-line no-console
 console.log('\x1b[32m./resources/js/icons.js successfully generated.\x1b[0m');