new feature: icons number (#1267)

* new feature: icons number - fix #1218

* icon numbers| review suggestions application

Co-authored-by: Snailedlt <Snailedlt@users.noreply.github.com>

* Change shield link to https://devicon.dev

* add titles and rename logos & icons to icons & icon-versions

* replace = with :

Co-authored-by: Josélio Júnior <76992016+lunatic-fox@users.noreply.github.com>

* fixed avg fonts number to integer and added float in title

* Update docs/index.html

Co-authored-by: Josélio Júnior <76992016+lunatic-fox@users.noreply.github.com>

---------

Co-authored-by: Kilian PAQUIER <contact@kilian-paquier.fr>
Co-authored-by: Snailedlt <Snailedlt@users.noreply.github.com>
Co-authored-by: Jørgen Kalsnes Hagen <43886029+Snailedlt@users.noreply.github.com>
Co-authored-by: Josélio Júnior <76992016+lunatic-fox@users.noreply.github.com>

README.md

@@ -17,6 +17,9 @@
     <a href="https://github.com/devicons/devicon/stargazers">
         <img alt="GitHub repository stars" src="https://img.shields.io/github/stars/devicons/devicon?color=%2360be86&label=github%20stars&style=for-the-badge">
     </a>
+    <a href="https://devicon.dev/">
+        <img alt="Registered logos" src="https://img.shields.io/github/directory-file-count/devicons/devicon/icons?color=%2360be86&label=registered%20logos&style=for-the-badge">
+    </a>
 </p>
 <br />
 <div align="center">

docs/assets/css/style.css

@@ -415,11 +415,29 @@ input[type='color']:hover {
 .main {
   margin: 0 0 0 480px; }
 
-.search {
+.result {
+  max-width: 75px;
+}
+
+.computed-data {
+  color: var(--primaryColor);
+  font-weight: bold;
+  list-style: none;
+  padding: 0;
+  width: 80%;
+  margin: 25px auto;
+  display: flex;
+}
+
+.computed-data li {
+  width: 33.33%;
   text-align: center; }
+
+.search {
+  text-align: center;
+  margin: 4rem 0 1rem 0; }
+
   .search input {
-    width: 300px;
-    margin: 4rem;
     padding: .5rem 1rem;
     border: 0;
     border-bottom: 2px solid var(--primaryColor);

docs/assets/js/script.js

@@ -38,6 +38,9 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
     $scope.icons = [];
     $scope.selectedIcon = {};
 
+    // Miscellaneous stuff
+    $scope.totalFonts = 0; // Total fonts and SVGs combined
+
     // background color related stuff
     // default is the default site background color
     $scope.DEFAULT_BACKGROUND = "#3D9561";
@@ -61,6 +64,8 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
         main: ""
       };
 
+      $scope.totalFonts += devicon.versions.font.length + devicon.versions.svg.length;
+
       // Loop through devicon.json icons
       for (var i = 0; i < devicon.versions.font.length; i++) {
 
@@ -96,6 +101,9 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
     $scope.selectedFontIndex = 0;
     $scope.selectedSvgIndex = 0;
 
+    // Computes miscellaneous data
+    $scope.avgFonts = $scope.totalFonts / $scope.icons.length // Avg number of fonts and SVGs combined
+
     /*------ End of "Re-format devicon.json" ------*/
   });
 

docs/index.html

@@ -203,10 +203,17 @@
 
       <div class="search">
         <input type="text" placeholder="Search for icons" ng-model="search">
+        <input type="text" class="result" value="{{ filtered.length }}" title="Number of icons in the current search" disabled>
       </div>
 
+      <ul class="computed-data">
+        <li title="The number of icons.&#xA;For example: devicon">Total icons: {{ icons.length }}</li>
+        <li title="The number of icon versions.&#xA;For example: devicon-plain">Total icon version: {{ totalFonts }}</li>
+        <li title="The number of icon versions per icon.&#xA;Calculated by dividing icon version by icons: {{ avgFonts.toFixed(2) }}">Average icon versions per icon: {{ avgFonts.toFixed(0) }}</li>
+      </ul>
+
       <ul class="cbp-ig-grid">
-        <li ng-repeat="icon in icons | filter:search">
+        <li data-ng-repeat="icon in filtered = (icons | filter:search)">
           <span ng-class="{'selected': icon.selected}" ng-click="selectIcon(icon)">
             <i class="cbp-ig-icon devicon-{{icon.main}}"></i>
             <h3 class="cbp-ig-title">{{icon.name}}</h3>