Merge pull request #395 from sumocoders/526-cherry-pick-icons

Cherry-pick font awesome icons to reduce js file size

Author: tijsverkoyen

package-lock.json

@@ -11,6 +11,10 @@
     "@babel/preset-env": "^7.14.5",
     "@fancyapps/fancybox": "^3.4.2",
     "@fortawesome/fontawesome-free": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@popperjs/core": "^2.6.0",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^8.2.2",

package.json

@@ -141,6 +141,7 @@ public function __construct(KernelInterface $kernel)
         $this->addJS('/src/Frontend/Core/Js/frontend.js', true, true, Priority::core());
         // @custom for SumoCoders
         $this->addJS('/src/Frontend/Core/bundle.js', false, true, Priority::core());
+        $this->addJS('/src/Frontend/Core/icons.js', false, true, Priority::core());
     }
 
     /**

src/Frontend/Core/Header/Header.php

@@ -0,0 +1,17 @@
+import { library, dom } from '@fortawesome/fontawesome-svg-core'
+
+// Select icons to import from the corresponding library
+// Solid icons
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+// Regular icons
+// Import { faEnvelope } from '@fortawesome/free-regular-svg-icons'
+
+// Brand icons
+// Import { faFacebook } from '@fortawesome/free-brands-svg-icons'
+
+// Add icons to the library to make them available in the frontend
+library.add(faFilter)
+
+dom.i2svg()
+dom.watch()

src/Frontend/Themes/Bootstrap/src/Js/Icons.js

@@ -1,6 +1,5 @@
 // /* External library imports */
 import * as bootstrap from 'bootstrap5/dist/js/bootstrap.js'
-import '@fortawesome/fontawesome-free/js/all'
 // import '@fancyapps/fancybox/dist/jquery.fancybox'
 // /* Utilities imports */
 import { ScrollTo } from './Utilities/ScrollTo'

src/Frontend/Themes/Bootstrap/src/Js/Index.js

@@ -1,27 +1,37 @@
-const path = require("path");
+const path = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const CopyPlugin = require("copy-webpack-plugin")
+const CopyPlugin = require('copy-webpack-plugin')
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 const PackageJson = require('./package.json')
 const theme = PackageJson.theme
 
 module.exports = {
   entry: {
+    bundle: [
+      `./src/Frontend/Themes/${theme}/src/Js/Index.js`
+    ],
+    icons: [
+      `./src/Frontend/Themes/${theme}/src/Js/Icons.js`
+    ],
     screen: [
-      `./src/Frontend/Themes/${theme}/src/Js/Index.js`,
       `./src/Frontend/Themes/${theme}/src/Layout/Sass/screen.scss`
+    ],
+    editor_content: [
+      `./src/Frontend/Themes/${theme}/src/Layout/Sass/editor_content.scss`
     ]
   },
   output: {
-    filename: 'bundle.js',
+    chunkFilename: (pathData) => {
+      return pathData.chunk.name === 'bundle' ? 'bundle.js' : '[name].js'
+    },
     path: path.resolve(__dirname, `src/Frontend/Themes/${theme}/Core`),
-    clean: true,
+    clean: true
   },
-  mode: "development",
+  mode: 'development',
   externals: ['jquery'],
   watchOptions: {
     aggregateTimeout: 600,
-    ignored: /node_modules/,
+    ignored: /node_modules/
   },
   plugins: [
     new MiniCssExtractPlugin({
@@ -30,16 +40,16 @@ module.exports = {
     new CopyPlugin({
       patterns: [
         {
-          from: "./Layout/Templates/**/*",
-          context: path.resolve(__dirname, "src", "Frontend", "Themes", theme, "src"),
+          from: './Layout/Templates/**/*',
+          context: path.resolve(__dirname, 'src', 'Frontend', 'Themes', theme, 'src')
         },
         {
-          from: "./Layout/Images/**/*",
-          context: path.resolve(__dirname, "src", "Frontend", "Themes", theme, "src"),
+          from: './Layout/Images/**/*',
+          context: path.resolve(__dirname, 'src', 'Frontend', 'Themes', theme, 'src')
         }
-      ],
+      ]
     }),
-    // This setup assumes symfony server is running on https://127.0.0.1:8000. If that is not the case, edit "proxy" below.
+    // This setup assumes symfony server is running on https://127.0.0.1:8000. If that is not the case, edit 'proxy' below.
     new BrowserSyncPlugin({
       host: '127.0.0.1',
       port: 3000,
@@ -72,7 +82,7 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              sourceMap: true,
+              sourceMap: true
             }
           }
         ]
@@ -85,9 +95,9 @@ module.exports = {
         test: /\.(woff(2)?|ttf|svg|eot)$/,
         type: 'asset/resource',
         generator: {
-          filename: './Layout/Fonts/[name][ext]',
-        },
-      },
+          filename: './Layout/Fonts/[name][ext]'
+        }
+      }
     ]
   }
 }