ikonograph - npm Package Compare versions

Comparing version 4.0.1 to 4.0.2

CHANGELOG.md

@@ -1,7 +0,14 @@
-<a name="4.0.0"></a>
-# [4.0.0](https://github.com/contactlab/ikonograph/compare/v3.1.0...v4.0.0) (2017-08-01)
+<a name="4.0.2"></a>
+## [4.0.2](https://github.com/contactlab/ikonograph/compare/v3.1.0...v4.0.2) (2017-08-08)
 
 
+### Bug Fixes
+
+* better management of icon non existent or not specified ([#35](https://github.com/contactlab/ikonograph/issues/35)) ([b191df6](https://github.com/contactlab/ikonograph/commit/b191df6))
+* fixed broken behaviour for style attribute ([#40](https://github.com/contactlab/ikonograph/issues/40)) ([c72a24b](https://github.com/contactlab/ikonograph/commit/c72a24b))
+
+
 ### Features
 
+* new color attribute (38) ([d3e6b36](https://github.com/contactlab/ikonograph/commit/d3e6b36))
 * New ikn-icon CustomElement ([8b1a1b6](https://github.com/contactlab/ikonograph/commit/8b1a1b6))
@@ -35,5 +42,5 @@
 
+* Add sprite SVG ([6a53289](https://github.com/contactlab/ikonograph/commit/6a53289))
 * **builder:** Add SVG's sprite generator ([543fcd4](https://github.com/contactlab/ikonograph/commit/543fcd4))
 * Add SVG sprite ([f44dd85](https://github.com/contactlab/ikonograph/commit/f44dd85))
-* Add sprite SVG ([6a53289](https://github.com/contactlab/ikonograph/commit/6a53289))
 * Add svg-sprite version ([e3f037e](https://github.com/contactlab/ikonograph/commit/e3f037e))
@@ -40,0 +47,0 @@

package.json

 {
   "name": "ikonograph",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Icons library by Contactlab",
@@ -5,0 +5,0 @@ "main": "./dist/ikonograph.min.css",

README.md

@@ -5,3 +5,3 @@ <img src="http://i.imgur.com/BMANwPS.jpg" width="589">
 
-Ikonograph is the official Contactlab icons library. You can use it as npm/bower dependency, you have just to import the css file and you can start to add icons everywhere. You can see all available icons [HERE](https://ux.contactlab.com/#/design/iconography).
+Ikonograph is the official Contactlab icons library. You can use it as npm dependency, you have just to import the css file and you can start to add icons everywhere. You can see all available icons [HERE](https://ux.contactlab.com/#/design/iconography).
 
@@ -25,3 +25,3 @@ <!-- TOC -->
 
-Download the `.zip` package or install via a package manager (Bower, Yarn or NPM):
+Download the `.zip` package or install via a package manager (Yarn or NPM):
 
@@ -28,0 +28,0 @@ ```

src/ikonograph.js

@@ -8,6 +8,8 @@ const ICONS_SVG = {
 const SIZE_ATTR = 'size';
-const ATTRIBUTES = [ICON_ATTR, SIZE_ATTR];
+const COLOR_ATTR = 'color';
+const ATTRIBUTES = [ICON_ATTR, SIZE_ATTR, COLOR_ATTR];
 
 const DEFAULT_SIZE = '100%';
 const DEFAULT_HOST_SIZE = '24px';
+const DEFAULT_COLOR = 'currentColor';
 
@@ -26,2 +28,3 @@
     this.attributeChangeManager[SIZE_ATTR] = value => this._setSize(value);
+    this.attributeChangeManager[COLOR_ATTR] = value => this._setColor(value);
   }
@@ -35,7 +38,10 @@
     const iconName = this.getAttribute(ICON_ATTR);
-    const size = this.getAttribute(SIZE_ATTR) || DEFAULT_HOST_SIZE;
+    const size = this.getAttribute(SIZE_ATTR);
+    const color = this.getAttribute(COLOR_ATTR);
 
-    this._setIcon(iconName);
+    if (!iconName) {
+      this._setIcon(iconName);
+    }
 
-    this._addStyleChild(size);
+    this._addStyleChild(size, color);
   }
@@ -47,16 +53,25 @@
 
-  _svgStyleString(size, hasShadowDOM) {
-    // we need to know if there's support for :host or not
-    const host = hasShadowDOM ? ':host' : 'ikn-icon';
+  _svgStyleString(size, color) {
+    size = size || DEFAULT_HOST_SIZE;
+    color = color || DEFAULT_COLOR;
+
+    const commonStyle = `
+      display: -webkit-inline-box;
+      display: -ms-inline-flexbox;
+      display: inline-flex;
+      contain: content;
+      pointer-events: auto;
+      width: ${size};
+      height: ${size};
+    `;
+
     return `
-      ${host} {
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        contain: content;
-        pointer-events: auto;
-        width: ${size};
-        height: ${size};
+      :host {
+        ${commonStyle}
       }
 
+      ikn-icon {
+        ${commonStyle}
+      }
+
       svg {
@@ -67,4 +82,4 @@ display: block;
         stroke-width: 0;
-        stroke: currentColor;
-        fill: currentColor;
+        stroke: ${color};
+        fill: ${color};
         pointer-events: none;
@@ -81,9 +96,11 @@ }
   _setSize(value) {
-    if (value) {
-      this._addStyleChild(value);
-    } else {
-      this._addStyleChild(DEFAULT_HOST_SIZE);
-    }
+    const color = this.getAttribute(COLOR_ATTR);
+    this._addStyleChild(value, color);
   }
 
+  _setColor(value) {
+    const size = this.getAttribute(SIZE_ATTR);
+    this._addStyleChild(size, value);
+  }
+
   /**
@@ -115,23 +132,11 @@ * Remove the SVG child
 
-  _addStyleChild(size) {
+  _addStyleChild(size, color) {
     this._removeChild('style');
     const styleElement = document.createElement('style');
     this.shadow.appendChild(styleElement);
-    styleElement.innerHTML = this._svgStyleString(size, true);
-
-    // right next the style apply, we need to check if the style is really
-    // applied to our element. This is a sort of feature detection
-    // to check if a browser support :host
-    const styleApplied = this._isStyleApplied(size);
-    if (!styleApplied) {
-      styleElement.innerHTML = this._svgStyleString(size, false);
-    }
+    styleElement.innerHTML = this._svgStyleString(size, color);
   }
 
-  _isStyleApplied(size) {
-    const computedStyle = window.getComputedStyle(this).width || DEFAULT_HOST_SIZE
-    return window.getComputedStyle(this).width === size;
-  }
 }
 
 customElements.define('ikn-icon', IkonographIcon);

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1238914

increased by0.18%

Lines of code

4592

increased by0.04%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes