core-icon is now sizable via css height/width and no longer supports …

…the size attribute. Fixes #8
googlearchive · Jul 15, 2014 · c7e215b · c7e215b
1 parent e625bbc
commit c7e215b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 39 deletions.
diff --git a/core-icon.css b/core-icon.css
@@ -10,16 +10,7 @@ html /deep/ core-icon {
   vertical-align: middle;
   background-repeat: no-repeat;
   fill: currentcolor;
-}
-
-html /deep/ core-icon[size=""] {
   position: relative;
-}
-
-html /deep/ core-icon[size=""] > svg {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
+  height: 24px;
+  width: 24px;
+}
diff --git a/core-icon.html b/core-icon.html
@@ -8,15 +8,22 @@
 -->
 <!--
 
-The `core-icon` element displays an icon using CSS background image. By default an icon renders as 24px square.
+The `core-icon` element displays an icon. By default an icon renders as 24px square.
 
 Example using src:
 
     <core-icon src="star.png"></core-icon>
 
 Example setting size to 32px x 32px:
 
-    <core-icon src="big_star.png" size="32"></core-icon>
+    <core-icon class="big" src="big_star.png"></core-icon>
+
+    <style>
+      .big {
+        height: 32px;
+        width: 32px;
+      }
+    </style>
 
 Example using icon from default iconset:
 
@@ -39,7 +46,7 @@
 
 <link rel="stylesheet" href="core-icon.css" shim-shadowdom>
 
-<polymer-element name="core-icon" attributes="src size icon">
+<polymer-element name="core-icon" attributes="src icon">
 <script>
 (function() {
 
@@ -58,15 +65,6 @@
      */
     src: '',
 
-    /**
-     * Specifies the size of the icon in pixel units.
-     *
-     * @attribute size
-     * @type string
-     * @default 24
-     */
-    size: 24,
-
     /**
      * Specifies the icon name or index in the set of icons available in
      * the icon's icon set. If the icon property is specified,
@@ -79,7 +77,7 @@
     icon: '',
 
     observe: {
-      'size icon': 'updateIcon'
+      'icon': 'updateIcon'
     },
 
     defaultIconset: 'icons',
@@ -92,26 +90,34 @@
     },
 
     srcChanged: function() {
-      this.style.backgroundImage = 'url(' + this.src + ')';
-      this.style.backgroundPosition = 'center';
-      this.style.backgroundSize = this.size + 'px ' + this.size + 'px';
+      var icon = this._icon || document.createElement('div');
+      icon.textContent = '';
+      icon.setAttribute('fit', '');
+      icon.style.backgroundImage = 'url(' + this.src + ')';
+      icon.style.backgroundPosition = 'center';
+      icon.style.backgroundSize = '100%';
+      if (!icon.parentNode) {
+        this.appendChild(icon);
+      }
+      this._icon = icon;
     },
 
     getIconset: function(name) {
       return meta.byId(name || this.defaultIconset);
     },
 
     updateIcon: function() {
-      if (this.size) {
-        this.style.width = this.style.height = this.size + 'px';
+      if (!this.icon) {
+        return;
       }
-      if (this.icon) {
-        var parts = String(this.icon).split(':');
-        var icon = parts.pop();
-        if (icon) {
-          var set = this.getIconset(parts.pop());
-          if (set) {
-            set.applyIcon(this, icon, this.size / set.iconSize);
+      var parts = String(this.icon).split(':');
+      var icon = parts.pop();
+      if (icon) {
+        var set = this.getIconset(parts.pop());
+        if (set) {
+          this._icon = set.applyIcon(this, icon);
+          if (this._icon) {
+            this._icon.setAttribute('fit', '');
           }
         }
       }

diff --git a/demo.html b/demo.html
@@ -19,7 +19,7 @@
       min-width: 200px;
     }
 
-    core-icon.sized {
+    core-icon.big {
       height: 128px;
       width: 128px;
     }
@@ -36,7 +36,7 @@
   <core-iconset id="meta"></core-iconset>
   <div hidden?="{{!$.meta.metaData.icons.iconNames}}">
     Sized icon:
-    <core-icon class="sized" icon="accessibility" size=""></core-icon>
+    <core-icon class="big" icon="accessibility" size=""></core-icon>
   </div>
 </template>