feat(alwatr-icon): define styles & proprties

Alwatr · Oct 29, 2022 · fa0e7c7 · fa0e7c7
1 parent 42cfe97
commit fa0e7c7
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/packages/ui/icon/package.json b/packages/ui/icon/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@alwatr/icon",
   "version": "0.0.1",
-  "description": "Premium icons for Ionic. ",
+  "description": "Premium icons",
   "keywords": [
     "icon",
     "component",
@@ -12,7 +12,10 @@
   "main": "icon.js",
   "type": "module",
   "types": "icon.d.ts",
-  "author": "MohammadMahdi Zamanian <mm25zamanian@gmail.com> (https://mm25zamanian.ir)",
+  "author": "S. Ali Mihandoost <ali.mihandoost@gmail.com> (https://ali.mihandoost.com)",
+  "contributors": [
+    "MohammadMahdi Zamanian <mm25zamanian@gmail.com> (https://mm25zamanian.ir)"
+  ],
   "license": "MIT",
   "files": [
     "**/*.{d.ts.map,d.ts,js.map,js,html,md}"
@@ -31,6 +34,7 @@
   },
   "dependencies": {
     "@alwatr/element": "^0.18.0",
+    "lit": "^2.4.0",
     "tslib": "^2.3.1"
   }
 }
diff --git a/packages/ui/icon/src/icon.ts b/packages/ui/icon/src/icon.ts
@@ -1,6 +1,7 @@
 import {AlwatrElement} from '@alwatr/element';
 import {html, css} from 'lit';
 import {customElement} from 'lit/decorators/custom-element.js';
+import {property} from 'lit/decorators/property.js';
 
 import type {TemplateResult} from 'lit';
 
@@ -10,11 +11,40 @@ export class AlwatrIcon extends AlwatrElement {
     css`
       :host {
         display: inline-block;
+        width: 1em;
+        height: 1em;
+        contain: strict;
+        fill: currentColor;
+        box-sizing: content-box !important;
+      }
+      svg {
+        display: block;
+
+        height: 100%;
+        width: 100%;
       }
     `,
   ];
 
+  @property({reflect: true}) name?: string;
+  @property({reflect: true}) preurl = 'https://cdn.jsdelivr.net/gh/ionic-team/ionicons@6.0.3/src/svg/';
+
   override render(): TemplateResult {
-    return html`<h1>AlWatr Icon Component</h1>`;
+    return html`
+      <svg width="512" height="512" viewBox="0 0 512 512">
+        <path
+          d="M80,212V448a16,16,0,0,0,16,16h96V328a24,24,0,0,1,24-24h80a24,24,0,0,1,24,24V464h96a16,16,0,0,0,16-16V212"
+          style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"
+        />
+        <path
+          d="M480,256,266.89,52c-5-5.28-16.69-5.34-21.78,0L32,256"
+          style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"
+        />
+        <polyline
+          points="400 179 400 64 352 64 352 133"
+          style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"
+        />
+      </svg>
+    `;
   }
 }
diff --git a/packages/ui/icon/tsconfig.json b/packages/ui/icon/tsconfig.json
@@ -7,9 +7,13 @@
     "outDir": "."
   },
   // files, include and exclude from the inheriting config are always overwritten.
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*"
+  ],
   "exclude": [],
   "references": [
-    // { "path": "../x" },
+    {
+      "path": "../../core/element"
+    },
   ]
 }