New Feature: webpage now displays <img> of SVG (#834)

* Webpage now displays <img> of SVG

* Update docs/index.html

Co-authored-by: David Leal <halfpacho@gmail.com>

* Add a hint to change width/height for svg/img

Co-authored-by: David Leal <halfpacho@gmail.com>

Author: Thomas-Boi

docs/assets/js/script.js

@@ -88,6 +88,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
     $scope.selectedFontIcon = $scope.icons[0].font[0];
     $scope.selectedSvgIcon = $scope.selectSvg($scope.icons[0].svg[0], 0);
     $scope.selectedFontIndex = 0;
+    $scope.selectedSvgIndex = 0;
 
     /*------ End of "Re-format devicon.json" ------*/
   });
@@ -101,6 +102,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
     $scope.selectedFontIcon = icon.font[0];
     $scope.selectedFontIndex = 0;
     $scope.selectedSvgIcon = $scope.selectSvg(icon.svg[0], 0);
+    $scope.selectedSvgIndex = 0;
 
     // reset color
     $scope.fontBackground = DEFAULT_BACKGROUND;
@@ -154,6 +156,7 @@ devicon.controller('IconListCtrl', function($scope, $http, $compile) {
       }
     });
   }
+
   /*---- End of "Change selected svg icon" ----*/
 });
 

docs/index.html

@@ -66,13 +66,16 @@ <h4>Font versions <input type='color' value='#60be86' ng-model="fontBackground">
               </li>
             </div>
           </ul>
+          <p>Place this in your header</p>
+          <div class="cde">
+            &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css"&gt;
+          </div>
+
+          <p>Use this in your body</p>
           <div class="cde">
-            <div class="cde-com">&lt;!-- in your header --&gt;</div>
-            &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@{{ latestReleaseTagging }}/devicon.min.css"&gt;<br />
-            <br />
-            <div class="cde-com">&lt;!-- in your body --&gt;</div>
             &lt;i class="devicon-{{selectedIcon.name}}-{{selectedFontIcon}}<span ng-if="colored"> colored</span>"&gt;&lt;/i&gt;<br />
           </div>
+          <p><i>*To change the size, change the <code>i</code>'s <code>font-size</code></i></p>
         </li>
         <li>
           <h4>SVG versions <input type='color' value='#60be86' ng-model="svgBackground"></h4>
@@ -81,11 +84,21 @@ <h4>SVG versions <input type='color' value='#60be86' ng-model="svgBackground"></
               <img ng-src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{svgVersion}}.svg">
             </li>
           </ul>
+          <p>Using &lt;img&gt; element</p>
+          <div class="cde">
+            &lt;img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/{{selectedIcon.name}}/{{selectedIcon.name}}-{{selectedIcon.svg[selectedSvgIndex]}}.svg" /&gt;<br />
+          </div>
+          <p><i>*To change the size, change the <code>img</code>'s <code>height</code> and <code>width</code></i></p>
+
+          <br />
+
+          <p>Using Pure SVG</p>
           <div class="cde">
-          &lt;svg viewBox="0 0 128 128"&gt;<br />
-          <div class="cde-ind">{{selectedSvgIcon}}</div>
-          &lt;/svg&gt;
+            &lt;svg viewBox="0 0 128 128"&gt;<br />
+            <div class="cde-ind">{{selectedSvgIcon}}</div>
+            &lt;/svg&gt;
           </div>
+          <p><i>*To change the size, change the <code>svg</code>'s <code>height</code> and <code>width</code></i></p>
         </li>
       </ul>