🔧 Add icomoon (#1149)

* 🔧 Add more font-famlies * 🔧 Remove octicons * obviously they only exist in svg format * ✅ Add some more tests * icofont * icomoon * nerd font
ampproject · Feb 26, 2021 · e2b8676 · e2b8676
1 parent 4e7f8ec
commit e2b8676
Show file tree

Hide file tree

Showing 10 changed files with 190 additions and 5,037 deletions.
diff --git a/packages/linter/src/rules/NoIconFontIsUsed.ts b/packages/linter/src/rules/NoIconFontIsUsed.ts
@@ -22,17 +22,13 @@ const ICON_FONT_IDENTIFIERS = [
     className: "icofont-",
     fontFamilies: ["IcoFont"],
   },
-  {
-    className: "octicon-",
-    fontFamilies: ["Octicons"],
-  },
   {
     className: "icn-",
     fontFamilies: ["icon"],
   },
   {
     className: "icon-",
-    fontFamilies: ["icon"],
+    fontFamilies: ["icon", "icons", "icomoon"],
   },
 ];
 

diff --git a/packages/linter/tests/local.test.ts b/packages/linter/tests/local.test.ts
@@ -253,38 +253,62 @@ describe(FastGoogleFontsDisplay.name, () => {
 });
 
 describe(NoIconFontIsUsed.name, () => {
-  it(`${NoIconFontIsUsed.name} - icon font usage`, async () => {
+  it(`${NoIconFontIsUsed.name} - icon font found`, async () => {
     return assertWarn(
       runLocalTest(
         NoIconFontIsUsed,
         `${__dirname}/local/NoIconFontIsUsed-1/source.html`
       )
     );
   });
-  it(`${NoIconFontIsUsed.name} - no icon font usage`, async () => {
+  it(`${NoIconFontIsUsed.name} - no icon font found`, async () => {
     return assertPass(
       runLocalTest(
         NoIconFontIsUsed,
         `${__dirname}/local/NoIconFontIsUsed-2/source.html`
       )
     );
   });
-  it(`${NoIconFontIsUsed.name} - suspicious class names, but no icon font`, async () => {
+  it(`${NoIconFontIsUsed.name} - suspicious class names`, async () => {
     return assertPass(
       runLocalTest(
         NoIconFontIsUsed,
         `${__dirname}/local/NoIconFontIsUsed-3/source.html`
       )
     );
   });
-  it(`${NoIconFontIsUsed.name} - usage of material icons icon font`, async () => {
+  it(`${NoIconFontIsUsed.name} - material icons icon font found`, async () => {
     return assertWarn(
       runLocalTest(
         NoIconFontIsUsed,
         `${__dirname}/local/NoIconFontIsUsed-4/source.html`
       )
     );
   });
+  it(`${NoIconFontIsUsed.name} - icomoon icon font found`, async () => {
+    return assertWarn(
+      runLocalTest(
+        NoIconFontIsUsed,
+        `${__dirname}/local/NoIconFontIsUsed-5/source.html`
+      )
+    );
+  });
+  it(`${NoIconFontIsUsed.name} - icofont icon font found`, async () => {
+    return assertWarn(
+      runLocalTest(
+        NoIconFontIsUsed,
+        `${__dirname}/local/NoIconFontIsUsed-6/source.html`
+      )
+    );
+  });
+  it(`${NoIconFontIsUsed.name} - nerd font icon font found`, async () => {
+    return assertWarn(
+      runLocalTest(
+        NoIconFontIsUsed,
+        `${__dirname}/local/NoIconFontIsUsed-7/source.html`
+      )
+    );
+  });
 });
 
 describe(FontsArePreloaded.name, () => {

diff --git a/packages/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.eot b/packages/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.eot
diff --git a/...ges/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.svg b/...ges/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.svg
diff --git a/packages/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.ttf b/packages/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.ttf
diff --git a/packages/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.woff b/packages/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.woff
diff --git a/packages/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.woff2 b/packages/linter/tests/local/NoIconFontIsUsed-1/fontawesome/webfonts/fa-solid-900.woff2
diff --git a/packages/linter/tests/local/NoIconFontIsUsed-5/source.html b/packages/linter/tests/local/NoIconFontIsUsed-5/source.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <title>Hello, AMPs</title>
+    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "NewsArticle",
+        "headline": "Open-source framework for publishing content",
+        "datePublished": "2015-10-07T12:02:41Z",
+        "image": [
+        "logo.jpg"
+        ]
+      }
+    </script>
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <style amp-custom>
+      @font-face {
+        font-family: 'icomoon';
+        src:  url('fonts/icomoon.eot?72kag1');
+        src:  url('fonts/icomoon.eot?72kag1#iefix') format('embedded-opentype'),
+          url('fonts/icomoon.ttf?72kag1') format('truetype'),
+          url('fonts/icomoon.woff?72kag1') format('woff'),
+          url('fonts/icomoon.svg?72kag1#icomoon') format('svg');
+        font-weight: normal;
+        font-style: normal;
+        font-display: block;
+      }
+
+      [class^="icon-"], [class*=" icon-"] {
+        /* use !important to prevent issues with browser extensions that change fonts */
+        font-family: 'icomoon' !important;
+        speak: never;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+
+        /* Better Font Rendering =========== */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      .icon-power:before {
+        content: "\e9b5";
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hello, AMP!<span class="icon-power"></span></h1>
+  </body>
+</html>
diff --git a/packages/linter/tests/local/NoIconFontIsUsed-6/source.html b/packages/linter/tests/local/NoIconFontIsUsed-6/source.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <title>Hello, AMPs</title>
+    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "NewsArticle",
+        "headline": "Open-source framework for publishing content",
+        "datePublished": "2015-10-07T12:02:41Z",
+        "image": [
+        "logo.jpg"
+        ]
+      }
+    </script>
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <style amp-custom>
+      @font-face {
+        font-family: "IcoFont";
+        font-weight: normal;
+        font-style: "Regular";
+        src: url("./fonts/icofont.woff2") format("woff2"),
+        url("./fonts/icofont.woff") format("woff");
+      }
+
+      [class^="icofont-"], [class*=" icofont-"] {
+        font-family: 'IcoFont' !important;
+        speak: none;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        line-height: 1;
+      /* Better Font Rendering =========== */
+        -webkit-font-feature-settings: "liga";
+        -webkit-font-smoothing: antialiased;
+      }
+
+      .icofont-thunder-light:before {
+        content: "\ee84";
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hello, AMP!<i class="icofont-thunder-light"></i></h1>
+  </body>
+</html>
diff --git a/packages/linter/tests/local/NoIconFontIsUsed-7/source.html b/packages/linter/tests/local/NoIconFontIsUsed-7/source.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html amp lang="en">
+  <head>
+    <meta charset="utf-8">
+    <script async src="https://cdn.ampproject.org/v0.js"></script>
+    <title>Hello, AMPs</title>
+    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "NewsArticle",
+        "headline": "Open-source framework for publishing content",
+        "datePublished": "2015-10-07T12:02:41Z",
+        "image": [
+        "logo.jpg"
+        ]
+      }
+    </script>
+    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+    <style amp-custom>
+      @font-face {
+        font-family: 'NerdFontsSymbols Nerd Font';
+        src: url("./fonts/Noto Sans Regular Nerd Font Complete.ttf") format("truetype");
+        font-weight: normal;
+        font-style: normal;
+      }
+
+      .nf, .nerd-font, .nerd-fonts {
+        font-family: 'NerdFontsSymbols Nerd Font';
+        speak: none;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        line-height: 1;
+        /* Better Font Rendering (from devicons, et al) */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      .nf-fa-bolt:before {
+        content: "\f0e7";
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hello, AMP!<i class="nf nf-fa-bolt"></i></h1>
+  </body>
+</html>