Prod ready

README.md

@@ -1,83 +1,77 @@
 # vue-fontawesome-autogen [![npm](https://img.shields.io/npm/v/@adambh/vue-fontawesome-autogen)](https://www.npmjs.com/package/@adambh/vue-fontawesome-autogen)
 
 > As per [demand](https://github.com/FortAwesome/vue-fontawesome/issues/233) from the Vue community using vue-fontawesome, this script was written to make managing imported fontawesome icons in VueJS uncumbersome. It implements simple parsing techniques that would generate a file that imports all of your used icons without having to manage them every single time.
-> 
 
 ## Installation
-``` s
+
+```s
 $ npm install --save-dev @adambh/vue-fontawesome-autogen
 ```
 
 ## Requirements
+
 - Make sure your source code exists within the "src" folder of the project's main directory.
 - Make sure you have installed vue-fontawesome dependencies, if not, please check https://github.com/FortAwesome/vue-fontawesome#installation
 
 ## Setting up
 
 Add these definitions to your entry point such as your "main.js" file
-``` js
+
+```js
 // Import autogenerated fontawesome imports
 import "@/plugins/fontawesome-autogen.js";
 
-// Import shim component for fontawesome
-import Fa from "@adambh/vue-fontawesome-autogen/Fa.vue";
-Vue.component("fa", Fa);
+// Import regular fontawesome component
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+Vue.component("fa", FontAwesomeIcon);
 ```
 
 ## Usage
-The usage is almost identical to how you would noramlly use with vue-fontawesome but instead, it alleviates the headache of having to deal with the arrays drama when wanting to use a different icon type, such as:
-
-```html
-<font-awesome-icon :icon="['far', 'video']" />
-```
 
-instead, you would just have to write the following, which is much more practical:
+The usage is almost identical to how you would normally use vue-fontawesome except that
+[**you can't use the Shorthand that assumes a prefix of "fas"**](https://github.com/FortAwesome/vue-fontawesome#shorthand-that-assumes-a-prefix-of-fas), such as:
 
 ```html
-<fa icon="far-video" />
+<fa icon="video" />
 ```
 
-## Examples
-Basic usage:
-``` html
-<fa icon="far-video" />
-```
-
-There's also support for duotone's primary and secondary color attributes, for example:
-``` html
-<fa icon="fad-video" primaryColor="red" secondaryColor="white" /> 
-```
+instead, you would just have to write the following:
 
-You can also use the advanced attributes, as you would normally with vue-fontawesome, for example:
-``` html
-<fa icon="fas-check" transform="shrink-6" :style="{ color: 'white' }" />
+```html
+<fa :icon="['fas', 'video']" />
 ```
 
 ## Generating icon imports
-There's basically two ways to do this, either manually or automatically.
 
-**Note**: This tool will prioritize the pro versions of the installed svg icons set, so if for instance you have both ``free-solid-svg-icons`` and ``pro-solid-svg-icons``, then the tool will use the pro one, otherwise the free one.
+There's basically two ways to do this, either manually or automatically.
 
+**Note**: This tool will prioritize the pro versions of the installed svg icons set, so if for instance you have both `free-solid-svg-icons` and `pro-solid-svg-icons`, then the tool will use the pro one, otherwise the free one.
 
 ### Manually
+
 Executing the following npm command would run the script:
-``` sh
+
+```sh
 $ npm explore @adambh/vue-fontawesome-autogen -- npm run gen
 ```
+
 And you should see the success output message such as:
+
 ```
 - Fontawesome treeshaking list generated. (took 10 ms)
 ```
 
-
 ### Automatically upon build-time
+
 This is achieved by hooking into webhook's events, so an additonal library is required, in our case, we'll be using [before-build-webpack](https://github.com/artemdudkin/before-build-webpack)
-``` sh
+
+```sh
 $ npm install --save-dev before-build-webpack
 ```
 
 Configuring webpack, via vue.config.js or alternative, you can check the example provided.
-``` js
+
+```js
 var WebpackBeforeBuildPlugin = require('before-build-webpack');
 // ...
   module: {
@@ -86,35 +80,98 @@ var WebpackBeforeBuildPlugin = require('before-build-webpack');
             const {execSync} = require('child_process');
             console.log(execSync('npm explore @adambh/vue-fontawesome-autogen -- npm run gen').toString());
             callback();
-        }, ['run'])
+        }, ['run', 'watchRun'])
     ]
   },
 // ...
 ```
 
 then build the project as you normally would
-``` sh
+
+```sh
 $ npm run build
 ```
 
 The output of build should include the following line
+
 ```
 - Fontawesome treeshaking list generated. (took 10 ms)
 ```
 
 ## Result
+
 Once the script has finished executing, it should produce a file at **src/plugins/fontawesome-autogen.js** which its content would look like the following:
+
 ```js
-// Auto generated @ Thu Oct 22 2020 19:45:52 GMT+0300 (Eastern European Summer Time)
+// Auto generated by vue-fontawesome-autogen
 
-//fas
-import { faCircle as fasCircle, faAngleDown as fasAngleDown, faBars as fasBars } from '@fortawesome/pro-solid-svg-icons';
+// fas
+import {
+  faCircle as fasCircle,
+  faAngleDown as fasAngleDown,
+  faBars as fasBars
+} from "@fortawesome/pro-solid-svg-icons";
 
-//far
-import { faSignOutAlt as farSignOutAlt, faComments as farComments } from '@fortawesome/pro-regular-svg-icons';
+// far
+import {
+  faSignOutAlt as farSignOutAlt,
+  faComments as farComments
+} from "@fortawesome/pro-regular-svg-icons";
 
 import { library } from "@fortawesome/fontawesome-svg-core";
 library.add(fasCircle, fasAngleDown, farSignOutAlt, fasBars, farComments);
 ```
 
 ### If you're confused, you can check the [example project](https://github.com/GTANAdam/vue-fontawesome-autogen/tree/main/example) above.
+
+## Customization
+
+Sometimes you may want to customize the pattern used to match font awesome icons in your projet.
+It may happens if you have written a wrapper around the regular `vue-fontawesome` provided component (aka `FontAwesomeIcon`).
+
+Wrapper example (`Fa.vue`):
+
+```html
+<template>
+  <FontAwesomeIcon :icon="faIcon" v-bind="$attrs" v-on="$listeners" />
+</template>
+
+<script>
+  export default {
+    props: { icon: { type: String, required: true } },
+    computed: {
+      faIcon: ({ icon }) => {
+        const [, style, name] = icon.match(/(fa[a-z])-([a-z-]+)/);
+        return [style, name];
+      }
+    }
+  };
+</script>
+```
+
+In that situation, a font awesome icon will looks like `<fa icon="fas-check" />` (html) or `const icon = 'fas-check'` (js).
+To handle that custom syntaxe, you can pass a custom pattern as env variable like this:
+
+```sh
+pattern="['\"](fa[a-z])-([a-z-]+)['\"]" npm explore @adambh/vue-fontawesome-autogen -- npm run gen
+```
+
+or (for the automated version):
+
+```js
+var WebpackBeforeBuildPlugin = require('before-build-webpack');
+// ...
+  module: {
+    plugins: [
+        new WebpackBeforeBuildPlugin(function(stats, callback) {
+            const {execSync} = require('child_process');
+            console.log(execSync(
+              'npm explore @adambh/vue-fontawesome-autogen -- npm run gen',
+              { env: { pattern: `['"](fa[a-z])-([a-z-]+)['"]` } }
+            ).toString());
+            callback();
+        }, ['run', 'watchRun'])
+    ]
+  },
+// ...
+```

example/src/App.vue

@@ -1,14 +1,9 @@
 <template>
   <div id="app">
-    <fa icon="fas-user-secret" />
-
-    <!-- Duotone params are supported if you have pro-duotone-svg-icons -->
-    <!-- <fa icon="fad-user-secret" primaryColor="blue" secondaryColor="white" /> -->
+    <fa :icon="['fas', 'user-secret']" />
   </div>
 </template>
 
 <script>
-export default {
-  name: 'App'
-}
-</script>
+export default { name: "App" };
+</script>

example/src/main.js

@@ -1,15 +1,15 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from "vue";
+import App from "./App.vue";
 
 // Import autogenerated fontawesome imports
-import "@/plugins/fontawesome-autogen.js"
+import "@/plugins/fontawesome-autogen.js";
 
-// Import fontawesome shim component
-import Fa from "@adambh/vue-fontawesome-autogen/Fa.vue";
-Vue.component("fa", Fa);
+// Import regular fontawesome component
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+Vue.component("fa", FontAwesomeIcon);
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
   render: h => h(App)
-}).$mount("#app");
+}).$mount("#app");