Add support multiple font styles

Author: LitoMore

README.md

@@ -77,6 +77,13 @@ Where `[ICON NAME]` is replaced by the icon name, for example:
 <i class="si si-simpleicons si--color"></i>
 ```
 
+Or use the squared font, all font will rendered in the same-sized square:
+
+```html
+<i class="si-squared si-simpleicons"></i>
+<i class="si-squared si-simpleicons si--color"></i>
+```
+
 In this example we use the `<i>` tag, but any inline HTML tag should work as you expect.
 
 ## Custom Builds

package-lock.json

@@ -47,6 +47,7 @@
     "semver": "7.7.1",
     "serve": "14.2.4",
     "simple-icons": "14.15.0",
+    "svg-path-bbox": "2.1.0",
     "svg2ttf": "6.0.3",
     "svgpath": "2.6.0",
     "ttf2eot": "3.1.0",

package.json

@@ -1,8 +1,9 @@
 document.addEventListener('DOMContentLoaded', () => {
   const $body = document.querySelector('body');
-  const $icons = document.getElementsByClassName('si');
+  const $icons = document.getElementsByTagName('i');
   const $backgroundModeButton = document.querySelector('.background-mode');
   const $iconsColorButton = document.querySelector('.icons-color');
+  const $iconsStyleButton = document.querySelector('.icons-style');
 
   // Background dark/light mode toggler
   $backgroundModeButton.addEventListener('click', () => {
@@ -26,4 +27,27 @@ document.addEventListener('DOMContentLoaded', () => {
       $icons[i].classList.toggle('si--color');
     }
   });
+
+  // Icons style toggle
+  $iconsStyleButton.addEventListener('click', () => {
+    const isSquared = $icons[0].classList.contains('si-squared');
+    if (isSquared) {
+      $iconsStyleButton.innerText = 'Regular';
+    } else {
+      $iconsStyleButton.innerText = 'Squared';
+    }
+
+    for (let i = 0; i < $icons.length; i++) {
+      if ($icons[i].classList.contains('style-immutable')) {
+        continue;
+      }
+      if (isSquared) {
+        $icons[i].classList.remove('si-squared');
+        $icons[i].classList.add('si');
+      } else {
+        $icons[i].classList.remove('si');
+        $icons[i].classList.add('si-squared');
+      }
+    }
+  });
 });

preview/assets/script.js

@@ -19,7 +19,8 @@ body.dark {
   cursor: pointer;
 }
 
-i.si {
+i.si,
+i.si-squared {
   display: inline-block;
   cursor: help;
 }
@@ -28,7 +29,8 @@ p.grid {
   font-size: 32px;
 }
 
-p.grid i.si {
+p.grid i.si,
+p.grid i.si-squared {
   margin: 0 4px;
   padding: 4px;
   border: 1px dashed gray;

preview/assets/style.css

@@ -15,6 +15,7 @@ body
   .buttons-list
     button.background-mode Dark background
     button.icons-color Colorless icons
+    button.icons-style Squared
 
   p.grid
     each icon in icons
@@ -24,3 +25,7 @@ body
     | An icon like #[i.si.si--color.si-github(title='Github')] inside a paragraph.
   p.paragraph
     | An icon like #[em #[i.si.si--color.si-github(title='Github')]] in italics inside a paragraph.
+  p.paragraph
+    | The wide icon in regular style #[i.si.si--color.si-go.style-immutable(title='Go')] in a paragraph.
+  p.paragraph
+    | The wide icon in squared style #[i.si-squared.si--color.si-go.style-immutable(title='Go')] in a paragraph.