Base setup to support box-icon custom element

- added new dependencies to support building custom element
- added webpack configuration
- added source file for box-icon element
- create two new css files with content from css/boxicon.css for
  animation and transformations

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "High Quality web friendly icons",
   "scripts": {
-    "start": "webpack-dev-server --devtool eval-source-map --history-api-fallback --open",
+    "start": "webpack-dev-server --history-api-fallback --hot --open",
     "build": "webpack -p",
     "optimize-svg": "svgo --config=.svgo.yml -f static/img/svg"
   },
@@ -25,15 +25,18 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
     "babel-loader": "^7.1.2",
+    "babel-plugin-transform-builtin-classes": "^0.6.1",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
+    "css-loader": "^0.28.11",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.10.3",
     "svgo": "^1.0.5",
+    "to-string-loader": "^1.1.5",
     "webpack": "^3.6.0",
     "webpack-dev-server": "^2.8.2"
   }

src/box-icon-element.js

@@ -0,0 +1,85 @@
+/* global BUILD */
+//
+import animationsCss from '../static/css/animations.css';
+import transformationsCss from '../static/css/transformations.css';
+
+
+//= ======================================================
+const CACHE = {}; // iconName: Promise()
+
+
+/**
+ * A Custom Element for displaying icon
+ */
+export class BoxIconElement extends HTMLElement {
+  static get cdnUrl() {
+      // BUILD.DATA.VERSION is injected by webpack during a build.
+      // Value is same as package.json#version property.
+    return `https://unpkg.com/boxicons@${BUILD.DATA.VERSION}/svg`;
+  }
+    /**
+     * The html tag name to be use
+     * @type {String}
+     */
+  static get tagName() { return 'box-icon'; }
+
+  static get observedAttributes() {
+    return [
+      'name',
+      'color',
+      'size',
+      'rotate',
+      'flip',
+      'border',
+      'animation',
+    ];
+  }
+
+    /**
+     * Returns a promise that should resolve with a string - the svg source.
+     *
+     * @param {String} iconUrl
+     *  The url to the icon that should be loaded.
+     *
+     * @return {Promise<String, Error>}
+     */
+  static getIconSvg(iconUrl) {
+
+  }
+
+    /**
+     * Define (register) the custom element
+     *
+     * @param {String} [tagName=this.tagName]
+     */
+  static define(tagName) {
+    customElements.define(tagName || this.tagName, this);
+  }
+
+  constructor() {
+    super();
+    this.$ui = this.attachShadow({ mode: 'open' });
+    this.$ui.innerHTML = `
+<style>
+:host {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
+#icon,
+svg {
+  width: 100%;
+  height: 100%;
+}
+${animationsCss}
+${transformationsCss}
+</style>
+<div id="icon"></div>`;
+
+    this.$iconHolder = this.$ui.getElementById('icon');
+  }
+
+  attributeChangedCallback(attr, oldVal, newVal) {
+    // handle live changes
+  }
+}

src/index.js

@@ -0,0 +1,5 @@
+import { BoxIconElement } from './box-icon-element';
+
+export { BoxIconElement } from './box-icon-element';
+
+BoxIconElement.define();

static/css/animations.css

