feat: add support for svelte 2 (#205)

* feat: add support for svelte 2

* style(eslint): fix eslint errors

* style(eslint): fix eslint errors

* fix: add svelte 2 support

* build: regenerate package-lock.json

* build: regenerate package-lock.json

* style: fix eslint errors

Author: RobBrazier

.gitignore

@@ -58,5 +58,6 @@ typings/
 .env
 
 **/dist/
+!example/dist/
 
 .idea/

example/App.html

@@ -1,34 +1,34 @@
 <main>
-    <figure id="logo" on:mouseenter="toggle()" on:mouseleave="toggle()" on:click="change()" title="{{logo}}">
+    <figure id="logo" on:mouseenter="toggle()" on:mouseleave="toggle()" on:click="change()" title="{logo}">
       <Icon bind:name="logo" scale="4"></Icon>
     </figure>
     <h1><a href="https://github.com/RobBrazier/svelte-awesome">Svelte-Awesome</a></h1>
     <p class="desc">Font Awesome component for Svelte.js, using inline SVG.</p>
 
     <h2>Basic</h2>
     <p><Icon name="flag"></Icon></p>
-    <figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"flag"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
+    <figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"flag"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>
 
     <h2>Scale</h2>
     <p><Icon name="language" scale="3"></Icon></p>
-    <figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"language"</span> <span class="attr">scale</span>=<span class="val">"3"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
+    <figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"language"</span> <span class="attr">scale</span>=<span class="val">"3"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>
 
     <h2>Spin</h2>
     <p><Icon name="refresh" spin></Icon></p>
-    <figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"refresh"</span> <span class="attr">spin</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
+    <figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"refresh"</span> <span class="attr">spin</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>
 
     <h2>Pulse</h2>
     <p><Icon name="spinner" pulse></Icon></p>
-    <figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"spinner"</span> <span class="attr">pulse</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
+    <figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"spinner"</span> <span class="attr">pulse</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>
 
     <h2>Flip</h2>
     <p><Icon name="signal" flip="horizontal"></Icon></p>
-    <figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"signal"</span> <span class="attr">flip</span>=<span class="val">"horizontal"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
+    <figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"signal"</span> <span class="attr">flip</span>=<span class="val">"horizontal"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>
 
     <h2>Label</h2>
     <p><small>Accessible for screen readers, etc.</small></p>
     <p><Icon name="code" label="Source Code"></Icon></p>
-    <figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"code"</span> <span class="attr">label</span>=<span class="val">"Source Code"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
+    <figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"code"</span> <span class="attr">label</span>=<span class="val">"Source Code"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>
 
     <h2>Stacked icons</h2>
     <p><small>Use stacked icons like in FontAwesome. Even more powerful.</small></p>
@@ -38,15 +38,15 @@ <h2>Stacked icons</h2>
         <Icon name="ban" scale="2" class="alert"></Icon>
       </Icon>
     </p>
-    <figure><pre><code>&amp;lt;Icon <span class="attr">label</span>=<span class="val">"No Photos"</span>&gt;
-  &amp;lt;Icon <span class="attr">name</span>=<span class="val">"camera"</span>&gt;&amp;lt;/Icon&gt;
-  &amp;lt;Icon <span class="attr">name</span>=<span class="val">"ban"</span> <span class="attr">scale</span>=<span class="val">"2"</span> <span class="attr">class</span>=<span class="val">"alert"</span>&gt;&amp;lt;/Icon&gt;
-&amp;lt;/Icon&gt;</code></pre></figure>
+    <figure><pre><code>&#x3C;Icon <span class="attr">label</span>=<span class="val">"No Photos"</span>&gt;
+  &#x3C;Icon <span class="attr">name</span>=<span class="val">"camera"</span>&gt;&#x3C;/Icon&gt;
+  &#x3C;Icon <span class="attr">name</span>=<span class="val">"ban"</span> <span class="attr">scale</span>=<span class="val">"2"</span> <span class="attr">class</span>=<span class="val">"alert"</span>&gt;&#x3C;/Icon&gt;
+&#x3C;/Icon&gt;</code></pre></figure>
 
     <h2>Custom icons</h2>
     <p><small>You can register your own icons.</small></p>
     <p><Icon name="baidu"></Icon></p>
-    <figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"baidu"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
+    <figure><pre><code>&#x3C;Icon <span class="attr">name</span>=<span class="val">"baidu"</span>&gt;&#x3C;/Icon&gt;</code></pre></figure>
 
     <h2>Multi-color icons</h2>
     <p><small>Register icons in more advanced ways to unleash the full power of SVG.</small></p>
@@ -58,149 +58,6 @@ <h2>Multi-color icons</h2>
     </footer>
 </main>
 
-<style>
-main {
-  margin: 0;
-  padding: 4em 0 0;
-  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-  color: #666;
-  text-align: center;
-}
-a {
-  color: inherit;
-  text-decoration: none;
-}
-p a {
-  color: #42b983;
-  font-weight: 600;
-}
-#logo {
-  display: block;
-  width: 120px;
-  height: 120px;
-  margin: 20px auto 40px;
-  padding: 20px;
-  position: relative;
-  border-radius: 50%;
-  background-color: #35495e;
-  color: #41b883;
-  cursor: pointer;
-  user-select: none;
-  transition: all .3s;
-}
-#logo:hover {
-  margin: 10px auto 30px;
-  padding: 30px;
-  background-color: #41b883;
-  color: #35495e;
-}
-#logo .fa-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-h1 {
-  margin-bottom: 1em;
-  font-family: Dosis, "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
-}
-h1, h2 {
-  color: #2c3e50;
-  font-weight: 300;
-}
-h2 {
-  margin-top: 3em;
-  font-size: 1.2em;
-}
-.desc {
-  margin-bottom: 4em;
-  color: #7f8c8d;
-}
-figure .fa-icon {
-  display: block;
-}
-p small {
-  font-size: 0.8em;
-  color: #7f8c8d;
-}
-pre {
-  display: inline-block;
-  margin: 0;
-  padding: 0.8em;
-  background-color: #f9f9f9;
-  box-shadow: 0 1px 2px rgba(0,0,0,0.125);
-  text-align: left;
-  line-height: 1.1;
-  color: #2973b7;
-}
-pre, code {
-  font-family: "Roboto Mono", Monaco, courier, monospace;
-}
-pre code {
-  font-size: 0.8em;
-}
-.attr {
-  color: #e96900;
-}
-.val {
-  color: #42b983;
-}
-footer {
-  margin: 5em 0 3em;
-  font-size: 0.5em;
-  vertical-align: middle;
-}
-footer a {
-  display: inline-block;
-  margin: 0 5px;
-  padding: 3px 0 6px;
-  color: #7f8c8d;
-  font-size: 2em;
-  text-decoration: none;
-}
-footer a:hover {
-  padding-bottom: 3px;
-  border-bottom: 3px solid #42b983;
-}
-.alert {
-  color: #c33;
-  opacity: .8;
-}
-@media (max-width: 640px) {
-  body {
-    padding-top: 0;
-    text-align: left;
-  }
-  #logo {
-    margin: 0 auto;
-    transform: scale(.6);
-  }
-  #logo:hover {
-    margin: -10px auto;
-  }
-  h1,
-  p {
-    padding: 0 25px;
-  }
-  h1 {
-    border-left: 5px solid #2c3e50;
-  }
-  h2 {
-    padding-left: 20px;
-    border-left: 5px solid rgba(0, 0, 0, 0.1);
-  }
-  figure {
-    margin: 1em 0;
-  }
-  pre {
-    display: block;
-    box-shadow: none;
-    overflow-x: auto;
-    font-size: 0.9em;
-  }
-}
-</style>
-
 <script>
 import Icon from '../src/components/Icon.html';
 import '../src/icons';
