Major build improvements (#1668)

* Major build improvements * Cleanup and fix path * chore: apply suggestions from code review Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com> * Remove `selenium` from the NPM dependencies * Revert `nano` icon changes * Use quote notes * Update * chore: apply suggestions from code review Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com> * Snailedlt/improve build changes (#187) * Make README more readable * move logic from index.html to script.js * fix devicon min css in head * Fix build script missing token error * Add more print statements to local build script * Change from ng-href to href in code view * Minor readme improvements --------- Co-authored-by: David Leal <halfpacho@gmail.com> --------- Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>
2025-01-16 21:18:13 +01:00 · 2023-04-21 08:46:43 -06:00 · 2023-04-21 08:46:43 -06:00 · b6e387d942
commit b6e387d942
parent c97a0bb00a
21 changed files with 2403 additions and 2093 deletions
--- a/.github/scripts/build_assets/arg_getters.py
+++ b/.github/scripts/build_assets/arg_getters.py
@ -2,7 +2,7 @@ from argparse import ArgumentParser
 from build_assets.PathResolverAction import PathResolverAction


-def get_selenium_runner_args(peek_mode=False):
+def get_selenium_runner_args(has_token=True, peek_mode=False):
    """
    Get the commandline arguments for the icomoon_peek.py and 
    icomoon_build.py.
@ -36,7 +36,7 @@ def get_selenium_runner_args(peek_mode=False):
    if peek_mode:
        parser.add_argument("pr_title",
                            help="The title of the PR that we are peeking at")
-    else:
+    if has_token != False:
        parser.add_argument("token",
                            help="The GitHub token to access the GitHub REST API.")

--- a/.github/scripts/build_assets/geckodriver-v0.30.0-win64/geckodriver.exe
+++ b/.github/scripts/build_assets/geckodriver-v0.30.0-win64/geckodriver.exe
--- a/.github/scripts/build_assets/geckodriver-v0.32.2-win64/README.md
+++ b/.github/scripts/build_assets/geckodriver-v0.32.2-win64/README.md
--- a/.github/scripts/build_assets/geckodriver-v0.32.2-win64/geckodriver.exe
+++ b/.github/scripts/build_assets/geckodriver-v0.32.2-win64/geckodriver.exe
--- a/.github/scripts/icomoon_build_githubless.py
+++ b/.github/scripts/icomoon_build_githubless.py
@ -0,0 +1,145 @@
+from pathlib import Path
+import sys
+from selenium.common.exceptions import TimeoutException
+import re
+import subprocess
+import json
+from typing import List, Dict
+from io import FileIO
+
+# pycharm complains that build_assets is an unresolved ref
+# don't worry about it, the script still runs
+from build_assets.selenium_runner.BuildSeleniumRunner import BuildSeleniumRunner
+from build_assets import filehandler, arg_getters, util, api_handler
+
+def main():
+    """
+    Build the icons using Icomoon. Also optimize the svgs.
+    """
+    runner = None
+    logfile = open("log.txt", "w")
+    try:
+        args = arg_getters.get_selenium_runner_args(has_token=False)
+        new_icons = get_icons_for_building(args.icomoon_json_path, args.devicon_json_path, logfile)
+        if len(new_icons) == 0:
+            sys.exit("No files need to be uploaded. Ending script...")
+
+        print(f"There are {len(new_icons)} icons to be build. Here are they:", *new_icons, sep = "\n", file=logfile)
+
+        print("Begin optimizing files...", file=logfile)
+        optimize_svgs(new_icons, args.icons_folder_path, logfile=logfile)
+
+        print("Updating the icomoon json...", file=logfile)
+        update_icomoon_json(new_icons, args.icomoon_json_path, logfile)
+
+        print("Start the building icons process...", file=logfile)
+        icon_svgs = filehandler.get_svgs_paths(
+            new_icons, args.icons_folder_path, icon_versions_only=True)
+        zip_name = "devicon-v1.0.zip"
+        zip_path = Path(args.download_path, zip_name)
+        screenshot_folder = filehandler.create_screenshot_folder("./") 
+
+        runner = BuildSeleniumRunner(args.download_path,
+            args.geckodriver_path, args.headless, log_output=logfile)
+        print("Building icons...", file=logfile)
+        runner.build_icons(args.icomoon_json_path, zip_path,
+            icon_svgs, screenshot_folder)
+
+        print("Extracting files...", file=logfile)
+        filehandler.extract_files(str(zip_path), args.download_path, logfile)
+        print("Renaming extracted files...", file=logfile)
+        filehandler.rename_extracted_files(args.download_path, logfile)
+
+        print("Task completed!", file=logfile)
+    except TimeoutException as e:
+        util.exit_with_err(Exception("Selenium Time Out Error: \n" + str(e)), logfile)
+    except Exception as e:
+        util.exit_with_err(e, logfile)
+    finally:
+        print("Exiting", file=logfile)
+        if runner is not None:
+            runner.close() 
+        logfile.close()
+
+
+def get_icons_for_building(icomoon_json_path: str, devicon_json_path: str, logfile: FileIO):
+    """
+    Get the icons for building.
+    :param icomoon_json_path - the path to the `icomoon.json`.
+    :param devicon_json_path - the path to the `devicon.json`.
+    :param logfile.
+    :return a list of dict containing info on the icons. These are 
+    from the `devicon.json`.
+    """
+
+    new_icons = []
+
+    # get any icons that might not have been found by the API
+    # sometimes happen due to the PR being opened before the latest build release
+    new_icons_from_devicon_json = filehandler.find_new_icons_in_devicon_json(
+        devicon_json_path, icomoon_json_path)
+
+    for icon in new_icons_from_devicon_json:
+        if icon not in new_icons:
+            new_icons.append(icon)
+
+    return new_icons
+
+
+def optimize_svgs(new_icons: List[str], icons_folder_path: str, logfile: FileIO):
+    """
+    Optimize the newly added svgs. This is done in batches
+    since the command line has a limit on characters allowed.
+    :param new_icons - the new icons that need to be optimized.
+    :param icons_folder_path - the path to the /icons folder.
+    :param logfile - the file obj to store logging info in.
+    """
+    svgs = filehandler.get_svgs_paths(new_icons, icons_folder_path, icon_versions_only=False)
+    start = 0
+    step = 10
+    for i in range(start, len(svgs), step):
+        batch = svgs[i:i + step]
+        print(f"Optimizing these files\n{batch}", file=logfile)
+        subprocess.run(["npm", "run", "optimize-svg", "--", f"--svgFiles={json.dumps(batch)}"], shell=True)
+
+
+def update_icomoon_json(new_icons: List[str], icomoon_json_path: str, logfile: FileIO):
+    """
+    Update the `icomoon.json` if it contains any icons
+    that needed to be updated. This will remove the icons
+    from the `icomoon.json` so the build script will reupload
+    it later.
+    """
+    icomoon_json = filehandler.get_json_file_content(icomoon_json_path)
+    cur_len = len(icomoon_json["icons"])
+    messages = []
+
+    wrapper_function = lambda icomoon_icon : find_icomoon_icon_not_in_new_icons(
+        icomoon_icon, new_icons, messages)
+    icons_to_keep = filter(wrapper_function, icomoon_json["icons"])
+    icomoon_json["icons"] = list(icons_to_keep)
+
+    new_len = len(icomoon_json["icons"])
+    print(f"Update completed. Removed {cur_len - new_len} icons:", *messages, sep='\n', file=logfile)
+    filehandler.write_to_file(icomoon_json_path, json.dumps(icomoon_json))
+  
+
+def find_icomoon_icon_not_in_new_icons(icomoon_icon: Dict, new_icons: List, messages: List):
+    """
+    Find all the icomoon icons that are not listed in the new icons.
+    This also add logging for which icons were removed.
+    :param icomoon_icon - a dict object from the icomoon.json's `icons` attribute.
+    :param new_icons - a list of new icons. Each element is an object from the `devicon.json`.
+    :param messages - an empty list where the function can attach logging on which 
+    icon were removed.
+    """
+    for new_icon in new_icons:
+        pattern = re.compile(f"^{new_icon['name']}-")
+        if pattern.search(icomoon_icon["properties"]["name"]):
+            message = f"-'{icomoon_icon['properties']['name']}' cause it matches '{new_icon['name']}'"
+            messages.append(message)
+            return False
+    return True
+
+if __name__ == "__main__":
+    main()
--- a/.github/workflows/peek_icons.yml
+++ b/.github/workflows/peek_icons.yml
@ -41,7 +41,7 @@ jobs:
        shell: cmd
        run: >
          python ./.github/scripts/icomoon_peek.py 
-          ./.github/scripts/build_assets/geckodriver-v0.30.0-win64/geckodriver.exe ./icomoon.json 
+          ./.github/scripts/build_assets/geckodriver-v0.32.2-win64/geckodriver.exe ./icomoon.json 
          ./devicon.json ./icons ./ --headless "%PR_TITLE%"

      - name: Upload the err messages (created by icomoon_peek.py)
--- a/.gitpod.dockerfile
+++ b/.gitpod.dockerfile
@ -0,0 +1,8 @@
+FROM gitpod/workspace-full-vnc
+
+RUN sudo apt-get update \
+    && sudo apt-get install -y \
+    firefox \
+    gulp \
+    && python -m pip install --upgrade pip \
+    && pip install selenium==4.1.0 requests==2.25.1
--- a/.gitpod.yml
+++ b/.gitpod.yml
@ -0,0 +1,22 @@
+image:
+  file: .gitpod.dockerfile
+
+tasks:
+  - name: Setup & build
+    init: chmod +x ./.github/scripts/build_assets/geckodriver-v0.32.2-linux64/geckodriver
+    command: npm install && npm run build-icons
+  - name: Build CSS & run web server
+    init: npm run build-css && npm run dev
+
+github:
+  prebuilds:
+    addBadge: true
+    addComment: false
+    addCheck: true
+    master: true
+    branches: true
+    pullRequestsFromForks: true
+
+ports:
+  - port: 8000
+    onOpen: open-preview
--- a/README.md
+++ b/README.md
@ -57,14 +57,14 @@
    <li><a href="#discord-community">Discord Community</a></li>
    <li><a href="#develop-vs-master"><code>develop</code> vs <code>master</code></a></li>
    <li><a href="#stale-prs">Stale Pull Requests</a></li>
-    <li><a href="#build-yourself">Go Build Yourself</a></li>
+    <li><a href="#building-devicon">Building Devicon</a></li>
 </ol>

 <h2 id="about">About the Project</h2>
 <p>
    Devicon aims to gather all logos representing development languages and tools.
    Each icon comes in several versions: font/SVG, original/plain/line, colored/not colored, wordmark/no wordmark.
-    Devicon has 150+ icons. And it's growing!<br />
+    Devicon has 150+ icons. And it's growing!<br/>
 </p>
 <p>
    See the <a href="/devicon.json">devicon.json</a> or <a href="https://devicon.dev">our website</a> for complete and up to date reference of
@ -81,15 +81,14 @@
    imply endorsement. Usage of these logos should be done according to the company/brand/service's brand policy.
 </sub>

-
 <h2 id="getting-started">Getting Started</h2>
 <p>
-    For a super fast setup go check <a href="https://devicon.dev">devicon.dev</a>.<br />
-    You can either use the <a href="#getting-started-svg">raw SVG</a> icons or our <a href="#getting-started-font">devicon font</a> (which is 
-    also available via CDN).
+    For a super fast setup, go check <a href="https://devicon.dev">devicon.dev</a>.<br />
+    You can either use the <a href="#getting-started-svg">raw SVG</a> icons, our <a href="#getting-started-font">Devicon font</a> (which is
+    also available via <a href=https://www.jsdelivr.com/package/npm/devicon>CDN</a>), or by <a href=#building-devicon>building Devicon</a> yourself.
 </p>

-<h4 id="getting-started-font">Use the <code>devicon</code> font (recommended)</h4>
+<h3 id="getting-started-font">Use the <code>devicon</code> font (recommended)</h3>
 <p>
    You can install devicon as a dependency to your project either with <code>npm</code> or <code>yarn</code>:
 </p>
@ -134,7 +133,7 @@ yarn add devicon
    An alternate way to use <code>devicon</code> is by copy/pasting the raw SVG code
    to your project.
 </p>
-<h4 id="getting-started-svg">Copy/paste SVG code (from the <a href="https://github.com/devicons/devicon/tree/master/icons">SVG folder</a> or the <a href="https://devicon.dev">project page</a>):</h4>
+<h3 id="getting-started-svg">Copy/paste SVG code (from the <a href="https://github.com/devicons/devicon/tree/master/icons">SVG folder</a> or the <a href="https://devicon.dev">project page</a>):</h3>

 ```html
 <!--  for devicon plain version -->
@ -157,7 +156,7 @@ Add the following CSS rules in your stylesheet:
 <h4>You can also use the <code>img</code> tag and reference an SVG directly from the repository:</h4>

 ```html
-<img src='https://cdn.jsdelivr.net/gh/devicons/devicon/icons/devicon/devicon-original.svg'>
+<img src='https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/devicon/devicon-original.svg'>
 ```

 <h2 id="request-icon">Requesting an icon</h2>
@ -185,7 +184,8 @@ All official releases shall be in <code>master</code>. Any updates in between (i
        Latest SVGs (non-optimized).
    </li>
    <li>
-        No icons for the latest SVGs. These will be build at every release.
+        No icons for the latest SVGs. These will be built at every release.<br>
+        Can be built manually. See <a href="#building-devicon"><i>Building Devicon</i></a>.
    </li>
    <li>
        Experimental changes.
@ -194,10 +194,10 @@ All official releases shall be in <code>master</code>. Any updates in between (i
 <b><code>master</code> contains:</b>
 <ul>
    <li>
-        Latest official release, which contains the SVGs and icons.
+        Latest official release, which contains all the SVGs and icons.
    </li>
    <li>
-        Official tested changes.
+        Official, tested changes.
    </li>
 </ul>

@ -206,34 +206,110 @@ All official releases shall be in <code>master</code>. Any updates in between (i
 After a pull request has been open for over 30 days with no activity or response from the author, it'll be automatically marked as stale. We might fork your changes and merge the changes ourselves. Since GitHub tracks contributions by commits, you will be credited.
 </p>

-<h2 id="build-yourself">Go Build Yourself</h2>
+<h2 id="building-devicon">Building Devicon</h2>
 <p>
-    Feel free to follow these steps when you want to build the font
-    by yourself.
+Follow these steps to build the website and icons either locally or using <a href=https://www.gitpod.io>Gitpod.io</a>.
 </p>
-<h5>Prerequisites</h5>
-<p>Install <code>gulp</code> (and <code>gulp</code> plugins)</p>
+
+<h3>Table of contents</h3>
+<ol>
+    <li><a href="#using-gitpod">Using Gitpod to build</a></li>
+    <li><a href="#local-installation">Local Installation</a></li>
+    <ol>
+      <li><a href="#install-dependencies">Install dependencies</a></li>
+      <li><a href="#building-icons">Build the icons</a></li>
+      <li><a href="#build-css">Build the CSS stylesheet</a></li>
+      <li><a href="#web-server">Setting up the web server</a></li>
+    </ol>
+</ol>
+
+<h2 id="using-gitpod">Using Gitpod.io</h2>
+<p>By using <a href=https://www.gitpod.io)>Gitpod.io</a>, you can easily build the icons and install the<br>required dependencies in one single click. No extra setup is required.</p>
+
+<a href=https://gitpod.io/#https://github.com/devicons/devicon/tree/develop><img src=https://gitpod.io/button/open-in-gitpod.svg alt="Open in Gitpod"></img></a>
+
+> **Note**
+> In case some of the commands are not properly ran, you can\
+> follow the steps below and run the same commands on Gitpod.io
+
+<h2 id="local-installation">Local Installation</h3>
+
+<h3 id="install-dependencies">Install dependencies</h3>
+
+<p><a href=https://github.com/devicons/devicon/fork>Fork</a> the repository and clone the forked repository.</p>
+
+```bash
+git clone https://github.com/<your-github-username>/devicon.git
+```
+
+> **Note**
+> In case you don't have Git installed, check the <a href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git">official guide</a> to install Git on your operating system.
+
+<h3>Install all the necessary NPM dependencies</h3>

 ```bash
 npm install
 ```

-<h5>Build the font and export stylesheet</h5>
-Open <a href="https://icomoon.io/app/#/select">icomoon.io</a> and import <a href="/icomoon.json">icomoon.json</a>. Choose <i>yes</i> when being asked
-if you would like to restore the settings stored in the configuration file.
+> **Note**
+> In case you don't have NPM installed, check this <a href=https://kinsta.com/blog/how-to-install-node-js/><b>ultimate guide</b></a> on installing Node.js and NPM. These tools are required in order to build Devicon properly.

-The next step is to click on <b>Generate font</b> and download the resulting archive. Extract the contents and you will find a <a href="/fonts">fonts</a> directory next to a <code>style.css</code>. Replace the contents of the <code>fonts</code> folder, rename <code>style.css</code> as <a href="/devicon.css">devicon.css</a> and follow the next step to build the final stylesheet.
+<h3>Install Firefox</h3>
+https://www.mozilla.org/en-US/firefox/new/

-<h5>Build and minify stylesheet</h5>
-<p>
-    Run the following command to build the resulting file <code>devicon.min.css</code>
-</p>
+<h3>Install Python 3.8</h3>
+https://www.python.org/downloads/
+
+> **Note**
+> Make sure your Python install includes [pip](https://pypi.org/project/pip/)
+
+<h3>Install Selenium</h3>
+```bash
+python3 -m pip install --upgrade pip && pip install selenium==4.1.0 requests==2.25.1
+```
+
+<h3 id="building-icons">Build the new icons</h3>
+
+<p>Once all the dependencies are installed, you can proceed to build the newest icons.<br>
+Usually, this is done on each release, but you can have a sneak peek before a release.</p>
+
+```bash
+# Linux/Unix
+npm run build-icons
+
+# Windows
+python3 ./.github/scripts/icomoon_build_githubless.py ./.github/scripts/build_assets/geckodriver-v0.32.2-win64/geckodriver.exe ./icomoon.json ./devicon.json ./icons ./ --headless
+```
+
+<i>The process might take a while, depending on your operating system's speed and the amount of icons.</i>
+<p>If there are any errors shown, please let us know by <a href=https://github.com/devicons/devicon/issues/new/choose>creating an issue</a> or contacting us on our <a href=https://discord.gg/hScy8KWACQ>Discord community</a>.</p>
+
+<h3 id="build-css">Build the CSS stylesheet</h3>
+
+<p>Run the following command to build the new CSS stylesheet.<br>
+This file is used to show all the new icons previously built.</p>

 ```bash
 npm run build-css
 ```

-<br />
+<h3 id="web-server">Setting up the web server</h3>
+
+<p>Run the following command to start the web server with Python.</p>
+
+```bash
+npm run dev # Will run on port 8000
+```
+
+<p>Or this command, which does exactly the same, but the port can be customized.</p>
+
+```bash
+python3 -m http.server <port>
+```
+
+<p>You're done now! :tada: Your build of Devicons should be available at <code>https://localhost:8000</code> (or the desired port).</p>
+
+<br/>
 <div align="center">
    <img src="https://forthebadge.com/images/badges/built-with-love.svg" />
    <img src="https://forthebadge.com/images/badges/built-by-developers.svg" />
--- a/docs/assets/js/script.js
+++ b/docs/assets/js/script.js
@ -14,7 +14,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
  var gitHubPath = 'devicons/devicon';
  var url = 'https://api.github.com/repos/' + gitHubPath + '/tags';

-  $scope.latestReleaseTagging = 'master';
+  $scope.latestReleaseTagging = 'latest';
  $http.get(url).success(function (data) {
    if(data.length > 0) {
      $scope.latestReleaseTagging = data[0].name;
@ -24,7 +24,20 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
  });

  var versionStr = '@' + $scope.latestReleaseTagging;
-  var baseUrl = `https://cdn.jsdelivr.net/gh/${gitHubPath}${versionStr}/`
+  var baseUrl
+
+  // Make sure one of the files exist, otherwise, use fallback link.
+  var path = '/devicon.json';
+  var xhr = new XMLHttpRequest();
+  xhr.open('HEAD', path, false);
+  xhr.send();
+  if (xhr.status == "404") {
+    baseUrl = `https://cdn.jsdelivr.net/gh/${gitHubPath}${versionStr}/`
+  } else {
+    baseUrl = `/`;
+  }
+
+  $scope.baseUrl = baseUrl

  // Get devicon.json
  $http.get(baseUrl + 'devicon.json').success(function(data) {
--- a/docs/index.html
+++ b/docs/index.html
@ -3,7 +3,7 @@
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!-->
-<html class="no-js">
+<html class="no-js" ng-app="devicon" ng-controller="IconListCtrl">
 <!--<![endif]-->

 <head>
@ -31,7 +31,7 @@
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="msapplication-TileImage" content="./logos/mstile-144x144.png">
  <meta name="theme-color" content="#ffffff">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon/devicon.min.css">
+  <link rel="stylesheet" type='text/css' ng-href="{{baseUrl}}devicon.min.css">
  <link rel="stylesheet" href="./assets/css/style.css">
  <meta property="og:title" content="Devicon" />
  <meta property="og:image" content="https://raw.githubusercontent.com/devicons/devicon/master/icons/devicon/devicon-original-wordmark.svg" />
@ -41,12 +41,7 @@
  <meta property="og:description" content="Devicon aims to gather all logos representing development languages and tools in one font. 🚀" />
 </head>

-<body ng-app="devicon" ng-controller="IconListCtrl">
-  <link rel="stylesheet" ng-if="latestReleaseTagging" ng-href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css">
-
-  <!--[if lt IE 7]>
-  <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
-  <![endif]-->
+<body>
  <noscript style="color:red; text-align:center;">
    <h1>To use this website, JavaScript needs to be enabled.</h1>
    <p>You can come back when you turn it on though :)</p>
@ -88,7 +83,7 @@
            </span>
          </p>
          <div class="cde" id='headerLinkCode'>
-            &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css"&gt;
+            &lt;link rel="stylesheet" type='text/css' href="{{baseUrl}}devicon.min.css" /&gt;
          </div>

          <ul class="icons-list">
@ -136,8 +131,8 @@
          </h4>
          <ul class="icons-list">
            <li ng-repeat="svgVersion in selectedIcon.svg" ng-click="selectSvg(svgVersion, $index)" ng-class="{'selected-version' : $index == selectedSvgIndex}" ng-style="{'background-color': svgBackground}">
-              <img src="assets/img/checkerboard.png" ng-style="{'visibility': svgDisplayCheckerboard ? 'visible' : 'hidden'}">
-              <img class='svgLogo' ng-src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
+              <img src="./assets/img/checkerboard.png" ng-style="{'visibility': svgDisplayCheckerboard ? 'visible' : 'hidden'}">
+              <img class='svgLogo' ng-src="{{baseUrl}}icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
            </li>
          </ul>
          <p>
@ -148,7 +143,7 @@
            </span>
          </p>
          <div class="cde" id='imgCode'>
-            &lt;img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{selectedIcon.svg[selectedSvgIndex]}}.svg" /&gt;<br />
+            &lt;img src="{{baseUrl}}icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{selectedIcon.svg[selectedSvgIndex]}}.svg" /&gt;<br />
          </div>
          <p><i>*To change the size, change the &lt;img&gt;'s <code>`height`</code> and <code>`width`</code>.</i></p>

@ -172,6 +167,7 @@

      <h3>GitHub repository</h3>
      <h5>If you prefer a local install, you can download all the files on the GitHub repository.</h5>
+      <h5>Check out our <a href=https://github.com/devicons/devicon#building-devicon>ultimate guide</a> in order to compile Devicon locally.</h5>
      <p class="buttonLink">
        <a href="https://github.com/devicons/devicon/archive/master.zip"><i class="devicon-github-original"></i>DOWNLOAD</a>
      </p>
@ -182,18 +178,18 @@
        <a href="https://github.com/devicons/devicon/blob/master/CONTRIBUTING.md" target="blank"><i class="devicon-github-original"></i>CONTRIBUTE</a>
      </p>
      <p class="buttonLink">
-        <a href="https://discord.gg/hScy8KWACQ" target="blank"><i class="discord-logo"></i>DISCORD SERVER</a>
+        <a href="https://discord.gg/hScy8KWACQ" target="blank"><i class="discord-logo"></i>DISCORD COMMUNITY</a>
      </p>

      <h3>Contact</h3>
-      <h5>If you have any legal concerns regarding copyrights or want to report an abuse, please reach out to us at <b><a href="mailto:info@devicon.dev">info@devicon.dev</a></b>. Any code/logo contributions should be made through our GitHub repository listed above.</h5>
+      <h5>If you have any legal concerns regarding copyrights or want to report an abuse, please reach out to us via <b><a href="mailto:info@devicon.dev">info@devicon.dev</a> or our <a href="https://discord.gg/hScy8KWACQ" target="blank">Discord community</a></b>. Any code/logo contributions should be made through our GitHub repository listed above.</h5>

      <footer>
-        Originally created by <a href="https://github.com/konpa">Konpa</a> (under <a href="https://github.com/devicons/devicon/blob/master/LICENSE">MIT License</a>) and <br />
-        supported by various <a href="https://github.com/devicons/devicon/graphs/contributors">contributors</a>.<br />
+        Originally created by <a href="https://github.com/konpa">Konpa</a> (under the <a href="https://github.com/devicons/devicon/blob/master/LICENSE">MIT License</a>) and <br />
+        supported by many <a href="https://github.com/devicons/devicon/graphs/contributors">contributors</a>.<br />
        Copyright &copy; 2015 <a href="https://github.com/konpa">Konpa</a><br />
        <br />
-        Final font build with <a href="https://icomoon.io/">Icomoon</a><br />
+        Final font built with <a href="https://icomoon.io/">IcoMoon</a><br />
        <br>
        <i>*All product names, logos, and brandsare property of their respective owners.  All company, product and service names used in this website are for identification purposes only.  Usage of these names, logos, and brands does not imply endorsement of Devicon or its members. All icons/SVGs in this project are not monetized in anyway. It is up to the user to use the logo properly according to the company/group's brand policy. Usage of this site or any icons/SVGs from Devicon means acknowledgement of these conditions.</i>
      </footer>
--- a/fonts/devicon.eot
+++ b/fonts/devicon.eot
--- a/fonts/devicon.svg
+++ b/fonts/devicon.svg
--- a/fonts/devicon.ttf
+++ b/fonts/devicon.ttf
--- a/fonts/devicon.woff
+++ b/fonts/devicon.woff
--- a/gulpfile.js
+++ b/gulpfile.js
@ -81,7 +81,7 @@ function createAliasStatement(fontObj) {
  return aliases
    .map(aliasObj => {
      return `.devicon-${name}-${aliasObj.alias} {
-            @extend .devicon-${name}-${aliasObj.base};
+            @extend .devicon-${name}-${aliasObj.base} !optional;
        }`;
    })
    .join(" ");
--- a/icomoon.json
+++ b/icomoon.json
--- a/package-lock.json
+++ b/package-lock.json
@ -448,6 +448,16 @@
        "node": ">=8"
      }
    },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
    "node_modules/boolbase": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@ -1638,6 +1648,13 @@
      "integrity": "sha1-5qdUzI8V5YmHqpy9J69m/W9OWvk=",
      "dev": true
    },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
    "node_modules/fill-range": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@ -3205,6 +3222,13 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/nan": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
+      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
+      "dev": true,
+      "optional": true
+    },
    "node_modules/nanomatch": {
      "version": "1.2.13",
      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@ -5490,6 +5514,16 @@
      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
      "dev": true
    },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
    "boolbase": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@ -6469,6 +6503,13 @@
      "integrity": "sha1-5qdUzI8V5YmHqpy9J69m/W9OWvk=",
      "dev": true
    },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
    "fill-range": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@ -7734,6 +7775,13 @@
      "integrity": "sha512-kDcwXR4PS7caBpuRYYBUz9iVixUk3anO3f5OYFiIPwK/20vCzKCHyKoulbiDY1S53zD2bxUpxN/IJ+TnXjfvxg==",
      "dev": true
    },
+    "nan": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.17.0.tgz",
+      "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==",
+      "dev": true,
+      "optional": true
+    },
    "nanomatch": {
      "version": "1.2.13",
      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
--- a/package.json
+++ b/package.json
@ -7,7 +7,9 @@
    "build-css": "gulp updateCss && gulp clean",
    "peek-test": "python ./.github/scripts/icomoon_peek.py ./.github/scripts/build_assets/geckodriver-v0.32.2-linux64/geckodriver ./icomoon.json ./devicon.json ./icons ./  --pr_title \"$PR_TITLE\"",
    "optimize-svg": "gulp optimizeSvg",
-    "bump": "gulp bumpVersion"
+    "bump": "gulp bumpVersion",
+    "build-icons": "python3 ./.github/scripts/icomoon_build_githubless.py ./.github/scripts/build_assets/geckodriver-v0.32.2-linux64/geckodriver ./icomoon.json ./devicon.json ./icons ./ --headless",
+    "dev": "python3 -m http.server 8000"
  },
  "repository": {
    "type": "git",
@ -27,10 +29,10 @@
  "homepage": "https://devicon.dev",
  "devDependencies": {
    "gulp": "^4.0.2",
+    "gulp-footer": "^2.0.2",
    "gulp-sass": "^5.0.0",
    "gulp-svgmin": "^3.0.0",
    "sass": "^1.26.10",
-    "yargs": "^17.0.0",
-    "gulp-footer": "^2.0.2"
+    "yargs": "^17.0.0"
  }
 }