@@ -0,0 +1,300 @@
+@-webkit-keyframes spin
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+@keyframes spin
+{
+    0%
+    {
+        -webkit-transform: rotate(0);
+        transform: rotate(0);
+    }
+    100%
+    {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+@-webkit-keyframes burst
+{
+    0%
+    {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+
+        opacity: 1;
+    }
+    90%
+    {
+        -webkit-transform: scale(1.5);
+        transform: scale(1.5);
+
+        opacity: 0;
+    }
+}
+@keyframes burst
+{
+    0%
+    {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+
+        opacity: 1;
+    }
+    90%
+    {
+        -webkit-transform: scale(1.5);
+        transform: scale(1.5);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes flashing
+{
+    0%
+    {
+        opacity: 1;
+    }
+    45%
+    {
+        opacity: 0;
+    }
+    90%
+    {
+        opacity: 1;
+    }
+}
+@keyframes flashing
+{
+    0%
+    {
+        opacity: 1;
+    }
+    45%
+    {
+        opacity: 0;
+    }
+    90%
+    {
+        opacity: 1;
+    }
+}
+@-webkit-keyframes fade-left
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(-20px);
+        transform: translateX(-20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-left
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(-20px);
+        transform: translateX(-20px);
+
+        opacity: 0;
+    }
+}
+@-webkit-keyframes fade-right
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px);
+
+        opacity: 0;
+    }
+}
+@keyframes fade-right
+{
+    0%
+    {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+
+        opacity: 1;
+    }
+    75%
+    {
+        -webkit-transform: translateX(20px);
+        transform: translateX(20px);
+
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes tada
+{
+    from
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+
+    10%,
+    20%
+    {
+        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+        transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90%
+    {
+        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+    }
+
+    40%,
+    60%,
+    80%
+    {
+        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
+        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
+    }
+
+    to
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes tada
+{
+    from
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+
+    10%,
+    20%
+    {
+        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+        transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
+    }
+
+    30%,
+    50%,
+    70%,
+    90%
+    {
+        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
+    }
+
+    40%,
+    60%,
+    80%
+    {
+        -webkit-transform: rotate3d(0, 0, 1, -10deg);
+        transform: rotate3d(0, 0, 1, -10deg);
+    }
+
+    to
+    {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+    }
+}
+.bx-spin
+{
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+}
+.bx-spin-hover:hover
+{
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+}
+
+.bx-tada
+{
+    -webkit-animation: tada 1.5s ease infinite;
+    animation: tada 1.5s ease infinite;
+}
+.bx-tada-hover:hover
+{
+    -webkit-animation: tada 1.5s ease infinite;
+    animation: tada 1.5s ease infinite;
+}
+
+.bx-flashing
+{
+    -webkit-animation: flashing 1.5s infinite linear;
+    animation: flashing 1.5s infinite linear;
+}
+.bx-flashing-hover:hover
+{
+    -webkit-animation: flashing 1.5s infinite linear;
+    animation: flashing 1.5s infinite linear;
+}
+
+.bx-burst
+{
+    -webkit-animation: burst 1.5s infinite linear;
+    animation: burst 1.5s infinite linear;
+}
+.bx-burst-hover:hover
+{
+    -webkit-animation: burst 1.5s infinite linear;
+    animation: burst 1.5s infinite linear;
+}
+
+.bx-fade-left
+{
+    -webkit-animation: fade-left 1.5s infinite linear;
+    animation: fade-left 1.5s infinite linear;
+}
+.bx-fade-left-hover:hover
+{
+    -webkit-animation: fade-left 1.5s infinite linear;
+    animation: fade-left 1.5s infinite linear;
+}
+.bx-fade-right
+{
+    -webkit-animation: fade-right 1.5s infinite linear;
+    animation: fade-right 1.5s infinite linear;
+}
+.bx-fade-right-hover:hover
+{
+    -webkit-animation: fade-right 1.5s infinite linear;
+    animation: fade-right 1.5s infinite linear;
+}

static/css/transformations.css

@@ -0,0 +1,32 @@
+.bx-rotate-90
+{
+    transform: rotate(90deg);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
+}
+.bx-rotate-180
+{
+    transform: rotate(180deg);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
+}
+.bx-rotate-270
+{
+    transform: rotate(270deg);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
+}
+.bx-flip-horizontal
+{
+    transform: scaleX(-1);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)';
+}
+.bx-flip-vertical
+{
+    transform: scaleY(-1);
+
+    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
+}
+
+

webpack.config.js

@@ -1,7 +1,50 @@
 const webpack = require('webpack');
+const packageJson = require('./package.json');
 
 module.exports = {
   entry: `${__dirname}/src/index.js`,
-  
+  output: {
-
+    library: 'BoxIconElement',
-};
+    libraryTarget: 'umd',
+    filename: 'box-icon-element.js',
+  },
+  devtool: 'source-map',
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        options: {
+          babelrc: false,
+          presets: [
+              ['env', { modules: false, targets: { uglify: true } }],
+          ],
+          plugins: [
+            ['babel-plugin-transform-builtin-classes', {
+              globals: ['Array', 'Error', 'HTMLElement'],
+            }],
+          ],
+        },
+      },
+      {
+        test: /\.css$/,
+        use: [
+            { loader: 'to-string-loader' },
+          {
+            loader: 'css-loader',
+            options: {
+              camelCase: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'BUILD.DATA': {
+        VERSION: JSON.stringify(packageJson.version),
+      },
+    }),
+  ],
+};