feat(ligatures): add ligature support

itgalaxy · Aug 12, 2019 · 61d7e22 · 61d7e22
1 parent 45d0d43
commit 61d7e22
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 16 deletions.
diff --git a/demo/webfont.eot b/demo/webfont.eot
diff --git a/demo/webfont.html b/demo/webfont.html
@@ -43,6 +43,7 @@
         display: inline-block;
         line-height: 3em;
         margin-left: 5px;
+        white-space: nowrap;
       }
 
       @font-face {
@@ -164,21 +165,41 @@
   </head>
   <body>
     <h1>List Icons</h1>
-      <div class="icons" id="icons">
+      <h3>Class</h3>
+      <div class="icons" id="icon-classes">
 
             <div class="icons__item">
-              <i class="webfont webfont-3x webfont-avatar"></i>
-              <span>webfont-avatar</span>
+              <i class="webfont webfont-3x webfont-avatar"></i><br />
+              <span>.webfont-avatar</span>
             </div>
 
             <div class="icons__item">
-              <i class="webfont webfont-3x webfont-envelope"></i>
-              <span>webfont-envelope</span>
+              <i class="webfont webfont-3x webfont-envelope"></i><br />
+              <span>.webfont-envelope</span>
             </div>
 
             <div class="icons__item">
-              <i class="webfont webfont-3x webfont-phone-call"></i>
-              <span>webfont-phone-call</span>
+              <i class="webfont webfont-3x webfont-phone-call"></i><br />
+              <span>.webfont-phone-call</span>
+            </div>
+
+      </div>
+      <h3>Ligature</h3>
+      <div class="icons" id="icon-ligatures">
+
+            <div class="icons__item">
+              <i class="webfont webfont-3x">avatar</i><br />
+              <span>avatar</span>
+            </div>
+
+            <div class="icons__item">
+              <i class="webfont webfont-3x">envelope</i><br />
+              <span>envelope</span>
+            </div>
+
+            <div class="icons__item">
+              <i class="webfont webfont-3x">phone_call</i><br />
+              <span>phone_call</span>
             </div>
 
       </div>

diff --git a/demo/webfont.svg b/demo/webfont.svg
diff --git a/demo/webfont.ttf b/demo/webfont.ttf
diff --git a/demo/webfont.woff b/demo/webfont.woff
diff --git a/demo/webfont.woff2 b/demo/webfont.woff2
diff --git a/src/__tests__/standalone.test.js b/src/__tests__/standalone.test.js
@@ -76,12 +76,12 @@ describe("standalone", () => {
       .createHash("md5")
       .update(result.woff2)
       .digest("hex");
-
-    expect(svgHash).toBe("ead2b6f69fc603bf1cbd00bf9f8a8a33");
-    expect(ttfHash).toBe("8ffaa42f84b0835c7c250ec16e8f5d78");
-    expect(eotHash).toBe("cc86496a4fd871e31a79043a7ba96a07");
-    expect(woffHash).toBe("e90fb075e22ab56621e1caf13c52ef17");
-    expect(woff2Hash).toBe("c71b12c10bb6576528ef1a461c166e3a");
+      
+    expect(svgHash).toBe("5babeea3094bba0b5e2001390b0811fd");
+    expect(ttfHash).toBe("dea1ee6d35ff9442f7586b60e045032f");
+    expect(eotHash).toBe("9ac8e63b19c5e58ef8ee6d95684cb9b6");
+    expect(woffHash).toBe("fbe22cb889122700687b51460222c3e3");
+    expect(woff2Hash).toBe("439ed126cdcd5b62361b30823f6ebaa3");
   });
 
   it("should generate only `svg`, `ttf` and `eot` fonts", async () => {

diff --git a/src/standalone.js b/src/standalone.js
@@ -98,6 +98,7 @@ function getGlyphsData(files, options) {
                 return reject(error);
               }
 
+              metadata.unicode.push(metadata.name.replace("-", "_"));
               glyphData.metadata = metadata;
 
               return resolve(glyphData);

diff --git a/templates/template.html.njk b/templates/template.html.njk
@@ -43,6 +43,7 @@
         display: inline-block;
         line-height: 3em;
         margin-left: 5px;
+        white-space: nowrap;
       }
 
       @font-face {
@@ -185,11 +186,21 @@
   </head>
   <body>
     <h1>List Icons</h1>
-      <div class="icons" id="icons">
+      <h3>Class</h3>
+      <div class="icons" id="icon-classes">
           {% for glyph in glyphs %}
             <div class="icons__item">
-              <i class="{{ className }} {{ className }}-3x {{ className }}-{{ glyph.name }}"></i>
-              <span>{{ className }}-{{ glyph.name }}</span>
+              <i class="{{ className }} {{ className }}-3x {{ className }}-{{ glyph.name }}"></i><br />
+              <span>.{{ className }}-{{ glyph.name }}</span>
+            </div>
+          {% endfor %}
+      </div>
+      <h3>Ligature</h3>
+      <div class="icons" id="icon-ligatures">
+          {% for glyph in glyphs %}
+            <div class="icons__item">
+              <i class="{{ className }} {{ className }}-3x">{{ glyph.unicode[1] }}</i><br />
+              <span>{{ glyph.unicode[1] }}</span>
             </div>
           {% endfor %}
       </div>