@aquera/nile-elements 0.0.1-beta.1 → 0.0.1-beta.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-icon/index.ts

@@ -85,11 +85,6 @@ export class NileIcon extends LitElement {
       align-items: center;
       justify-content: center;
       contain: content;
-
-      --nile-svg-stroke: #7F7F7F;
-      --nile-svg-stroke-width: 1px;
-      --nile-svg-height: 16px;
-      --nile-svg-width: 16px;
     }
 
     .nds-icon {
@@ -98,15 +93,19 @@ export class NileIcon extends LitElement {
       justify-content: center;
     }
 
-    .nds-icon--push {
-      margin-right: 12px;
-    }
-
-    svg {
-      stroke: var(--nile-svg-stroke);
-      stroke-width: var(--nile-svg-stroke-width);
+    .nds-icon svg {
       height: var(--nile-svg-height);
       width: var(--nile-svg-width);
+      stroke: var(--nile-svg-stroke);
+      stroke-width: var(--nile-svg-stroke-width);
+    }
+
+    .nds-icon svg path {
+      fill: var(--nile-svg-fill);
+    }
+
+    .nds-icon--push {
+      margin-right: 12px;
     }
   `;
 
@@ -122,9 +121,12 @@ export class NileIcon extends LitElement {
       this.style.setProperty('--nile-svg-width', `${this.size}px`);
     }
     if (changedProperties.has('color')) {
-      this.style.setProperty('--nile-svg-stroke', `${this.color}`);
+      this.style.setProperty('--nile-svg-fill', `${this.color}`);
     }
-    if (changedProperties.has('name') || changedProperties.has('customSvgPath')) {
+    if (
+      changedProperties.has('name') ||
+      changedProperties.has('customSvgPath')
+    ) {
       let iconName = this.name ? this.removeHyphens(this.name) : undefined;
       if (iconName && iconPaths[iconName]) {
         this._svg = atob(iconPaths[iconName]);
@@ -150,7 +152,6 @@ export class NileIcon extends LitElement {
     return iconName.replace(/-/g, '');
   }
 
-
   get buttonClassMap() {
     return {
       'nds-icon--push': this.push,
@@ -168,7 +169,7 @@ export class NileIcon extends LitElement {
       ? `0 0 ${this.frame} ${this.frame}`
       : '0 0 16 16';
 
-      return html`
+    return html`
       <span class="nds-icon ${classMap(this.buttonClassMap)}">
         ${this.customSvgPath
           ? html`${unsafeHTML(this._svg)}`
@@ -186,8 +187,7 @@ export class NileIcon extends LitElement {
               fill="${color}"
             >
               ${unsafeSVG(this._svg)}
-            </svg>`
-        }
+            </svg>`}
       </span>
     `;
   }