Embedded font icons (#138)

* embed the font icons in the application

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playcanvas/pcui",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "author": "PlayCanvas <[email protected]>",
   "homepage": "https://playcanvas.github.io/pcui",
   "description": "This library enables the creation of reliable and visually pleasing user interfaces by providing fully styled components that you can use directly on your site. The components are useful in a wide range of use cases, from creating simple forms to building graphical user interfaces for complex web tools.",
@@ -17,10 +17,10 @@
   },
   "scripts": {
     "build": "rollup -c && npm run bundle:styles",
-    "bundle:styles": "scss-bundle -e ./src/Element/style.scss -o ./dist/pcui.scss",
+    "bundle:styles": "scss-bundle -e ./src/Element/style.scss -o ./dist/pcui.scss && scss-bundle -e ./src/scss/variables.scss -o ./dist/variables.scss && scss-bundle -e ./src/scss/fonts.scss -o ./dist/fonts.scss",
     "watch": "rollup -c -w",
     "lint": "eslint --ext .js src",
-    "clean:css": "node clean-scss.js",
+    "build:font:icons": "cd ./src/scss/fonts && node ./buildFontIcons.js",
     "storybook": "jsdoc -r -X src > ./.storybook/utils/jsdoc-ast.json && start-storybook -p 9009 -s public",
     "docs:local": "cd docs && bundle exec jekyll build --config _config_local.yml && mkdir _site/storybook && cd .. && ENVIRONMENT=production build-storybook --no-dll -o ./docs/_site/storybook",
     "docs:build": "cd docs && bundle exec jekyll build --config _config.yml && mkdir _site/storybook && cd .. && ENVIRONMENT=production build-storybook --no-dll -o ./docs/_site/storybook",

src/Element/style.scss

@@ -1,5 +1,9 @@
-@import '../scss/pcui.scss';
+// Global styles
+@import '../scss/variables.scss';
+@import '../scss/fonts.scss';
+@import '../scss/_pcui-common.scss';
 
+// Element styling
 @-webkit-keyframes pcui-flash-animation {
     from { outline-color: $text-active; }
     to { outline-color: rgba($text-active, 0); }
@@ -9,15 +13,6 @@
     to { outline-color: rgba($text-active, 0); }
 }
 
-.noSelect {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
 .pcui-element {
     @extend .font-regular;
 
@@ -43,6 +38,7 @@
     display: none;
 }
 
+// Other components
 @import '../TextInput/style.scss';
 @import '../TextAreaInput/style.scss';
 @import '../NumericInput/style.scss';

src/scss/font-icon.scss

@@ -1,12 +1,8 @@
+@import './fonts/PlayIcons-Regular-woff.scss';
+
 @font-face {
     font-family: 'pc-icon';
-    src: url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.eot');
-    src: url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.eot?#iefix') format('embedded-opentype'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.woff2') format('woff2'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.woff') format('woff'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.ttf') format('truetype'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.svg') format('svg');
-
+    src: $playIconsRegularWoff;
     font-weight: normal;
     font-style: normal;
 }

src/scss/fonts-storybook.scss

@@ -1,15 +1,4 @@
-@font-face {
-    font-family: 'pc-icon';
-    src: url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.eot');
-    src: url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.eot?#iefix') format('embedded-opentype'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.woff2') format('woff2'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.woff') format('woff'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.ttf') format('truetype'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.svg') format('svg');
-
-    font-weight: normal;
-    font-style: normal;
-}
+@import './font-icon.scss';
 
 @font-face {
     font-family: 'Montserrat Thin';
@@ -47,12 +36,6 @@
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
   }
 
-.font-smooth {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smoothing: antialiased;
-}
-
 .font-thin {
     font-family: 'Montserrat Thin', 'Helvetica Neue', Arial, Helvetica, sans-serif;
     font-weight: 100;
@@ -77,11 +60,6 @@
     font-style: normal;
 }
 
-.font-icon {
-    font-family: 'pc-icon';
-    @extend .font-smooth;
-}
-
 .fixedFont {
     font-family: inconsolatamedium, Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
     font-weight: normal;

src/scss/fonts.scss

@@ -1,21 +1,4 @@
-@font-face {
-    font-family: 'pc-icon';
-    src: url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.eot');
-    src: url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.eot?#iefix') format('embedded-opentype'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.woff2') format('woff2'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.woff') format('woff'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.ttf') format('truetype'),
-         url('https://playcanvas.com/static-assets/fonts/PlayIcons-Regular.svg') format('svg');
-
-    font-weight: normal;
-    font-style: normal;
-}
-
-.font-smooth {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smoothing: antialiased;
-}
+@import './font-icon.scss';
 
 .font-thin {
     font-weight: 100;
@@ -37,11 +20,6 @@
     font-style: normal;
 }
 
-.font-icon {
-    font-family: 'pc-icon';
-    @extend .font-smooth;
-}
-
 .fixedFont {
     font-family: inconsolatamedium, Monaco, Menlo, 'Ubuntu Mono', Consolas, source-code-pro, monospace;
     font-weight: normal;

src/scss/fonts/buildFontIcons.js

@@ -0,0 +1,6 @@
+const fs = require('fs');
+
+const file = fs.readFileSync('./PlayIcons-Regular.woff');
+const b64FontString = file.toString('base64');
+const style = `$playIconsRegularWoff: url(data:application/font-woff;charset=utf-7;base64,${b64FontString}) format('woff');`;
+fs.writeFileSync('./PlayIcons-Regular-woff.scss', style);