@@ -229,13 +86,13 @@ <h2>Multi-color icons</h2>
     },
     toggle() {
       this.set({
-        running: !this.get('running'),
+        running: !this.get().running,
       });
     },
   },
   oncreate() {
     setInterval(() => {
-      if (this.get('running')) {
+      if (this.get().running) {
         this.change();
       }
     }, 200);

example/dist/global.css

@@ -0,0 +1,140 @@
+main {
+  margin: 0;
+  padding: 4em 0 0;
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+  color: #666;
+  text-align: center;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+p a {
+  color: #42b983;
+  font-weight: 600;
+}
+#logo {
+  display: block;
+  width: 120px;
+  height: 120px;
+  margin: 20px auto 40px;
+  padding: 20px;
+  position: relative;
+  border-radius: 50%;
+  background-color: #35495e;
+  color: #41b883;
+  cursor: pointer;
+  user-select: none;
+  transition: all .3s;
+}
+#logo:hover {
+  margin: 10px auto 30px;
+  padding: 30px;
+  background-color: #41b883;
+  color: #35495e;
+}
+#logo .fa-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+h1 {
+  margin-bottom: 1em;
+  font-family: Dosis, "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+}
+h1, h2 {
+  color: #2c3e50;
+  font-weight: 300;
+}
+h2 {
+  margin-top: 3em;
+  font-size: 1.2em;
+}
+.desc {
+  margin-bottom: 4em;
+  color: #7f8c8d;
+}
+figure .fa-icon {
+  display: block;
+}
+p small {
+  font-size: 0.8em;
+  color: #7f8c8d;
+}
+pre {
+  display: inline-block;
+  margin: 0;
+  padding: 0.8em;
+  background-color: #f9f9f9;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.125);
+  text-align: left;
+  line-height: 1.1;
+  color: #2973b7;
+}
+pre, code {
+  font-family: "Roboto Mono", Monaco, courier, monospace;
+}
+pre code {
+  font-size: 0.8em;
+}
+.attr {
+  color: #e96900;
+}
+.val {
+  color: #42b983;
+}
+footer {
+  margin: 5em 0 3em;
+  font-size: 0.5em;
+  vertical-align: middle;
+}
+footer a {
+  display: inline-block;
+  margin: 0 5px;
+  padding: 3px 0 6px;
+  color: #7f8c8d;
+  font-size: 2em;
+  text-decoration: none;
+}
+footer a:hover {
+  padding-bottom: 3px;
+  border-bottom: 3px solid #42b983;
+}
+.alert {
+  color: #c33;
+  opacity: .8;
+}
+@media (max-width: 640px) {
+  body {
+    padding-top: 0;
+    text-align: left;
+  }
+  #logo {
+    margin: 0 auto;
+    transform: scale(.6);
+  }
+  #logo:hover {
+    margin: -10px auto;
+  }
+  h1,
+  p {
+    padding: 0 25px;
+  }
+  h1 {
+    border-left: 5px solid #2c3e50;
+  }
+  h2 {
+    padding-left: 20px;
+    border-left: 5px solid rgba(0, 0, 0, 0.1);
+  }
+  figure {
+    margin: 1em 0;
+  }
+  pre {
+    display: block;
+    box-shadow: none;
+    overflow-x: auto;
+    font-size: 0.9em;
+  }
+}

example/dist/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset='utf8'>
+	<meta name='viewport' content='width=device-width'>
+
+	<title>svelte-awesome</title>
+
+	<link rel='stylesheet' href='global.css'>
+	<link rel='stylesheet' href='bundle.css'>
+</head>
+
+<body>
+	<script src='bundle.js'></script>
+</body>
+</html>