Streamlined build process for icon fonts'

helpscout · Mar 29, 2016 · 4839d00 · 4839d00
1 parent d2a8c3d
commit 4839d00
Show file tree

Hide file tree

Showing 16 changed files with 324 additions and 234 deletions.
diff --git a/dist/app/_icons.scss b/dist/app/_icons.scss
@@ -4,17 +4,17 @@
 $HS-icon-font-path: '/dist/app/' !default;
 
 @font-face {
-	font-family: "hs-app-icon";
-	src: url('#{$HS-icon-font-path}/hs-app-icon.eot');
-	src: url('#{$HS-icon-font-path}/hs-app-icon.eot?#iefix') format('eot'),
-		url('#{$HS-icon-font-path}/hs-app-icon.woff2') format('woff2'),
-		url('#{$HS-icon-font-path}/hs-app-icon.woff') format('woff'),
-		url('#{$HS-icon-font-path}/hs-app-icon.ttf') format('truetype'),
-		url('#{$HS-icon-font-path}/hs-app-icon.svg#hs-app-icon') format('svg');
+	font-family: "hs-app";
+	src: url('#{$HS-icon-font-path}/hs-app.eot');
+	src: url('#{$HS-icon-font-path}/hs-app.eot?#iefix') format('eot'),
+		url('#{$HS-icon-font-path}/hs-app.woff2') format('woff2'),
+		url('#{$HS-icon-font-path}/hs-app.woff') format('woff'),
+		url('#{$HS-icon-font-path}/hs-app.ttf') format('truetype'),
+		url('#{$HS-icon-font-path}/hs-app.svg#hs-app') format('svg');
 }
 
 .icon:before {
-	font-family: "hs-app-icon";
+	font-family: "hs-app";
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 	font-style: normal;

diff --git a/dist/app/hs-app-icon.woff b/dist/app/hs-app-icon.woff
diff --git a/dist/app/hs-app-icon.eot → dist/app/hs-app.eot b/dist/app/hs-app-icon.eot → dist/app/hs-app.eot
diff --git a/dist/app/hs-app-icon.ttf → dist/app/hs-app.ttf b/dist/app/hs-app-icon.ttf → dist/app/hs-app.ttf
diff --git a/dist/app/hs-app.woff b/dist/app/hs-app.woff
diff --git a/dist/app/icons.css b/dist/app/icons.css
@@ -1,15 +1,15 @@
 @font-face {
-	font-family: "hs-app-icon";
-	src: url('hs-app-icon.eot');
-	src: url('hs-app-icon.eot?#iefix') format('eot'),
-		url('hs-app-icon.woff2') format('woff2'),
-		url('hs-app-icon.woff') format('woff'),
-		url('hs-app-icon.ttf') format('truetype'),
-		url('hs-app-icon.svg#hs-app-icon') format('svg');
+	font-family: "hs-app";
+	src: url('hs-app.eot');
+	src: url('hs-app.eot?#iefix') format('eot'),
+		url('hs-app.woff2') format('woff2'),
+		url('hs-app.woff') format('woff'),
+		url('hs-app.ttf') format('truetype'),
+		url('hs-app.svg#hs-app') format('svg');
 }
 
 .icon:before {
-	font-family: "hs-app-icon";
+	font-family: "hs-app";
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 	font-style: normal;

diff --git a/dist/custom-app/_icons.scss b/dist/custom-app/_icons.scss
@@ -4,17 +4,17 @@
 $HS-icon-font-path: '/dist/app/' !default;
 
 @font-face {
-	font-family: "hs-custom-app-icon";
-	src: url('#{$HS-icon-font-path}/hs-custom-app-icon.eot');
-	src: url('#{$HS-icon-font-path}/hs-custom-app-icon.eot?#iefix') format('eot'),
-		url('#{$HS-icon-font-path}/hs-custom-app-icon.woff2') format('woff2'),
-		url('#{$HS-icon-font-path}/hs-custom-app-icon.woff') format('woff'),
-		url('#{$HS-icon-font-path}/hs-custom-app-icon.ttf') format('truetype'),
-		url('#{$HS-icon-font-path}/hs-custom-app-icon.svg#hs-custom-app-icon') format('svg');
+	font-family: "hs-custom-app";
+	src: url('#{$HS-icon-font-path}/hs-custom-app.eot');
+	src: url('#{$HS-icon-font-path}/hs-custom-app.eot?#iefix') format('eot'),
+		url('#{$HS-icon-font-path}/hs-custom-app.woff2') format('woff2'),
+		url('#{$HS-icon-font-path}/hs-custom-app.woff') format('woff'),
+		url('#{$HS-icon-font-path}/hs-custom-app.ttf') format('truetype'),
+		url('#{$HS-icon-font-path}/hs-custom-app.svg#hs-custom-app') format('svg');
 }
 
 .icon:before {
-	font-family: "hs-custom-app-icon";
+	font-family: "hs-custom-app";
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 	font-style: normal;

diff --git a/dist/custom-app/hs-custom-app-icon.eot → dist/custom-app/hs-custom-app.eot b/dist/custom-app/hs-custom-app-icon.eot → dist/custom-app/hs-custom-app.eot
diff --git a/dist/custom-app/hs-custom-app-icon.ttf → dist/custom-app/hs-custom-app.ttf b/dist/custom-app/hs-custom-app-icon.ttf → dist/custom-app/hs-custom-app.ttf
diff --git a/dist/custom-app/hs-custom-app-icon.woff → dist/custom-app/hs-custom-app.woff b/dist/custom-app/hs-custom-app-icon.woff → dist/custom-app/hs-custom-app.woff
diff --git a/dist/custom-app/icons.css b/dist/custom-app/icons.css
@@ -1,15 +1,15 @@
 @font-face {
-	font-family: "hs-custom-app-icon";
-	src: url('hs-custom-app-icon.eot');
-	src: url('hs-custom-app-icon.eot?#iefix') format('eot'),
-		url('hs-custom-app-icon.woff2') format('woff2'),
-		url('hs-custom-app-icon.woff') format('woff'),
-		url('hs-custom-app-icon.ttf') format('truetype'),
-		url('hs-custom-app-icon.svg#hs-custom-app-icon') format('svg');
+	font-family: "hs-custom-app";
+	src: url('hs-custom-app.eot');
+	src: url('hs-custom-app.eot?#iefix') format('eot'),
+		url('hs-custom-app.woff2') format('woff2'),
+		url('hs-custom-app.woff') format('woff'),
+		url('hs-custom-app.ttf') format('truetype'),
+		url('hs-custom-app.svg#hs-custom-app') format('svg');
 }
 
 .icon:before {
-	font-family: "hs-custom-app-icon";
+	font-family: "hs-custom-app";
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 	font-style: normal;

diff --git a/dist/custom-app/icons.md b/dist/custom-app/icons.md
@@ -0,0 +1,83 @@
+<div class="c-icon-list">
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-arrow"></i>
+    <span>.icon-app-arrow</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-cart"></i>
+    <span>.icon-app-cart</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-case"></i>
+    <span>.icon-app-case</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-cash"></i>
+    <span>.icon-app-cash</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-check"></i>
+    <span>.icon-app-check</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-cloud"></i>
+    <span>.icon-app-cloud</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-doc"></i>
+    <span>.icon-app-doc</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-flag"></i>
+    <span>.icon-app-flag</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-folder"></i>
+    <span>.icon-app-folder</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-gear"></i>
+    <span>.icon-app-gear</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-globe"></i>
+    <span>.icon-app-globe</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-person"></i>
+    <span>.icon-app-person</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-pointer"></i>
+    <span>.icon-app-pointer</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-search"></i>
+    <span>.icon-app-search</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-star"></i>
+    <span>.icon-app-star</span>
+  </div>
+
+  <div class="c-icon-list__item">
+    <i class="icon icon-app-tag"></i>
+    <span>.icon-app-tag</span>
+  </div>
+
+</div>
diff --git a/dist/custom-app/preview.html b/dist/custom-app/preview.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Help Scout Icons</title>
+    <link rel="stylesheet" href="icons.css">
+    <style>
+      html, body {
+        font-family: 'Helvetica', 'Arial', 'Sans-Serif';
+        font-size: 14px;
+        line-height: 1.5;
+      }
+      .icon {
+        font-size: 16px;
+      }
+      .c-icon-list__item {
+        display: inline-block;
+        margin-bottom: 10px;
+        padding: 10px;
+        text-align: center;
+        vertical-align: top;
+        width: 120px;
+      }
+      .c-icon-list__item span {
+        display: block;
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="c-icon-list">
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-arrow"></i>
+        <span>.icon-app-arrow</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-cart"></i>
+        <span>.icon-app-cart</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-case"></i>
+        <span>.icon-app-case</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-cash"></i>
+        <span>.icon-app-cash</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-check"></i>
+        <span>.icon-app-check</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-cloud"></i>
+        <span>.icon-app-cloud</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-doc"></i>
+        <span>.icon-app-doc</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-flag"></i>
+        <span>.icon-app-flag</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-folder"></i>
+        <span>.icon-app-folder</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-gear"></i>
+        <span>.icon-app-gear</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-globe"></i>
+        <span>.icon-app-globe</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-person"></i>
+        <span>.icon-app-person</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-pointer"></i>
+        <span>.icon-app-pointer</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-search"></i>
+        <span>.icon-app-search</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-star"></i>
+        <span>.icon-app-star</span>
+      </div>
+
+      <div class="c-icon-list__item">
+        <i class="icon icon-app-tag"></i>
+        <span>.icon-app-tag</span>
+      </div>
+
+    </div>
+  </body>
+</html>