add vuejs example

LineiconsHQ · Oct 29, 2024 · e6ecb9b · e6ecb9b
1 parent 9881f65
commit e6ecb9b
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 14 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -0,0 +1,26 @@
+name: 🚀 lineicons release
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  release:
+    name: 🚀 lineicons release
+    runs-on: ubuntu-latest
+    steps:
+      - name: 📚 checkout
+        uses: actions/checkout@v2
+      - name: 🟢 node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org
+      - name: installing packages
+        run: npm ci
+      - name: 🚀 publish
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 /dist
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+node_modules
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,7 @@
+node_modules
+./node_modules
+./node_modules/
+assets/images/
+.DS_Store
+
+./**/images/
diff --git a/example/index.html b/example/index.html
@@ -32,11 +32,11 @@
         <line-icon name="adobe" style="width: 50px; height: 50px"></line-icon>
         <line-icon
           name="adobe"
-          style="width: 50px; height: 50px; fill: red"
+          style="width: 50px; height: 50px; color: red"
         ></line-icon>
         <line-icon
           name="airbnb"
-          style="width: 20px; height: 20px; fill: blue"
+          style="width: 20px; height: 20px; color: blue"
         ></line-icon>
       </div>
     </div>

diff --git a/example/vue-example/index.html b/example/vue-example/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+        }
+      }
+    </script>
+
+    <!-- Import your custom line-icon script -->
+    <script type="module" src="../../dist/lineicons.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <line-icon
+        name="adobe"
+        type="regular"
+        style="width: 50px; height: 50px"
+      ></line-icon>
+      <line-icon
+        name="amazon"
+        type="regular"
+        style="width: 50px; height: 50px"
+      ></line-icon>
+      <line-icon
+        name="500px"
+        type="regular"
+        style="width: 50px; height: 50px"
+      ></line-icon>
+      <p>{{ message }}</p>
+      <!-- Use the line-icon component directly in Vue template -->
+    </div>
+
+    <script type="module">
+      import { createApp } from "vue";
+
+      createApp({
+        data() {
+          return {
+            message: "Hello Vue!",
+          };
+        },
+      }).mount("#app");
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "generate-icons": "node src/scripts/generate-icons.js",
     "build:webfonts": "webpack",
     "build:svg": "rollup -c",
-    "build": " concurrently \"npm run generate-icons\" \"npm run build:webfonts\" \"npm run build:svg\""
+    "build": "node src/scripts/generate-icons.js && webpack && rollup -c"
   },
   "keywords": [
     "line-icons",

diff --git a/src/lineicons.js b/src/lineicons.js
@@ -1,11 +1,11 @@
 import { LitElement, css, html } from "lit";
-import { svgMap } from "./svg-map.js"; // Import your generated svgMap
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+import { svgMap } from "./svg-map.js";
 
 class LineIcon extends LitElement {
   static properties = {
     name: { type: String },
-    type: { type: String, attribute: "type" }, // e.g., regular or sharp
-    variant: { type: String, attribute: "variant" }, // e.g., outlined, solid, two-tone, stroke, bulk
+    type: { type: String },
     styleString: { type: String, attribute: "style" },
   };
 
@@ -14,28 +14,35 @@ class LineIcon extends LitElement {
       display: inline-block;
       width: 24px;
       height: 24px;
+      color: currentColor; /* Use inherited color */
     }
     svg {
       width: 100%;
       height: 100%;
+      fill: currentColor; /* Set default fill to currentColor */
     }
   `;
 
   constructor() {
     super();
-    this.name = ""; // The name of the icon (e.g., 'adobe')
-    this.type = "regular"; // Default type
-    this.variant = "outlined"; // Default variant
+    this.name = "";
+    this.type = "regular"; // Default type if not specified
     this.styleString = "";
   }
 
   render() {
-    const svgContent = svgMap[this.type]?.[this.variant]?.[this.name] || "";
+    let svgContent = svgMap[this.type]?.[this.name];
+
+    if (!svgContent) {
+      console.error(`Icon "${this.name}" not found in ${this.type} type!`);
+      return html`<div>Icon not found</div>`;
+    }
+
+    // Replace any fill attributes in the SVG content with `currentColor`
+    svgContent = svgContent.replace(/fill="[^"]*"/g, 'fill="currentColor"');
 
     return html`
-      <div style=${this.styleString}>
-        ${svgContent ? html([svgContent]) : html`<span>Icon not found</span>`}
-      </div>
+      <div style=${this.styleString}>${unsafeHTML(svgContent)}</div>
     `;
   }
 }