feat(icon): dynamically updated icons

icons are now re-rendered when the name is updated
RobBrazier · Nov 29, 2017 · ccda8d6 · ccda8d6
1 parent 1430a86
commit ccda8d6
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,10 @@
 # svelte-awesome
 [![Build Status](https://semaphoreci.com/api/v1/robbrazier/svelte-awesome/branches/master/shields_badge.svg)](https://semaphoreci.com/robbrazier/svelte-awesome)
+[![npm](https://img.shields.io/npm/v/svelte-awesome.svg)](https://www.npmjs.com/package/svelte-awesome)
 [![Code Climate](https://img.shields.io/codeclimate/maintainability/RobBrazier/svelte-awesome.svg)](https://codeclimate.com/github/RobBrazier/svelte-awesome/maintainability)
 [![Code Climate](https://img.shields.io/codeclimate/c/RobBrazier/svelte-awesome.svg)](https://codeclimate.com/github/RobBrazier/svelte-awesome/test_coverage)
 [![Waffle.io](https://img.shields.io/waffle/label/robbrazier/svelte-awesome/in%20progress.svg)](https://waffle.io/RobBrazier/svelte-awesome)
+[![semantic-release](https://img.shields.io/badge/%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
 Awesome SVG icon component for Svelte JS, built with Font Awesome icons. Based on Justineo/vue-awesome
 

diff --git a/example/App.html b/example/App.html
@@ -1,32 +1,34 @@
 <main>
-    <!-- <figure id="logo" on:mouseenter="toggle" on:mouseleave="toggle" on:click="change" title="{{logo}}"><Icon name="{{logo}}" scale="4"></Icon></figure> -->
-    <h1><a href="https://github.com/Justineo/vue-awesome">Svelte-Awesome</a></h1>
+    <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>&lt;icon <span class="attr">name</span>=<span class="val">"flag"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+    <figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"flag"</span>&gt;&amp;lt;/Icon&gt;</code></pre></figure>
 
     <h2>Scale</h2>
     <p><Icon name="language" scale="3"></Icon></p>
-    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"language"</span> <span class="attr">scale</span>=<span class="val">"3"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+    <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>
 
     <h2>Spin</h2>
     <p><Icon name="refresh" spin></Icon></p>
-    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"refresh"</span> <span class="attr">spin</span>&gt;&lt;/icon&gt;</code></pre></figure>
+    <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>
 
     <h2>Pulse</h2>
     <p><Icon name="spinner" pulse></Icon></p>
-    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"spinner"</span> <span class="attr">pulse</span>&gt;&lt;/icon&gt;</code></pre></figure>
+    <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>
 
     <h2>Flip</h2>
     <p><Icon name="signal" flip="horizontal"></Icon></p>
-    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"signal"</span> <span class="attr">flip</span>=<span class="val">"horizontal"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+    <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>
 
     <h2>Label</h2>
     <p><small>Accessible for screen readers, etc.</small></p>
     <p><Icon name="code" label="Source Code"></Icon></p>
-    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"code"</span> <span class="attr">label</span>=<span class="val">"Source Code"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+    <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>
 
     <h2>Stacked icons</h2>
     <p><small>Use stacked icons like in FontAwesome. Even more powerful.</small></p>
@@ -36,23 +38,23 @@ <h2>Stacked icons</h2>
         <Icon name="ban" scale="2" class="alert"></Icon>
       </Icon>
     </p>
-    <figure><pre><code>&lt;icon <span class="attr">label</span>=<span class="val">"No Photos"</span>&gt;
-  &lt;icon <span class="attr">name</span>=<span class="val">"camera"</span>&gt;&lt;/icon&gt;
-  &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;&lt;/icon&gt;
-&lt;/icon&gt;</code></pre></figure>
+    <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>
 
     <h2>Custom icons</h2>
     <p><small>You can register your own icons.</small></p>
     <p><Icon name="baidu"></Icon></p>
-    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"baidu"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+    <figure><pre><code>&amp;lt;Icon <span class="attr">name</span>=<span class="val">"baidu"</span>&gt;&amp;lt;/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>
     <p><Icon name="webpack"></Icon> <Icon name="vue"></Icon> <Icon name="html5-c"></Icon></p>
     <p>See <a href="https://github.com/Justineo/vue-awesome#more-advanced-cases">readme</a> for further instructions.</p>
 
     <footer>
-      <a href="//github.com/RobBrazier">@RobBrazier</a>|<a href="//github.com/RobBrazier/svelte-awesome/blob/master/LICENSE">MIT License</a>|<a href="//github.com/Justineo/vue-awesome">View on GitHub</a>
+      <a href="//github.com/RobBrazier">@RobBrazier</a>|<a href="//github.com/RobBrazier/svelte-awesome/blob/master/LICENSE">MIT License</a>|<a href="//github.com/RobBrazier/svelte-awesome">View on GitHub</a>
     </footer>
 </main>
 
@@ -202,43 +204,41 @@ <h2>Multi-color icons</h2>
 <script>
 import Icon from '../src/components/Icon.html'
 import '../src/icons'
-// const keys = Object.keys(Icon.icons)
+const keys = Object.keys(Icon.icons)
 
-// console.log(keys);
-
-// function randomIcon () {
-//   return keys[Math.floor(Math.random() * keys.length)]
-// }
+function randomIcon () {
+  return keys[Math.floor(Math.random() * keys.length)]
+}
 
 export default {
   components: {
     Icon
   },
-  // data () {
-  //   return {
-  //     logo: randomIcon(),
-  //     running: true
-  //   }
-  // },
-  // methods: {
-  //   change () {
-  //     this.set({
-  //       logo: randomIcon()
-  //     })
-  //   },
-  //   toggle () {
-  //     this.set({
-  //       running: !this.get('running')
-  //     })
-  //   }
-  // },
-  // oncreate () {
-  //   setInterval(() => {
-  //     if (this.get('running')) {
-  //       this.change()
-  //     }
-  //   }, 200)
-  // }
+  data () {
+    return {
+      logo: randomIcon(),
+      running: true
+    }
+  },
+  methods: {
+    change () {
+      this.set({
+        logo: randomIcon()
+      })
+    },
+    toggle () {
+      this.set({
+        running: !this.get('running')
+      })
+    }
+  },
+  oncreate () {
+    setInterval(() => {
+      if (this.get('running')) {
+        this.change()
+      }
+    }, 200)
+  }
 }
 
 </script>
diff --git a/package.json b/package.json
@@ -19,6 +19,12 @@
     "commit": "commit",
     "commitmsg": "commitlint -e $GIT_PARAMS"
   },
+  "keywords": [
+    "font-awesome",
+    "awesome",
+    "svelte",
+    "svg"
+  ],
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"

diff --git a/src/components/Icon.html b/src/components/Icon.html
@@ -53,8 +53,6 @@
 import Polygon from './svg/Polygon.html'
 import Svg from './svg/Svg.html'
 
-let icons = {}
-
 let cursor = 0xd4937
 function getId () {
   return `fa-${(cursor++).toString(16)}`
@@ -86,6 +84,9 @@
     }
   },
   setup(Icon) {
+    if (!Icon.icons) {
+      Icon.icons = {};
+    }
     Icon.register = data => {
       for (let name in data) {
         let icon = data[name]
@@ -101,7 +102,7 @@
         if (icon.points) {
           icon.polygons.push({ points: icon.points })
         }
-        icons[name] = icon
+        Icon.icons[name] = icon
       }
     }
   },
@@ -134,7 +135,7 @@
     },
     icon: name => {
       if (name) {
-        return icons[name]
+        return Icon.icons[name]
       }
       return null
     },

diff --git a/src/components/svg/Path.html b/src/components/svg/Path.html
@@ -11,10 +11,11 @@
   },
   oncreate() {
     let path = this.refs.path;
-    let data = this.get('data');
-    for (let key in data) {
-      path.setAttribute(key, data[key])
-    }
+    this.observe('data', (data) => {
+      for (let key in data) {
+        path.setAttribute(key, data[key])
+      }
+    })
   }
 }
 </script>
diff --git a/src/components/svg/Polygon.html b/src/components/svg/Polygon.html
@@ -11,10 +11,11 @@
   },
   oncreate() {
     let polygon = this.refs.polygon;
-    let data = this.get('data');
-    for (let key in data) {
-      polygon.setAttribute(key, data[key])
-    }
+    this.observe('data', data => {
+      for (let key in data) {
+        polygon.setAttribute(key, data[key])
+      }
+    })
   }
 }
 </script>
diff --git a/src/components/svg/Svg.html b/src/components/svg/Svg.html
@@ -1,10 +1,6 @@
-<svg version="1.1" ref:svg
-  class="{{class}}"
+<svg version="1.1" ref:svg :class :width :height
   role="{{ label ? 'img' : 'presentation' }}"
-  width="{{width}}"
-  height="{{height}}"
-  viewBox="{{box}}"
-  >
+  viewBox="{{box}}">
   <slot></slot>
 </svg>