Rename to japenese yen and add tags (#444)

* bump flutter package version

* Add Folder open icon

Co-authored-by: Jan <72730682+JanTrichter@users.noreply.github.com>

* Rename icon

* update tags

Co-authored-by: Jan <72730682+JanTrichter@users.noreply.github.com>

.github/workflows/ci.yml

@@ -71,4 +71,3 @@ jobs:
           tag_name: ${{ steps.new-version.outputs.NEW_VERSION }}
           name: New icons ${{ steps.new-version.outputs.NEW_VERSION }}
           body: ${{ steps.change-log.outputs.CHANGE_LOG }}
-

.github/workflows/close-stale-prs.yml

@@ -1,7 +1,7 @@
-name: 'Close stale issues and PR'
+name: Close stale issues and PR
 on:
   schedule:
-    - cron: '45 1 * * *'
+    - cron: "45 1 * * *"
 
 jobs:
   stale:
@@ -10,9 +10,9 @@ jobs:
       - uses: actions/stale@v3
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          stale-pr-message: 'This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
-          close-pr-message: 'This PR was closed because it has been stalled for 5 days with no activity.'
-          close-pr-label: '🧶 stale'
+          stale-pr-message: This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.
+          close-pr-message: This PR was closed because it has been stalled for 5 days with no activity.
+          close-pr-label: 🧶 stale
           days-before-stale: 30
           days-before-close: 5
           days-before-pr-close: -1

.github/workflows/release.yml

@@ -3,11 +3,17 @@ name: Release Packages
 on:
   push:
     tags:
-    - 'v*'
+      - "v*"
+
+  workflow_dispatch:
+    inputs:
+      version:
+        description: Version
+        required: true
 
 jobs:
   pre-build:
-    if: github.repository == 'lucide-icons/lucide'
+    if: github.repository == 'lucide-icons/lucide' && contains('["locness3","ericfennis", "johnletey"]', github.actor)
     runs-on: ubuntu-latest
     outputs:
       VERSION: ${{ steps.get_version.outputs.VERSION }}
@@ -27,13 +33,14 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: yarn
+          cache-dependency-path: 'yarn.lock'
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -62,13 +69,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: yarn
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -97,13 +104,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: yarn
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -132,13 +139,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: yarn
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -167,13 +174,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: yarn
 
       - name: Install dependencies
-        run: yarn --pure-lockfile
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -202,13 +209,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: yarn
 
       - name: Install dependencies
-        run: yarn
+        run: yarn --prefer-offline
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
@@ -231,19 +238,52 @@ jobs:
           name: lucide-preact-package-json
           path: packages/lucide-preact/package.json
 
+  lucide-static:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: [pre-build, lucide-font]
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/download-artifact@v2
+      - uses: actions/setup-node@v2.4.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn --prefer-offline
+
+      - name: Set Auth Token
+        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
+
+      # - name: Set new version
+      #   run: yarn workspace lucide-static version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+
+      - name: Move Font
+        run: cp -r lucide-font packages/lucide-static/font
+
+      - name: Build
+        run: yarn workspace lucide-static build
+
+      - name: Publish
+        run: yarn workspace lucide-static publish
+
+      - name: Upload package.json
+        uses: actions/upload-artifact@v2
+        with:
+          name: lucide-static-package-json
+          path: packages/lucide-static/package.json
+
   lucide-font:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2.4
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '14'
-          cache: 'yarn'
-
-      - name: Update repos
-        run: sudo apt-get update
+          node-version: "14"
+          cache: yarn
 
       - name: Install FontForge
         run: sudo apt-get install zlib1g-dev fontforge
@@ -253,64 +293,48 @@ jobs:
 
       - name: Install and move sfnt2woff-zopfli
         run: |
-            cd sfnt2woff-zopfli
-            make
-            sudo mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
+          cd sfnt2woff-zopfli
+          make
+          sudo mv sfnt2woff-zopfli /usr/local/bin/sfnt2woff
 
       - name: Clone woff2
         run: git clone --recursive https://github.com/google/woff2.git
 
       - name: Install woff2
         run: |
-            cd woff2
-            sudo make clean all
-            sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
+          cd woff2
+          sudo make clean all
+          sudo mv woff2_compress /usr/local/bin/ && sudo mv woff2_decompress /usr/local/bin/
 
       - name: Install Font Custom dependency
         run: sudo gem install fontcustom
 
-      - name: Install "outline-stroke"
-        run: sudo yarn add svg-outline-stroke -W
-
-      - name: "Outline SVG"
-        run: yarn build:outline-icons
+      - name: Install
+        run: yarn --prefer-offline
 
       - name: Build Icon Font
         run: |
-            mkdir build
-            list=(-200 -300 "" -500 -600)
-            command=''
-            for name in "${list[@]}"
-            do
-              if [ -z "$command" ]
-                subcommand="(fontcustom compile "./converted_icons${name}" -h -n "lucide${name}" -o ./tmp -F && mv ./tmp/* build)"
-                then
-                  command="$subcommand";
-                else
-                  command="$command & $subcommand";
-              fi
-            done
+          mkdir lucide-font
+          yarn build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
 
-            eval $command
-
-      - name: 'Upload to Artifacts'
+      - name: "Upload to Artifacts"
         uses: actions/upload-artifact@v1
         with:
           name: lucide-font
-          path: build
+          path: lucide-font
 
   lucide-flutter:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: [pre-build, lucide-font]
     container:
-      image:  google/dart:latest
+      image: cirrusci/flutter:latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/download-artifact@v2
       - uses: actions/cache@v2
         with:
-          path: '~/.pub-cache'
+          path: ~/.pub-cache
           key: ${{ runner.os }}-pub-${{ hashFiles('~/.pub-cache') }}
           restore-keys: |
             ${{ runner.os }}-pub-
@@ -330,22 +354,34 @@ jobs:
           EOF
 
       - name: Get packages
-        run: pub get
+        run: flutter pub get
         working-directory: packages/lucide-flutter
 
-      - name: Move the ttf file
-        run: mv lucide-font/lucide.ttf packages/lucide-flutter/assets/Lucide.ttf
+      - name: List lucide-font folder
+        run: ls lucide-font
+
+      - name: Copy assets from lucide-font directory
+        run: |
+          mkdir packages/lucide-flutter/assets
+          cp lucide-font/lucide.ttf packages/lucide-flutter/assets/lucide.ttf
+          cp lucide-font/lucide-preview.html packages/lucide-flutter/assets/lucide-preview.html
 
       - name: Generate exports file
-        run: dart tool/generate_fonts.dart lucide-font/lucide-preview.html
+        run: |
+          dart tool/generate_fonts.dart assets/lucide-preview.html
+          flutter format .
+        working-directory: packages/lucide-flutter
+
+      - name: Test
+        run: flutter test
         working-directory: packages/lucide-flutter
 
       - name: Update yaml
-        run: yq e -i -f '.version = "${{ needs.pre-build.outputs.VERSION }}"' pubspec.yaml
+        run: sed -E 's/(version:)[^\n]*/\1 ${{ needs.pre-build.outputs.VERSION }}/;' pubspec.yaml > pubspec && mv pubspec pubspec.yaml
         working-directory: packages/lucide-flutter
 
       - name: Flutter publish
-        run: pub publish -f
+        run: flutter pub publish -f
         working-directory: packages/lucide-flutter
 
       - name: Upload pubspec.yaml
@@ -354,11 +390,21 @@ jobs:
           name: lucide-flutter-pubspec-yaml
           path: packages/lucide-flutter/pubspec.yaml
 
-
   post-release:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
-    needs: [pre-build, lucide, lucide-react, lucide-vue, lucide-vue-next, lucide-angular, lucide-preact, lucide-flutter, lucide-font]
+    needs:
+      [
+        pre-build,
+        lucide,
+        lucide-react,
+        lucide-vue,
+        lucide-vue-next,
+        lucide-angular,
+        lucide-preact,
+        lucide-flutter,
+        lucide-font,
+      ]
 
     steps:
       - uses: actions/checkout@v2
@@ -392,7 +438,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.CREATE_RELEASE_TOKEN }}
         with:
-          tag_name: v${{ steps.new-version.outputs.VERSION }}
+          tag_name: v${{ needs.pre-build.outputs.VERSION }}
           files: |
             lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip
             lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip

README.md

@@ -113,7 +113,7 @@ yarn add lucide-angular
 npm install lucide-angular
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/packages/lucide-angular#lucide-angular).
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-angular#lucide-angular).
 
 ### Preact
 

docs/ICON_DESIGN_GUIDE.md

@@ -5,7 +5,7 @@ Here are rules that should be followed to keep quality and consistency when maki
 ## Summary of the rules we have
 
 1. Icons must be designed on a **24 by 24 pixels** canvas.
-2. Icons must have a **1 pixel padding** within the canvas.
+2. Icons must have at least **1 pixel padding** within the canvas.
 3. Icons must have a **stroke width of 2 pixels**.
 4. Icons must use **round joins**.
 5. Icons must use **round caps**.
@@ -19,7 +19,7 @@ Here are rules that should be followed to keep quality and consistency when maki
 
 ![24px-24px](images/24px-24px.png?raw=true "24px-24px")
 
-### 2. Icons must have a 1 pixel padding within the canvas.
+### 2. Icons must have at least 1 pixel padding within the canvas.
 
 ![1px-padding](images/1px-padding.png?raw=true "1px-padding")
 

docs/INKSCAPE_GUIDE.md

@@ -16,14 +16,14 @@ When opening a new document, Inkscape will create a canvas of a default size.  T
 ![Setting Grid Properties](images/grid-2.png?raw=true "Setting Grid Properties")
 5. Close the Document Properties dialog.
 6. To center the canvas in the viewport, select View -> Zoom -> Drawing.
-   
+
 ## Setting up The Paths
 
 1. Create a path or shape.
 2. With the path selected, open the Stroke and Fill panel by pressing `Ctrl+Shift+F` on your keyboard.
 ![Stroke Style Properties](images/strokes.png?raw=true "Setting Grid Properties")
 3. On the “Stroke Style” tab:
-   * Set Stroke Width to `2px`. 
+   * Set Stroke Width to `2px`.
    * Select the rounded join type.
    * Select the rounded cap type.
 4. If the shape is a rectangle, select the rectangle and in the top of the screen below the menu bar, set `Rx` and `Ry` to `2px`.
@@ -34,4 +34,4 @@ When opening a new document, Inkscape will create a canvas of a default size.  T
 1. When ready to save the file, click Save As and select “Optimized SVG” as the file type.
 ![Save As](images/save-as.png?raw=true "Save as")
 2. After clicking Save, to conform with the other icons in the package, set Pretty Printing to use spaces and set the indentation depth to 2.
-![Optimize](images/optimize-settings.png?raw=true "Optimize")
+![Optimize](images/optimize-settings.png?raw=true "Optimize")

docs/index.md

@@ -0,0 +1,116 @@
+---
+title: Introduction
+---
+
+# Introduction
+
+## What is Lucide?
+
+Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
+
+It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
+
+Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!
+
+### Why choose Lucide over Feather Icons
+
+- Lucide already expended the icon set by 130+ in less then a year, so more icons to work with.
+- Well maintained code base.
+- Active community.
+
+## Getting Started
+
+At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
+
+### Using Lucide packages
+
+### Web
+
+Implementation of the lucide icon library for web applications.
+
+```sh
+npm install lucide
+
+#or
+
+yarn add lucide
+```
+
+For more details, see the [documentation](lucide).
+
+### React
+
+Implementation of the lucide icon library for react applications.
+
+```sh
+yarn add lucide-react
+
+# or
+
+npm install lucide-react
+```
+
+For more details, see the [documentation](lucide-react).
+
+### Vue 2
+
+Implementation of the lucide icon library for vue applications.
+
+```sh
+yarn add lucide-vue
+
+# or
+
+npm install lucide-vue
+```
+
+For more details, see the [documentation](lucide-vue).
+
+### Vue 3
+
+Implementation of the lucide icon library for vue applications.
+
+```sh
+yarn add lucide-vue-next
+
+# or
+
+npm install lucide-vue-next
+```
+
+For more details, see the [documentation](lucide-vue-next).
+
+### Angular
+
+```sh
+yarn add lucide-angular
+
+# or
+
+npm install lucide-angular
+```
+
+For more details, see the [documentation](lucide-angular).
+
+### Preact
+
+Implementation of the lucide icon library for preact applications.
+
+```sh
+yarn add lucide-preact
+
+# or
+
+npm install lucide-preact
+```
+
+For more details, see the [documentation](lucide-preact).
+
+### Figma
+
+The lucide figma plugin.
+
+Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
+
+![Figma Lucide Cover](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover")
+

docs/installation.md

@@ -0,0 +1,13 @@
+---
+title: Installation
+---
+
+# Installation
+
+Hello
+
+> hello
+
+```js
+console.log('asdadfasdf')
+```

docs/packages/lucide-angular.md

@@ -0,0 +1,164 @@
+# Lucide Angular
+
+Implementation of the lucide icon library for angular applications.
+
+## Installation
+
+``` sh
+yarn add lucide-angular
+
+# or
+
+npm install lucide-angular
+```
+
+## How to use
+
+There are three ways for use this library.
+
+### Method 1: createElement
+
+After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
+
+``` html
+<!-- app.component.html -->
+<div id="lucide-icon"></div>
+```
+
+``` js
+// app.component.ts
+
+import { Component, OnInit } from '@angular/core';
+import { createElement } from 'lucide-angular';
+import { Activity } from 'lucide-angular/icons';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+
+export class AppComponent implements OnInit {
+  ngOnInit(): void {
+    const div = document.getElementById('lucide-icon');
+    const elm = createElement(Activity);
+    elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
+
+    if (div) {
+      div.appendChild(elm);
+    }
+  }
+}
+```
+
+### Method 2: User __Tag__ with __name__ property
+
+After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
+
+``` js
+// app.module.ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    LucideAngularModule.pick({ AlarmCheck, Edit })  // add all of icons that is imported.
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+
+export class AppModule { }
+```
+
+``` html
+<!-- app.component.html -->
+<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
+<lucide-icon name="edit" class="myicon"></lucide-icon>
+```
+
+### Method 3: User __Tag__ with __img__ property
+
+After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
+
+``` js
+// app.module.ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { LucideAngularModule } from 'lucide-angular';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    LucideAngularModule.pick({ })
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+
+export class AppModule { }
+```
+
+``` xml
+<!-- app.component.html -->
+<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
+<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
+```
+
+``` js
+// app.component.ts
+import { Component } from '@angular/core';
+import { Airplay, Circle } from 'lucide-angular';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+
+export class AppComponent {
+  ico1 = Airplay;
+  ico2 = Circle;
+}
+```
+
+## Notes
+
+### Import all icons
+
+In `Method 2`: import all icons in `app.module.ts` by:
+
+``` js
+
+import { icons } from 'lucide-angular/icons';
+
+LucideAngularModule.pick(icons)
+
+...
+```
+
+### Tags
+
+You can use the following tags instead of `lucide-icon`:
+
+- lucide-angular
+- i-lucide
+- span-lucide
+
+All of the above are the same

docs/packages/lucide-flutter.md

@@ -0,0 +1,8 @@
+# lucide_icons
+
+Lucide Icons ([lucide.dev](https://lucide.dev)) for Flutter. Visit the website for the full list of icons
+
+## Example
+```dart
+Icon(LucideIcons.activity);
+```

docs/packages/lucide-preact.md

@@ -0,0 +1,79 @@
+---
+title: Lucide Preact
+---
+
+# Lucide Preact
+
+Implementation of the lucide icon library for preact applications.
+
+## Installation
+
+```sh
+yarn add lucide-preact
+
+# or
+
+npm install lucide-preact
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a preact component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` js
+import { Camera } from 'lucide-preact';
+// Returns PreactComponent
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48}/>
+};
+
+export default App;
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+
+### Custom props / svg attributes
+
+You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
+
+``` js
+// Usage
+const App = () => {
+  return <Camera fill="red" stroke-linejoin="bevel"/>
+};
+```
+
+> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` js
+import * as icons from 'lucide-preact';
+
+const Icon = ({name, color, size}) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} />
+};
+
+export default Icon;
+```

docs/packages/lucide-react.md

@@ -0,0 +1,73 @@
+# Lucide React
+
+Implementation of the lucide icon library for react applications
+
+## Installation
+
+```sh
+yarn add lucide-react
+
+# or
+
+npm install lucide-react
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a react component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` js
+import { Camera } from 'lucide-react';
+// Returns ReactComponent
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48}/>
+};
+
+export default App;
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+``` js
+// Usage
+const App = () => {
+  return <Camera fill="red"/>
+};
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` js
+import * as icons from 'lucide-react';
+
+const Icon = ({name, color, size}) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} />
+};
+
+export default Icon;
+```

docs/packages/lucide-vue-next.md

@@ -0,0 +1,105 @@
+# Lucide Vue Next
+
+Implementation of the lucide icon library for Vue 3 applications.
+
+> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue)
+
+## Installation
+
+```sh
+yarn add lucide-vue-next
+
+# or
+
+npm install lucide-vue-next
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a vue component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` vue
+<template>
+  <Camera
+    color="red"
+    :size="32"
+  />
+</template>
+
+<script>
+// Returns Vue component
+import { Camera } from 'lucide-vue-next';
+
+export default {
+  name: "My Component",
+  components: { Camera }
+}
+
+</script>
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+| `defaultClass`| *String* | lucide-icon
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+``` vue
+<template>
+  <Camera fill="red" />
+</template>
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` vue
+<template>
+  <component :is="icon" />
+</template>
+
+<script>
+import * as icons from "lucide-vue-next";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    icon() {
+      return icons[this.name];
+    },
+  },
+};
+</script>
+```
+
+##### Then you can use it like this
+
+``` vue
+<template>
+  <div id="app">
+    <Icon name="Airplay" />
+  </div>
+</template>
+```

docs/packages/lucide-vue.md

@@ -0,0 +1,105 @@
+# Lucide Vue
+
+Implementation of the lucide icon library for Vue applications.
+
+> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next)
+
+## Installation
+
+```sh
+yarn add lucide-vue
+
+# or
+
+npm install lucide-vue
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a vue component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` vue
+<template>
+  <Camera
+    color="red"
+    :size="32"
+  />
+</template>
+
+<script>
+// Returns Vue component
+import { Camera } from 'lucide-vue';
+
+export default {
+  name: "My Component",
+  components: { Camera }
+}
+
+</script>
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+| `defaultClass`| *String* | lucide-icon
+
+### Custom props
+
+You can also pass custom props that will be added in the svg as attributes.
+
+``` vue
+<template>
+  <Camera fill="red" />
+</template>
+```
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` vue
+<template>
+  <component :is="icon" />
+</template>
+
+<script>
+import * as icons from "lucide-vue";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    icon() {
+      return icons[this.name];
+    },
+  },
+};
+</script>
+```
+
+##### Then you can use it like this
+
+``` vue
+<template>
+  <div id="app">
+    <Icon name="Airplay" />
+  </div>
+</template>
+```

docs/packages/lucide.md

@@ -0,0 +1,120 @@
+# Lucide
+
+Implementation of the lucide icon library for web applications.
+
+## Installation
+
+### Package Managers
+
+``` bash
+npm install lucide
+#or
+yarn add lucide
+```
+
+### CDN
+
+``` html
+<!-- Development version -->
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+
+<!-- Production version -->
+<script src="https://unpkg.com/lucide@latest"></script>
+```
+
+## Usage
+
+### With unpkg
+
+Here is a complete example with unpkg
+
+```html
+<!DOCTYPE html>
+<body>
+  <i icon-name="volume-2" class="my-class"></i>
+  <i icon-name="x"></i>
+  <i icon-name="menu"></i>
+
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>
+    lucide.createIcons();
+  </script>
+</body>
+```
+
+### With ESModules
+
+To reduce bundle size, lucide is built to be fully treeshakable.
+The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
+
+```html
+<!-- Your HTML file -->
+<i icon-name="menu"></i>
+```
+
+```js
+import { createIcons, icons } from 'lucide';
+
+// Caution, this will import all the icons and bundle them.
+createIcons({icons});
+
+// Recommended way, to include only the icons you need.
+import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
+
+createIcons({
+  icons: {
+    Menu,
+    ArrowRight,
+    Globe,
+  },
+});
+```
+
+#### Additional Options
+
+In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes.
+
+Here is a full example:
+
+```js
+import { createIcons } from 'lucide';
+
+createIcons({
+  attrs: {
+    class: ['my-custom-class', 'icon'],
+    'stroke-width': 1,
+    stroke: '#333',
+  },
+  nameAttr: 'icon-name', // attribute for the icon name.
+});
+```
+
+#### Treeshake the library, only use the icons you use
+
+```js
+import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
+
+createIcons({
+  icons: {
+    Menu,
+    ArrowRight,
+    Globe,
+  },
+});
+```
+
+#### Custom Element binding
+
+```js
+import { createElement, Menu } from 'lucide';
+
+const menuIcon = createElement(Menu); // Returns HTMLElement (svg)
+
+// set custom attributes with browser native functions
+menuIcon.setAttribute('stroke', '#333');
+menuIcon.classList.add('my-icon-class');
+
+// Append HTMLElement in webpage
+const myApp = document.getElementById('app');
+myApp.appendChild(menuIcon);
+```

icons/alarm-clock-off.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19.94 14A8 8 0 0010 5.25m8.13 12.89A8 8 0 116.87 6.86" />
+  <path d="M22 6l-3-3" />
+  <path d="M6 19l-2 2" />
+  <path d="M2 2l20 20" />
+  <path d="M4 4L2 6" />
+</svg>

icons/archive.svg

@@ -1,13 +1,13 @@
 <svg
- xmlns="http://www.w3.org/2000/svg"
- width="24"
- height="24"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
 >
-  <path d="M20 9v9a2 2 0 01-2 2H6a2 2 0 01-2-2V9M20 4H4a2 2 0 00-2 2v1a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zM10 13h4"/>
-</svg>
+  <path d="M20 9v9a2 2 0 01-2 2H6a2 2 0 01-2-2V9m16-5H4a2 2 0 00-2 2v1a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm-10 9h4" />
+</svg>

icons/bookmark-minus.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 21l-7-4-7 4V5a2 2 0 012-2h10a2 2 0 012 2v16z" />
+  <line x1="15" x2="9" y1="10" y2="10" />
+</svg>

icons/bookmark-plus.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 21l-7-4-7 4V5a2 2 0 012-2h10a2 2 0 012 2v16z" />
+  <line x1="12" x2="12" y1="7" y2="13" />
+  <line x1="15" x2="9" y1="10" y2="10" />
+</svg>

icons/bookmark.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z" />
+  <path d="M19 21l-7-4-7 4V5a2 2 0 012-2h10a2 2 0 012 2v16z" />
 </svg>

icons/chevron-first.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="17 18 11 12 17 6" />
+  <path d="M7 6v12" />
+</svg>

icons/chevron-last.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="7 18 13 12 7 6" />
+  <path d="M17 6v12" />
+</svg>

icons/flag-triangle-left.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M17 22 17 2 7 7 17 12" />
+  <path d="M17 22V2L7 7l10 5" />
 </svg>

icons/flag-triangle-right.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7 22 7 2 17 7 7 12" />
+  <path d="M7 22V2l10 5-10 5" />
 </svg>

icons/folder-open.svg

@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M6 17l2-5h14l-3 8a2 2 0 01-2 1H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h7a2 2 0 012 2v4" />
+</svg>

icons/gem.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polygon points="6 3 18 3 22 9 12 22 2 9" />
+  <path d="M12 22l4-13-3-6" />
+  <path d="M12 22L8 9l3-6" />
+  <path d="M2 9h20" />
+</svg>

icons/graduation-cap.svg

@@ -2,6 +2,7 @@
   xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
+  viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"
   stroke-width="2"

icons/import.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"

icons/japanese-yen.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"

icons/landmark.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="3" y1="22" x2="21" y2="22" />
+  <line x1="6" y1="18" x2="6" y2="11" />
+  <line x1="10" y1="18" x2="10" y2="11" />
+  <line x1="14" y1="18" x2="14" y2="11" />
+  <line x1="18" y1="18" x2="18" y2="11" />
+  <polygon points="12 2 20 7 4 7" />
+</svg>

icons/list-minus.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M21 12h-6" />
+</svg>

icons/list-plus.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M18 9v6" />
+  <path d="M21 12h-6" />
+</svg>

icons/list-x.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M11 12H3" />
+  <path d="M16 6H3" />
+  <path d="M16 18H3" />
+  <path d="M19 10l-4 4" />
+  <path d="M15 10l4 4" />
+</svg>

icons/mountain-snow.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M8 3L12 11L17 6L22 21H2L8 3Z" />
+  <path d="M8 3l4 8 5-5 5 15H2L8 3z" />
   <path d="M4.14 15.08c2.62-1.57 5.24-1.43 7.86.42 2.74 1.94 5.49 2 8.23.19" />
 </svg>

icons/mountain.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M8 3L12 11L17 6L22 21H2L8 3Z" />
+  <path d="M8 3l4 8 5-5 5 15H2L8 3z" />
 </svg>

icons/piggy-bank.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2h0V5z" />
+  <path d="M2 9v1c0 1.1.9 2 2 2h1" />
+  <path d="M16 11h0" />
+</svg>

icons/settings-2.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 7h-9" />
+  <path d="M14 17H5" />
+  <circle cx="17" cy="17" r="3" />
+  <circle cx="7" cy="7" r="3" />
+</svg>

icons/sort-asc.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"
@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 5h10" />
+  <path d="M11 5h4" />
   <path d="M11 9h7" />
-  <path d="M11 13h4" />
+  <path d="M11 13h10" />
   <path d="M3 17l3 3 3-3" />
   <path d="M6 18V4" />
 </svg>

icons/sort-desc.svg

@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
   width="24"
   height="24"
-  xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
   stroke="currentColor"
@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 5h4" />
+  <path d="M11 5h10" />
   <path d="M11 9h7" />
-  <path d="M11 13h10" />
+  <path d="M11 13h4" />
   <path d="M3 17l3 3 3-3" />
   <path d="M6 18V4" />
 </svg>

icons/timer-off.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M10 2h4" />
+  <path d="M7.43 7.433A8 8 0 0118.566 18.57M4.582 11A8 8 0 0015 21.419" />
+  <path d="M2 2l20 20" />
+  <path d="M12 12v-2" />
+</svg>

icons/timer-reset.svg

@@ -10,7 +10,7 @@
   stroke-linejoin="round"
 >
   <path d="M10 2h4" />
-  <path d="M12 14v-4"/>
+  <path d="M12 14v-4" />
   <path d="M4 13a8 8 0 018-7 8 8 0 11-5.3 14L4 17.6" />
   <path d="M9 17H4v5" />
 </svg>

icons/verified.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 3a3.6 3.6 0 00-3.05 1.68 3.6 3.6 0 00-.9-.1 3.6 3.6 0 00-2.42 1.06 3.6 3.6 0 00-.94 3.32A3.6 3.6 0 003 12a3.6 3.6 0 001.69 3.05 3.6 3.6 0 00.95 3.32 3.6 3.6 0 003.35.96A3.6 3.6 0 0012 21a3.6 3.6 0 003.04-1.67 3.6 3.6 0 004.3-4.3A3.6 3.6 0 0021 12a3.6 3.6 0 00-1.67-3.04v0a3.6 3.6 0 00-4.3-4.3A3.6 3.6 0 0012 3z" />
+  <path d="M15 10l-4 4" />
+  <path d="M9 12l2 2" />
+</svg>

icons/wand.svg

@@ -0,0 +1,21 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M15 4V2" />
+  <path d="M15 16v-2" />
+  <path d="M8 9h2" />
+  <path d="M20 9h2" />
+  <path d="M17.8 11.8L19 13" />
+  <path d="M15 9h0" />
+  <path d="M17.8 6.2L19 5" />
+  <path d="M3 21l9-9" />
+  <path d="M12.2 6.2L11 5" />
+</svg>

icons/wrap-text.svg

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <line x1="3" y1="6" x2="21" y2="6" />
+  <path d="M3 12h15a3 3 0 110 6h-4" />
+  <polyline points="16 16 14 18 16 20" />
+  <line x1="3" y1="18" x2="10" y2="18" />
+</svg>

package.json

@@ -30,6 +30,7 @@
     "lucide-preact": "yarn workspace lucide-preact",
     "lucide-vue": "yarn workspace lucide-vue",
     "lucide-vue-next": "yarn workspace lucide-vue-next",
+    "lucide-static": "yarn workspace lucide-static",
     "build:icons": "babel-node ./scripts/buildIcons.js --presets @babel/env",
     "build:outline-icons": "babel-node ./scripts/outlineSvg.js --presets @babel/env",
     "optimize": "babel-node ./scripts/optimizeSvgs.js --presets @babel/env",

packages/lucide-angular/.gitignore

@@ -46,6 +46,9 @@ testem.log
 .DS_Store
 Thumbs.db
 
-#npm-yarn
+# npm-yarn
 package-lock.json
 src/createElement.js
+
+# angular cache
+.angular/cache

packages/lucide-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-angular",
-  "description": "Lucide Angular package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
-  "version": "0.15.30",
+  "description": "A Lucide icon library package for Angular applications",
+  "version": "0.16.12",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",
@@ -23,7 +23,7 @@
   ],
   "scripts": {
     "build": "yarn clean && yarn build:icons && yarn build:ng",
-    "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
+    "clean": "npx shx rm -rf dist && npx shx rm -rf ./src/icons/*.ts",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-angular/src --templateSrc=../packages/lucide-angular/scripts/exportTemplate --iconFileExtention=.ts --exportFileName=index.ts",
     "build:ng": "ng build --prod",
     "test:headless": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
@@ -33,35 +33,31 @@
     "postinstall": "ngcc"
   },
   "dependencies": {
-    "tslib": "^2.0.0"
-  },
-  "peerDependencies": {
-    "@angular/common": "^11.2.6",
-    "@angular/core": "^11.2.6"
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1102.5",
-    "@angular/cli": "~11.2.5",
-    "@angular/common": "~11.2.6",
-    "@angular/compiler": "~11.2.6",
-    "@angular/compiler-cli": "~11.2.6",
-    "@angular/core": "~11.2.6",
-    "@angular/platform-browser": "~11.2.6",
-    "@angular/platform-browser-dynamic": "~11.2.6",
-    "@types/jasmine": "~3.6.0",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.0",
+    "@angular/cli": "~11.2.15",
+    "@angular/common": "~11.2.14",
+    "@angular/compiler": "~11.2.14",
+    "@angular/compiler-cli": "~11.2.14",
+    "@angular/core": "~11.2.14",
+    "@angular/platform-browser": "~11.2.14",
+    "@angular/platform-browser-dynamic": "~11.2.14",
+    "ng-packagr": "^11.2.4",
+    "@types/jasmine": "~3.10.2",
+    "@types/node": "^16.11.7",
+    "codelyzer": "^6.0.2",
+    "jasmine-core": "~3.10.1",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.3.8",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^11.0.0",
+    "karma-jasmine": "~4.0.1",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "protractor": "~7.0.0",
     "puppeteer": "^8.0.0",
-    "ts-node": "~8.3.0",
+    "ts-node": "~10.4.0",
     "tslint": "~6.1.0",
     "typescript": "~4.1.5"
   }

packages/lucide-figma/figma.d.ts

@@ -1,675 +0,0 @@
-// Global variable with Figma's plugin API.
-declare const figma: PluginAPI
-declare const __html__: string
-
-interface PluginAPI {
-  readonly currentPage: PageNode
-
-  // Root of the current Figma document.
-  readonly root: DocumentNode
-
-  // API for accessing viewport information.
-  readonly viewport: ViewportAPI
-
-  // call this once your plugin is finished executing.
-  closePlugin(): void
-
-  // Command that the user chose through menu when launching the plugin.
-  readonly command: string
-
-  // Finds a node by its id. If not found, returns null.
-  getNodeById(id: string): BaseNode | null
-
-  // Finds a style by its id. If not found, returns null.
-  getStyleById(id: string): BaseStyle | null
-
-  // Access browser APIs and/or show UI to the user.
-  showUI(html: string, options?: ShowUIOptions): void
-  readonly ui: UIAPI
-
-  // Lets you store persistent data on the user's local machine
-  readonly clientStorage: ClientStorageAPI
-
-  // This value is returned when a property is in a "mixed" state.
-  // In order to check if a property is in a mixed state, always
-  // compare directly to this value. I.e.
-  // `if (node.cornerRadius === figma.mixed) { ... }`
-  mixed: symbol
-
-  // Creates new nodes. Nodes will start off inserted
-  // into the current page.
-  // To move them elsewhere use `appendChild` or `insertChild`
-  createRectangle(): RectangleNode
-  createLine(): LineNode
-  createEllipse(): EllipseNode
-  createPolygon(): PolygonNode
-  createStar(): StarNode
-  createVector(): VectorNode
-  createText(): TextNode
-  createBooleanOperation(): BooleanOperationNode
-  createFrame(): FrameNode
-  createComponent(): ComponentNode
-  createPage(): PageNode
-  createSlice(): SliceNode
-
-  // Creates styles. A style's id can be assigned to
-  // node properties like textStyleId, fillStyleId, etc.
-  createPaintStyle(): PaintStyle
-  createTextStyle(): TextStyle
-  createEffectStyle(): EffectStyle
-  createGridStyle(): GridStyle
-
-  // These let you insert stuff from the team library if you have the key
-  importComponentByKeyAsync(key: string): Promise<ComponentNode>
-  importStyleByKeyAsync(key: string): Promise<BaseStyle>
-
-  // Return all fonts currently supported for use with the "fontName" property
-  listAvailableFontsAsync(): Promise<Font[]>
-
-  // You must await the promise returned here before being able to use "fontName"
-  loadFontAsync(fontName: FontName): Promise<void>
-
-  // Creates node from an SVG string.
-  createNodeFromSvg(svg: string): FrameNode
-
-  // Creates an Image object using the provided file contents.
-  createImage(data: Uint8Array): Image
-
-  // Groups every node in `nodes` under a new group.
-  group(nodes: ReadonlyArray<BaseNode>, parent: BaseNode & ChildrenMixin, index?: number): FrameNode
-
-  // Flattens every node in `nodes` into a single vector network.
-  flatten(nodes: ReadonlyArray<BaseNode>, parent?: BaseNode & ChildrenMixin, index?: number): VectorNode
-}
-
-interface ClientStorageAPI {
-  // This stores information in the browser, not on the server. It's similar to localStorage, but is
-  // asynchronous, and allows storing objects, arrays, strings, numbers, booleans, null, undefined and Uint8Arrays.
-  getAsync(key: string): Promise<any | undefined>
-  setAsync(key: string, value: any): Promise<void>
-}
-
-type ShowUIOptions = {
-  visible?: boolean, // defaults to true
-  width?: number,    // defaults to 300
-  height?: number,   // defaults to 200
-}
-
-interface UIAPI {
-  show(): void
-  hide(): void
-  resize(width: number, height: number): void
-  close(): void
-
-  // Sends a message to the iframe.
-  postMessage(pluginMessage: any): void
-
-  // Registers a callback for messages sent by the iframe.
-  onmessage: ((pluginMessage: any) => void) | undefined
-}
-
-interface ViewportAPI {
-  center: { x: number, y: number }
-
-  // 1.0 means 100% zoom, 0.5 means 50% zoom.
-  zoom: number
-
-  // Adjust the viewport such that it shows the provided nodes.
-  scrollAndZoomIntoView(nodes: ReadonlyArray<BaseNode>)
-}
-
-// manifest.json format
-interface ManifestJson {
-  // Name of the plugin.
-  name: string
-
-  // Version of the runtime that the plugin uses, e.g. '0.5.0'.
-  version: string
-
-  // The file name that contains the plugin code.
-  script: string
-
-  // The file name that contains the html code made available in script.
-  html?: string
-
-  // Shell command to be executed before the contents of the `html` and `script` files are read.
-  build?: string
-
-  // Menu items to show up in UI.
-  menu?: ManifestMenuItem[]
-}
-
-type ManifestMenuItem =
-  // Clickable menu item.
-  { name: string, command: string } |
-  // Separator
-  { separator: true } |
-  // Submenu
-  { name: string, menu: ManifestMenuItem[] }
-
-////////////////////////////////////////////////////////////////////////////////
-// Values
-
-// These are the top two rows of a 3x3 matrix. This is enough to represent
-// translation, rotation, and skew.
-type Transform = [
-  [number, number, number],
-  [number, number, number]
-]
-
-interface Vector {
-  readonly x: number
-  readonly y: number
-}
-
-interface RGB {
-  readonly r: number
-  readonly g: number
-  readonly b: number
-}
-
-interface RGBA {
-  readonly r: number
-  readonly g: number
-  readonly b: number
-  readonly a: number
-}
-
-interface FontName {
-  readonly family: string
-  readonly style: string
-}
-
-interface ArcData {
-  readonly startingAngle: number
-  readonly endingAngle: number
-  readonly innerRadius: number
-}
-
-interface ShadowEffect {
-  readonly type: "DROP_SHADOW" | "INNER_SHADOW"
-  readonly color: RGBA
-  readonly offset: Vector
-  readonly radius: number
-  readonly visible: boolean
-  readonly blendMode: BlendMode
-}
-
-interface BlurEffect {
-  readonly type: "LAYER_BLUR" | "BACKGROUND_BLUR"
-  readonly radius: number
-  readonly visible: boolean
-}
-
-type Effect = ShadowEffect | BlurEffect
-
-type ConstraintType = "MIN" | "CENTER" | "MAX" | "STRETCH" | "SCALE"
-
-interface Constraints {
-  readonly horizontal: ConstraintType
-  readonly vertical: ConstraintType
-}
-
-interface ColorStop {
-  readonly position: number
-  readonly color: RGBA
-}
-
-interface SolidPaint {
-  readonly type: "SOLID"
-  readonly color: RGB
-
-  readonly visible?: boolean
-  readonly opacity?: number
-}
-
-interface GradientPaint {
-  readonly type: "GRADIENT_LINEAR" | "GRADIENT_RADIAL" | "GRADIENT_ANGULAR" | "GRADIENT_DIAMOND"
-  readonly gradientTransform: Transform
-  readonly gradientStops: ReadonlyArray<ColorStop>
-
-  readonly visible?: boolean
-  readonly opacity?: number
-}
-
-interface ImagePaint {
-  readonly type: "IMAGE"
-  readonly scaleMode: "FILL" | "FIT" | "CROP" | "TILE"
-  readonly image: Image | null
-  readonly imageTransform?: Transform // setting for "CROP"
-  readonly scalingFactor?: number // setting for "TILE"
-
-  readonly visible?: boolean
-  readonly opacity?: number
-}
-
-type Paint = SolidPaint | GradientPaint | ImagePaint
-
-interface Guide {
-  readonly axis: "X" | "Y"
-  readonly offset: number
-}
-
-interface RowsColsLayoutGrid {
-  readonly pattern: "ROWS" | "COLUMNS"
-  readonly alignment: "MIN" | "STRETCH" | "CENTER"
-  readonly gutterSize: number
-
-  readonly count: number        // Infinity when "Auto" is set in the UI
-  readonly sectionSize?: number // Not set for alignment: "STRETCH"
-  readonly offset?: number      // Not set for alignment: "CENTER"
-
-  readonly visible?: boolean
-  readonly color?: RGBA
-}
-
-interface GridLayoutGrid {
-  readonly pattern: "GRID"
-  readonly sectionSize: number
-
-  readonly visible?: boolean
-  readonly color?: RGBA
-}
-
-type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid
-
-interface ExportSettingsImage {
-  format: "JPG" | "PNG"
-  contentsOnly?: boolean    // defaults to true
-  suffix?: string
-  constraint?: {            // defaults to unscaled ({ type: "SCALE", value: 1 })
-    type: "SCALE" | "WIDTH" | "HEIGHT"
-    value: number
-  }
-}
-
-interface ExportSettingsSVG {
-  format: "SVG"
-  contentsOnly?: boolean    // defaults to true
-  suffix?: string
-  svgOutlineText?: boolean  // defaults to true
-  svgIdAttribute?: boolean  // defaults to false
-  svgSimplifyStroke?: boolean // defaults to true
-}
-
-interface ExportSettingsPDF {
-  format: "PDF"
-  contentsOnly?: boolean    // defaults to true
-  suffix?: string
-}
-
-type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF
-
-type WindingRule = "NONZERO" | "EVENODD"
-
-interface VectorVertex {
-  readonly x: number
-  readonly y: number
-  readonly strokeCap?: StrokeCap
-  readonly strokeJoin?: StrokeJoin
-  readonly cornerRadius?: number
-  readonly handleMirroring?: HandleMirroring
-}
-
-interface VectorSegment {
-  readonly start: number
-  readonly end: number
-  readonly tangentStart?: Vector  // Defaults to { x: 0, y: 0 }
-  readonly tangentEnd?: Vector  // Defaults to { x: 0, y: 0 }
-}
-
-interface VectorRegion {
-  readonly windingRule: WindingRule
-  readonly loops: ReadonlyArray<ReadonlyArray<number>>
-}
-
-interface VectorNetwork {
-  readonly vertices: ReadonlyArray<VectorVertex>
-  readonly segments: ReadonlyArray<VectorSegment>
-  readonly regions?: ReadonlyArray<VectorRegion> // Defaults to []
-}
-
-interface VectorPath {
-  // Similar to the svg fill-rule
-  // "NONE" means an open path won't have a fill
-  readonly windingRule: WindingRule | "NONE"
-  readonly data: string
-}
-
-type VectorPaths = ReadonlyArray<VectorPath>
-
-interface NumberWithUnits {
-  readonly value: number
-  readonly units: "PIXELS" | "PERCENT"
-}
-
-type BlendMode =
-  "PASS_THROUGH" |
-  "NORMAL" |
-  "DARKEN" |
-  "MULTIPLY" |
-  "LINEAR_BURN" |
-  "COLOR_BURN" |
-  "LIGHTEN" |
-  "SCREEN" |
-  "LINEAR_DODGE" |
-  "COLOR_DODGE" |
-  "OVERLAY" |
-  "SOFT_LIGHT" |
-  "HARD_LIGHT" |
-  "DIFFERENCE" |
-  "EXCLUSION" |
-  "HUE" |
-  "SATURATION" |
-  "COLOR" |
-  "LUMINOSITY"
-
-interface Font {
-  fontName: FontName
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Mixins
-
-interface BaseNodeMixin {
-  readonly id: string
-  readonly parent: (BaseNode & ChildrenMixin) | null
-  name: string
-  visible: boolean
-  locked: boolean
-  removed: boolean
-  toString(): string
-  remove(): void
-
-  // Attach custom data to a node. Only your plugin will be able to read this.
-  getPluginData(key: string): string
-  setPluginData(key: string, value: string): void
-
-  // Attach custom data to a node. All plugins will be able to read this.
-  // Namespace is a string that must be at least 3 alphanumeric characters, and should
-  // be a name related to your plugin. This is a mandatory argument to avoid multiple
-  // multiple plugins adding keys like "data" and colliding with each other. Other
-  // plugins will still be able to read shared plugin data as long as they know the
-  // namespace you use.
-  getSharedPluginData(namespace: string, key: string): string
-  setSharedPluginData(namespace: string, key: string, value: string): void
-}
-
-interface ChildrenMixin {
-  // Sorted back-to-front. I.e. the top-most child is last in this array.
-  readonly children: ReadonlyArray<BaseNode>
-
-  // Adds to the end of the .children array. I.e. visually on top of all other
-  // children.
-  appendChild(child: BaseNode): void
-
-  insertChild(index: number, child: BaseNode): void
-  findAll(callback?: (node: BaseNode) => boolean): ReadonlyArray<BaseNode>
-  findOne(callback: (node: BaseNode) => boolean): BaseNode | null
-}
-
-interface LayoutMixin {
-  readonly absoluteTransform: Transform
-  relativeTransform: Transform
-  x: number // The same as "relativeTransform[0][2]"
-  y: number // The same as "relativeTransform[1][2]"
-  rotation: number // The angle of the x axis of "relativeTransform" in degrees. Returns values from -180 to 180.
-
-  readonly size: Vector
-  readonly width: number // The same as "size.x"
-  readonly height: number // The same as "size.y"
-
-  // Resizes the node. If children of the node has constraints, it applies those constraints
-  // width and height must be >= 0.01
-  resize(width: number, height: number): void
-
-  // Resizes the node. Children of the node are never resized, even if those children have
-  // constraints. width and height must be >= 0.01
-  resizeWithoutConstraints(width: number, height: number): void
-
-  constraints: Constraints
-}
-
-interface BlendMixin {
-  opacity: number
-  blendMode: BlendMode
-  isMask: boolean
-  effects: ReadonlyArray<Effect>
-  effectStyleId: string
-}
-
-interface FrameMixin {
-  backgrounds: ReadonlyArray<Paint>
-  layoutGrids: ReadonlyArray<LayoutGrid>
-  clipsContent: boolean
-  guides: ReadonlyArray<Guide>
-  gridStyleId: string
-  backgroundStyleId: string
-}
-
-type StrokeCap = "NONE" | "ROUND" | "SQUARE" | "ARROW_LINES" | "ARROW_EQUILATERAL"
-type StrokeJoin = "MITER" | "BEVEL" | "ROUND"
-type HandleMirroring = "NONE" | "ANGLE" | "ANGLE_AND_LENGTH"
-
-interface GeometryMixin {
-  fills: ReadonlyArray<Paint> | symbol // This can return figma.mixed on TEXT nodes
-  strokes: ReadonlyArray<Paint>
-  strokeWeight: number
-  strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE"
-  strokeCap: StrokeCap | symbol // This can return figma.mixed on VECTOR nodes if vertices have different strokeCap values
-  strokeJoin: StrokeJoin | symbol // This can return figma.mixed on VECTOR nodes if vertices have different strokeJoin values
-  dashPattern: ReadonlyArray<number>
-  fillStyleId: string | symbol // This can return figma.mixed on TEXT nodes
-  strokeStyleId: string
-}
-
-interface CornerMixin {
-  // This can return figma.mixed on VECTOR nodes if vertices have different cornerRadius values,
-  // and on RECTANGLE nodes if node.topLeftRadius etc has different values
-  cornerRadius: number | symbol
-
-  cornerSmoothing: number
-}
-
-interface ExportMixin {
-  exportSettings: ExportSettings[]
-  exportAsync(settings?: ExportSettings): Promise<Uint8Array> // Defaults to PNG format
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Nodes
-
-interface DocumentNode extends BaseNodeMixin, ChildrenMixin {
-  readonly type: "DOCUMENT"
-  clone(): DocumentNode // Note: this always throws an error
-}
-
-interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin {
-  readonly type: "PAGE"
-  clone(): PageNode // cloned node starts off inserted into current page
-
-  guides: ReadonlyArray<Guide>
-  selection: ReadonlyArray<BaseNode>
-}
-
-interface FrameNode extends BaseNodeMixin, BlendMixin, ChildrenMixin, FrameMixin, LayoutMixin, ExportMixin {
-  readonly type: "FRAME" | "GROUP"
-  clone(): FrameNode // cloned node starts off inserted into current page
-}
-
-interface SliceNode extends BaseNodeMixin, LayoutMixin, ExportMixin {
-  readonly type: "SLICE"
-  clone(): SliceNode // cloned node starts off inserted into current page
-}
-
-interface RectangleNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
-  readonly type: "RECTANGLE"
-  clone(): RectangleNode // cloned node starts off inserted into current page
-  topLeftRadius: number
-  topRightRadius: number
-  bottomLeftRadius: number
-  bottomRightRadius: number
-}
-
-interface LineNode extends BaseNodeMixin, BlendMixin, GeometryMixin, LayoutMixin, ExportMixin {
-  readonly type: "LINE"
-  clone(): LineNode // cloned node starts off inserted into current page
-}
-
-interface EllipseNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
-  readonly type: "ELLIPSE"
-  clone(): EllipseNode // cloned node starts off inserted into current page
-  arcData: ArcData
-}
-
-interface PolygonNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
-  readonly type: "POLYGON"
-  clone(): PolygonNode // cloned node starts off inserted into current page
-  pointCount: number
-}
-
-interface StarNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
-  readonly type: "STAR"
-  clone(): StarNode // cloned node starts off inserted into current page
-  pointCount: number
-
-  // This is a percentage value from 0 to 1
-  innerRadius: number
-}
-
-interface VectorNode extends BaseNodeMixin, BlendMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
-  readonly type: "VECTOR"
-  clone(): VectorNode // cloned node starts off inserted into current page
-  vectorNetwork: VectorNetwork
-  vectorPaths: VectorPaths
-  handleMirroring: HandleMirroring | symbol // This can return figma.mixed if vertices have different handleMirroring values
-}
-
-interface TextNode extends BaseNodeMixin, BlendMixin, GeometryMixin, LayoutMixin, ExportMixin {
-  readonly type: "TEXT"
-  clone(): TextNode // cloned node starts off inserted into current page
-  characters: string
-  textAlignHorizontal: "LEFT" | "CENTER" | "RIGHT" | "JUSTIFIED"
-  textAlignVertical: "TOP" | "CENTER" | "BOTTOM"
-  textAutoResize: "NONE" | "WIDTH_AND_HEIGHT" | "HEIGHT"
-  paragraphIndent: number
-  paragraphSpacing: number
-  autoRename: boolean
-
-  // These properties can all return figma.mixed if the text has multiple values for the property
-  textStyleId: string | symbol
-  fontSize: number | symbol
-  fontName: FontName | symbol
-  textCase: "ORIGINAL" | "UPPER" | "LOWER" | "TITLE" | symbol
-  textDecoration: "NONE" | "UNDERLINE" | "STRIKETHROUGH" | symbol
-  letterSpacing: NumberWithUnits | symbol
-  lineHeight: NumberWithUnits | symbol
-}
-
-interface ComponentNode extends BaseNodeMixin, BlendMixin, ChildrenMixin, FrameMixin, LayoutMixin, ExportMixin {
-  readonly type: "COMPONENT"
-  clone(): ComponentNode // cloned node starts off inserted into current page
-
-  createInstance(): InstanceNode // instance starts off inserted into current page
-  description: string
-  readonly remote: boolean
-  readonly key: string // The key to use with "importComponentByKeyAsync"
-}
-
-interface InstanceNode extends BaseNodeMixin, BlendMixin, ChildrenMixin, FrameMixin, LayoutMixin, ExportMixin {
-  readonly type: "INSTANCE"
-  clone(): InstanceNode // cloned node starts off inserted into current page
-  masterComponent: ComponentNode
-}
-
-interface BooleanOperationNode extends BaseNodeMixin, BlendMixin, ChildrenMixin, CornerMixin, GeometryMixin, LayoutMixin, ExportMixin {
-  readonly type: "BOOLEAN_OPERATION"
-  clone(): BooleanOperationNode // cloned node starts off inserted into current page
-  booleanOperation: "UNION" | "INTERSECT" | "SUBTRACT" | "EXCLUDE"
-}
-
-type BaseNode =
-  DocumentNode |
-  PageNode |
-  SliceNode |
-  FrameNode |
-  ComponentNode |
-  InstanceNode |
-  BooleanOperationNode |
-  VectorNode |
-  StarNode |
-  LineNode |
-  EllipseNode |
-  PolygonNode |
-  RectangleNode |
-  TextNode
-
-type NodeType =
-  "DOCUMENT" |
-  "PAGE" |
-  "SLICE" |
-  "FRAME" |
-  "GROUP" |
-  "COMPONENT" |
-  "INSTANCE" |
-  "BOOLEAN_OPERATION" |
-  "VECTOR" |
-  "STAR" |
-  "LINE" |
-  "ELLIPSE" |
-  "POLYGON" |
-  "RECTANGLE" |
-  "TEXT"
-
-////////////////////////////////////////////////////////////////////////////////
-// Styles
-type StyleType = "PAINT" | "TEXT" | "EFFECT" | "GRID"
-
-interface BaseStyle {
-  // The string to uniquely identify a style by
-  readonly id: string
-  readonly type: StyleType
-  name: string // Note: setting this also sets "autoRename" to false on TextNodes
-  description: string
-  remote: boolean
-  readonly key: string // The key to use with "importStyleByKeyAsync"
-  remove(): void
-}
-
-interface PaintStyle extends BaseStyle {
-  type: "PAINT"
-  paints: ReadonlyArray<Paint>
-}
-
-interface TextStyle extends BaseStyle {
-  type: "TEXT"
-  fontSize: number
-  textDecoration: "NONE" | "UNDERLINE" | "STRIKETHROUGH"
-  fontName: FontName
-  letterSpacing: NumberWithUnits
-  lineHeight: NumberWithUnits
-  paragraphIndent: number
-  paragraphSpacing: number
-  textCase: "ORIGINAL" | "UPPER" | "LOWER" | "TITLE"
-}
-
-interface EffectStyle extends BaseStyle {
-  type: "EFFECT"
-  effects: ReadonlyArray<Paint>
-}
-
-interface GridStyle extends BaseStyle {
-  type: "GRID"
-  layoutGrids: ReadonlyArray<LayoutGrid>
-}
-
-////////////////////////////////////////////////////////////////////////////////
-// Other
-
-interface Image {
-  // Returns a unique hash for the image
-  readonly hash: string
-
-  // The contents of the image file
-  getBytesAsync(): Promise<Uint8Array>
-}

packages/lucide-figma/manifest.json

@@ -2,6 +2,16 @@
   "name": "Lucide Icons",
   "id": "939567362549682242",
   "api": "1.0.0",
-  "ui": "build/ui.html",
-  "main": "build/main.js"
+  "editorType": ["figma"],
+  "main": "dist/assets/main.js",
+  "ui": {
+    "interface": "dist/src/interface/interface.html",
+    "worker": "dist/src/worker/worker.html"
+  },
+  "parameterOnly": false,
+  "parameters": [{
+    "name": "Icon",
+    "key": "icon-name",
+    "description": "Enter the name of the icon you want to insert."
+  }]
 }

packages/lucide-figma/package.json

@@ -1,27 +1,30 @@
 {
   "name": "lucide-figma",
   "version": "0.15.11",
-  "license": "ISC",
   "private": true,
-  "main": "build/ui.js",
+  "license": "ISC",
+  "main": "src/main.js",
   "scripts": {
-    "build": "webpack --mode=production",
-    "watch": "webpack --mode=development --watch"
+    "dev": "vite",
+    "build": "tsc && rm -rf dist && yarn build:main && yarn build:worker && yarn build:interface",
+    "build:main": "INPUT=main vite build",
+    "build:worker": "INPUT=worker vite build",
+    "build:interface": "INPUT=interface vite build",
+    "serve": "vite preview"
   },
   "dependencies": {
     "@emotion/core": "^10.0.14",
-    "@types/react": "^16.8.23",
-    "@types/react-dom": "^16.8.4",
-    "css-loader": "^3.0.0",
-    "html-webpack-inline-source-plugin": "^0.0.10",
-    "html-webpack-plugin": "^3.2.0",
-    "lucide-react": "0.15.11",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "style-loader": "^0.23.1",
-    "ts-loader": "^6.0.4",
-    "typescript": "^3.5.2",
-    "webpack": "^4.35.2",
-    "webpack-cli": "^3.3.5"
+    "minimist": "^1.2.5",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@figma/plugin-typings": "^1.36.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react": "^1.0.0",
+    "typescript": "^4.3.2",
+    "vite": "^2.6.4",
+    "vite-plugin-singlefile": "^0.5.1"
   }
 }

packages/lucide-figma/src/api/fetchIcons.ts

@@ -0,0 +1,68 @@
+import iconNodeToSvg from "../helpers/iconNodeToSvg"
+
+export type IconNode = any[]
+export type IconName = string
+
+export type Tag = string[]
+export interface Tags {
+  [key:string]: Tag
+}
+
+export interface LucideIcons {
+  version: string
+  iconNodes: { [key: IconName]: IconNode }
+  tags: Tags,
+  svgs: { [key: IconName]: string }
+}
+
+export const fetchIcons = async (cachedIcons? : LucideIcons): Promise<LucideIcons> => {
+  const response = await fetch('https://unpkg.com/lucide-static@latest/package.json')
+  const packageJson = await response.json();
+
+  if(cachedIcons && cachedIcons?.version === packageJson.version) {
+    return cachedIcons
+  }
+
+  const iconNodesResponse = await fetch(`https://unpkg.com/lucide-static@${packageJson.version}/icon-nodes.json`)
+  const tagsResponse = await fetch('https://unpkg.com/lucide-static@latest/tags.json')
+
+  const iconNodes = await iconNodesResponse.json();
+  const tags = await tagsResponse.json();
+  const svgs = Object.keys(iconNodes).reduce((acc : { [key:string]: string}, iconName) => {
+    acc[iconName] = iconNodeToSvg(iconName, iconNodes[iconName])
+    return acc
+  }, {})
+
+  const lucideIcons: LucideIcons = {
+    version: packageJson.version,
+    tags,
+    iconNodes,
+    svgs
+  }
+
+  parent.postMessage({
+    pluginMessage: {
+      type: "setCachedIcons",
+      lucideIcons
+    }
+  }, "*")
+
+  return lucideIcons
+}
+
+export const getIcons = () => new Promise<LucideIcons>(async (resolve, reject)=> {
+
+  parent.postMessage({
+    pluginMessage: {
+      type: "getCachedIcons",
+    }
+  }, "*")
+
+  window.onmessage = async (event) => {
+    if (event.type === 'message' && event?.data?.pluginMessage.type === 'cachedIcons') {
+
+      const lucideIcons = await fetchIcons(event?.data?.pluginMessage?.cachedIcons)
+      resolve(lucideIcons)
+    }
+  }
+});

packages/lucide-figma/src/components/IconButton/IconButton.scss

@@ -0,0 +1,16 @@
+.icon-button {
+  padding: 8px;
+  color: var(--color-black);
+  background: transparent;
+  border: 0;
+  border-radius: 2px;
+  appearance: none;
+  outline: 0;
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+  }
+  &:focus,
+  &:active {
+    box-shadow: inset 0 0 0 2px var(--color-blue);
+  }
+}

packages/lucide-figma/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,32 @@
+import { renderToString } from 'react-dom/server'
+import { FC } from 'react';
+import './IconButton.scss'
+
+interface IconButtonProps {
+  name: string,
+  component: FC,
+}
+
+function IconButton({ name, component: IconComponent }: IconButtonProps) {
+  const onIconClick = () => {
+    const svg = renderToString(<IconComponent/>);
+
+    parent.postMessage({ pluginMessage: {
+      type: 'drawIcon',
+      icon: { name, svg }
+    }}, '*')
+  }
+
+  return (
+    <button
+      key={name}
+      aria-label={name}
+      onClick={onIconClick}
+      className='icon-button'
+    >
+      <IconComponent />
+    </button>
+  )
+}
+
+export default IconButton

packages/lucide-figma/src/components/IconButton/index.ts

@@ -0,0 +1 @@
+export { default } from './IconButton'

packages/lucide-figma/src/components/SearchInput/SearchInput.scss

@@ -0,0 +1,17 @@
+.search-input {
+  .icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: 4px;
+  }
+  input {
+    width: 100%;
+    height: 40px;
+    padding: 0 16px 0 36px;
+    font-family: inherit;
+    font-size: 11px;
+    border: 0;
+    outline: 0;
+  }
+}

packages/lucide-figma/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,30 @@
+import "./SearchInput.scss"
+import { ChangeEvent } from "react"
+import SearchIcon from "../icons/SearchIcon"
+
+interface SearchInputProps extends React.HTMLProps<HTMLDivElement> {
+  value: string,
+  iconCount: number,
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
+}
+
+function SearchInput({ value, onChange, iconCount, className, ...props }: SearchInputProps) {
+  return (
+    <div
+      className="search-input"
+      {...props}
+    >
+      <SearchIcon className='icon'/>
+      <input
+        autoFocus
+        type="search"
+        value={value}
+        onChange={onChange}
+        placeholder={`Search ${iconCount} icons`}
+        className="input__field"
+      />
+    </div>
+  )
+}
+
+export default SearchInput

packages/lucide-figma/src/components/SearchInput/index.ts

@@ -0,0 +1 @@
+export { default } from './SearchInput'

packages/lucide-figma/src/components/icon-button.tsx

@@ -1,44 +0,0 @@
-import { jsx } from '@emotion/core'
-import theme from '../theme'
-import { renderToString } from 'react-dom/server'
-import { FC } from 'react';
-
-interface IconButtonProps {
-  name: string,
-  component: FC,
-}
-
-function IconButton({ name, component: IconComponent }: IconButtonProps) {
-  const onIconclick = () => {
-    const svg = renderToString(<IconComponent/>);
-
-    parent.postMessage({ pluginMessage: { name, svg }}, '*')
-  }
-
-  return (
-    <button
-      key={name}
-      aria-label={name}
-      onClick={onIconclick}
-      css={{
-        padding: theme.space[2],
-        color: '#333',
-        background: 'transparent',
-        border: 0,
-        borderRadius: theme.radii[1],
-        appearance: 'none',
-        outline: 0,
-        '&:hover': {
-          background: 'rgba(0, 0, 0, 0.06)',
-        },
-        '&:focus, &:active': {
-          boxShadow: `inset 0 0 0 2px ${theme.colors.blue}`,
-        },
-      }}
-    >
-      <IconComponent />
-    </button>
-  )
-}
-
-export default IconButton

packages/lucide-figma/src/components/search-input.tsx

@@ -1,43 +0,0 @@
-import { jsx } from '@emotion/core'
-import theme from '../theme'
-import SearchIcon from './search-icon'
-interface SearchInputProps extends React.HTMLProps<HTMLDivElement> {
-  value: string,
-  iconCount: number,
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-}
-
-function SearchInput({ value, onChange, iconCount, ...props }: SearchInputProps) {
-  return (
-    <div css={{ position: 'relative' }} {...props}>
-      <div
-        css={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          padding: theme.space[1],
-        }}
-      >
-        <SearchIcon fill="#333" />
-      </div>
-      <input
-        autoFocus
-        type="search"
-        value={value}
-        onChange={onChange}
-        placeholder={`Search ${iconCount} icons`}
-        css={{
-          width: '100%',
-          height: 40,
-          padding: `0 ${theme.space[4]} 0 36px`,
-          fontFamily: 'inherit',
-          fontSize: theme.fontSizes[0],
-          border: 0,
-          outline: 0,
-        }}
-      />
-    </div>
-  )
-}
-
-export default SearchInput

packages/lucide-figma/src/helpers/filterIcons.ts

@@ -0,0 +1,13 @@
+import { Tags } from "../api/fetchIcons";
+import { Icon } from "../hooks/useSearch";
+
+export default (icons: Icon[], tags: Tags ,query:string) =>
+  icons.filter(([name]: Icon) => {
+    const iconTags = tags && tags[name] ? tags[name] : []
+
+    return [name, ...iconTags].some(
+      (item:string) => item
+        .toLowerCase()
+        .includes(query)
+      )
+  })

packages/lucide-figma/src/helpers/iconNodeToSvg.ts

@@ -0,0 +1,11 @@
+import { createReactComponent } from "lucide-react";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { IconNode } from "../api/fetchIcons";
+
+const iconNodeToSvg = (iconName: string, iconNode : IconNode) => {
+  const IconComponent = createReactComponent(iconName, iconNode)
+  return  renderToString(createElement(IconComponent));
+}
+
+export default iconNodeToSvg

packages/lucide-figma/src/hooks/useSearch.tsx

@@ -0,0 +1,17 @@
+import { IconName, IconNode, Tags } from "../api/fetchIcons";
+import filterIcons from "../helpers/filterIcons";
+
+export type Icon = [
+  name: IconName,
+  iconNode: IconNode
+]
+
+function useSearch(icons: Icon[], tags: Tags ,query: string) {
+  if(!query) return icons;
+
+  const searchString = query.toLowerCase()
+
+  return filterIcons(icons, tags, searchString);
+}
+
+export default useSearch;

packages/lucide-figma/src/icons/search-large.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.8744 19.5815c-1.0453.8849-2.3975 1.4185-3.8744 1.4185-3.3137 0-6-2.6863-6-6s2.6863-6 6-6 6 2.6863 6 6c0 1.4769-.5336 2.8291-1.4185 3.8744l4.2721 4.272-.7072.7072zm1.1256-4.5815c0 2.7614-2.2386 5-5 5s-5-2.2386-5-5 2.2386-5 5-5 5 2.2386 5 5z" fill="#000" fill-rule="evenodd"/></svg>

packages/lucide-figma/src/icons/search.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.3972 18.6046c-.7793.625-1.7687.9988-2.8455.9988-2.5138 0-4.5517-2.0378-4.5517-4.5517 0-2.5138 2.0379-4.5517 4.5517-4.5517 2.5139 0 4.5517 2.0379 4.5517 4.5517 0 1.0769-.3739 2.0664-.999 2.8458l3.2491 3.2492-.7071.7071zm.7062-3.5529c0 1.9616-1.5901 3.5517-3.5517 3.5517-1.9615 0-3.5517-1.5901-3.5517-3.5517 0-1.9615 1.5902-3.5517 3.5517-3.5517 1.9616 0 3.5517 1.5902 3.5517 3.5517z" fill="#000" fill-rule="evenodd"/></svg>

packages/lucide-figma/src/interface/interface.html

@@ -0,0 +1,3 @@
+<script type="module" src="./interface.tsx"></script>
+
+<div id="root"></div>

packages/lucide-figma/src/interface/interface.scss

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9')
+      format('woff2'),
+    url('https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9')
+      format('woff');
+}
+
+:root {
+  --color-blue: #18a0fb;
+  --color-black: #333;
+}
+
+body {
+  font-family: Inter, sans-serif;
+  font-size: 11px;
+  margin: 0;
+}
+
+.search-input {
+  position: sticky;
+  top: 0;
+  border-bottom: 1px solid #e5e5e5;
+  backface-visibility: hidden;
+}
+
+main {
+  padding-bottom: 8px;
+}
+
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: 8px;
+}
+
+footer {
+  margin-top: 8px;
+  padding: 8px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.5);
+
+  .footer-link {
+    color: inherit;
+  }
+}

packages/lucide-figma/src/interface/interface.tsx

@@ -0,0 +1,67 @@
+import { useEffect, useMemo, useState } from 'react'
+import { createReactComponent } from 'lucide-react'
+import ReactDOM from 'react-dom'
+
+import IconButton from '../components/IconButton'
+import SearchInput from '../components/SearchInput'
+import useSearch, { Icon } from '../hooks/useSearch'
+
+import { getIcons } from '../api/fetchIcons'
+import './interface.scss'
+
+function App() {
+  const [query, setQuery] = useState('')
+  const [icons, setIcons] = useState<Icon[]>([])
+  const [tags, setTags] = useState({})
+  const [version, setVersion ] = useState('')
+
+  const searchResults = useMemo(() => useSearch(icons, tags, query), [icons, query])
+
+  const getLatestIcons = async () => {
+    const lucideIcons = await getIcons()
+
+    setIcons(Object.entries(lucideIcons.iconNodes))
+    setTags(lucideIcons.tags)
+    setVersion(lucideIcons.version)
+  }
+
+  useEffect(() => {
+    getLatestIcons()
+  }, [])
+
+  if(!icons.length) {
+    return null
+  }
+
+  return (
+    <div>
+      <SearchInput
+        value={query}
+        iconCount={icons.length}
+        onChange={(event)  => setQuery(event.target.value)}
+      />
+      <main>
+        <div className='icon-grid'>
+          {searchResults.map(([name, iconNode] :any) => (
+            <IconButton
+              name={name}
+              key={name}
+              component={createReactComponent(name, iconNode)}
+            />
+          ))}
+        </div>
+        <footer>
+          <a
+            href="https://lucide.dev"
+            target="_blank"
+            className='footer-link'
+          >
+            Lucide v{version}
+          </a>
+        </footer>
+      </main>
+    </div>
+  )
+}
+
+ReactDOM.render(<App />, document.getElementById('root'))

packages/lucide-figma/src/main.ts

@@ -1,9 +1,97 @@
-figma.showUI(__html__, { width: 300, height: 400 })
+import type { LucideIcons } from "./api/fetchIcons";
+import filterIcons from "./helpers/filterIcons";
 
-figma.ui.onmessage = ({name, svg}) => {
-  const icon = figma.createNodeFromSvg(svg)
-  icon.name = name
-  icon.x = figma.viewport.center.x
-  icon.y = figma.viewport.center.y
-  figma.currentPage.selection = [icon]
+figma.showUI(__uiFiles__.worker, { visible: false })
+
+let cachedIcons: LucideIcons
+
+const setResults = ({result, query, lucideIcons} : { result: SuggestionResults, query: string, lucideIcons: LucideIcons }) => {
+  const icons = Object.entries(lucideIcons.iconNodes);
+
+  const suggestions = filterIcons(icons, lucideIcons.tags, query.toLowerCase()).map(([name]) => ({
+    name,
+    icon: lucideIcons.svgs[name]
+  }))
+
+  result.setSuggestions(suggestions)
 }
+
+figma.parameters.on('input', async ({ parameters, key, query, result }) => {
+  if (key === 'icon-name') {
+    console.log('typ tpy', query);
+    cachedIcons = await figma.clientStorage.getAsync(`lucide-icons`)
+    console.log('cachedIcons', cachedIcons);
+
+    if(cachedIcons && cachedIcons.iconNodes && cachedIcons.tags) {
+      setResults({result, query, lucideIcons: cachedIcons})
+    }
+  }
+})
+
+const drawIcon = ({icon: {name, svg}}: any) => {
+  const min = 0
+  const max = 100
+  const randomPosition = () => Math.floor(Math.random() * (max - min + 1) + min)
+  const icon = figma.createNodeFromSvg(svg)
+
+  icon.name = name
+  icon.x = Math.round(figma.viewport.center.x + randomPosition())
+  icon.y = Math.round(figma.viewport.center.y + randomPosition())
+  figma.currentPage.selection = [icon]
+
+  // lock children
+  icon.children.forEach((vectorNode, key) => {
+    icon.children[key].locked = true
+  });
+}
+
+const setCachedIcons = async (pluginMessage: any) => {
+  if(pluginMessage.lucideIcons) {
+    await figma.clientStorage.setAsync(`lucide-icons`, pluginMessage.lucideIcons)
+  }
+}
+
+const getCachedIcons = async () => {
+  cachedIcons = await figma.clientStorage.getAsync(`lucide-icons`)
+
+  const response = { type: 'cachedIcons' }
+
+  if(cachedIcons) {
+    Object.assign(response, { cachedIcons })
+  }
+
+  figma.ui.postMessage(response)
+}
+
+getCachedIcons()
+
+figma.ui.onmessage = (event) => {
+  console.log(event, 'main');
+  switch (event.type) {
+    case "drawIcon":
+      drawIcon(event)
+      break;
+    case "getCachedIcons":
+      getCachedIcons()
+      break;
+
+    case "setCachedIcons":
+      setCachedIcons(event)
+      break;
+
+    case "close":
+      figma.closePlugin()
+      break;
+
+    default:
+      break;
+  }
+}
+
+figma.on('run', event => {
+  if(event.parameters) {
+    figma.ui.postMessage({ type: 'getSvg', iconName: event.parameters['icon-name'], cachedIcons })
+  } else {
+    figma.showUI(__uiFiles__.interface, { width: 300, height: 400 })
+  }
+})

packages/lucide-figma/src/types/lucide-react.ts

@@ -1,4 +0,0 @@
-declare module 'lucide-react';
-declare module 'lucide';
-declare module 'lucide/icons';
-declare module 'lucide/build/icons';

packages/lucide-figma/src/ui.css

@@ -1,10 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.9')
-      format('woff2'),
-    url('https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.9')
-      format('woff');
-}

packages/lucide-figma/src/ui.html

@@ -1 +0,0 @@
-<div id="root"></div>

packages/lucide-figma/src/ui.tsx

@@ -1,82 +0,0 @@
-import { Global, jsx } from '@emotion/core'
-import { version } from '../package.json'
-import React, { useMemo } from 'react'
-import ReactDOM from 'react-dom'
-import IconButton from './components/icon-button'
-import SearchInput from './components/search-input'
-import theme from './theme'
-import './ui.css'
-import tags from '../../../tags.json'
-import * as iconComponents from 'lucide-react'
-import { toPascalCase } from './helpers/naming';
-import useSearch from '../../../site/src/lib/useSearch';
-
-declare var ICONS: [];
-
-function App() {
-  const [query, setQuery] = React.useState('')
-  const icons = ICONS.map(name => {
-    const componentName = toPascalCase(name);
-    return {
-      name,
-      tags: tags[name] || [],
-      component: iconComponents[componentName] || null
-    }
-  }).filter(({component}) => !!component)
-
-  const searchResults = useMemo(() => useSearch(icons, query), [icons, query])
-
-  return (
-    <div>
-      <Global
-        styles={{ body: { margin: 0, fontFamily: 'Inter, sans-serif' } }}
-      />
-      <SearchInput
-        value={query}
-        iconCount={icons.length}
-        onChange={event => setQuery(event.target.value)}
-        css={{
-          position: 'sticky',
-          top: 0,
-          borderBottom: '1px solid #e5e5e5',
-          backfaceVisibility: 'hidden'
-        }}
-      />
-      <div css={{ padding: theme.space[2] }}>
-        <div
-          css={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(6, 1fr)',
-            gridGap: theme.space[1],
-          }}
-        >
-          {searchResults.map(({name, component: Icon} :any) => (
-            <IconButton
-              name={name}
-              key={name}
-              component={Icon}
-            />
-          ))}
-        </div>
-        <div
-          css={{
-            marginTop: theme.space[2],
-            padding: theme.space[2],
-            fontSize: theme.fontSizes[0],
-            color: 'rgba(0, 0, 0, 0.5)',
-          }}
-        >
-          <a
-            href="https://lucide.dev"
-            target="_blank"
-            css={{ color: 'inherit' }}
-          >
-            Lucide v{version}
-          </a>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-ReactDOM.render(<App />, document.getElementById('root'))

packages/lucide-figma/src/worker/worker.html

@@ -0,0 +1 @@
+<script type="module" src="./worker.ts"></script>

packages/lucide-figma/src/worker/worker.ts

@@ -0,0 +1,60 @@
+import { fetchIcons, LucideIcons } from "../api/fetchIcons"
+import { createReactComponent } from 'lucide-react'
+import { renderToString } from 'react-dom/server'
+import { createElement } from "react"
+
+const getLatestIcons = async ({ cachedIcons }: any) => {
+  const lucideIcons = await fetchIcons(cachedIcons)
+
+  parent.postMessage({
+    pluginMessage: {
+      type: "latestIcons",
+      lucideIcons,
+    }
+  }, "*")
+}
+
+const getSvg = async ({ cachedIcons, iconName }: { cachedIcons: LucideIcons, iconName: string }) => {
+  if (!cachedIcons) {
+    return;
+  }
+
+  const iconNode = cachedIcons.iconNodes[iconName];
+
+  if (iconNode) {
+    const IconComponent = createReactComponent(iconName, iconNode)
+    const svg = renderToString(createElement(IconComponent));
+
+    parent.postMessage({ pluginMessage: {
+      type: 'drawIcon',
+      icon: { name, svg }
+    }}, '*')
+
+    parent.postMessage({ pluginMessage: {
+      type: 'close',
+    }}, '*')
+  }
+}
+
+window.onmessage = async (event) => {
+  if (!event?.data?.pluginMessage) {
+    return
+  }
+
+  const { pluginMessage } = event.data
+
+  switch (pluginMessage.type) {
+    case "getLatestIcons":
+      getLatestIcons(pluginMessage)
+      break;
+
+    case "getSvg":
+      getSvg(pluginMessage)
+      break;
+
+    default:
+      break;
+  }
+}
+
+console.log('Hello world!')

packages/lucide-figma/tsconfig.json

@@ -1,12 +1,24 @@
 {
   "compilerOptions": {
-    "esModuleInterop": true,
-    "lib": ["dom", "esnext"],
-    "jsx": "react",
-    "jsxFactory": "jsx",
-    "resolveJsonModule": true,
-    "strict": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": false,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "typeRoots": [
+      "./node_modules/@types",
+      "../../node_modules/@figma"
+    ],
   },
-  "exclude": ["node_modules"],
+  "include": ["src"]
 }

packages/lucide-figma/vite.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { viteSingleFile } from "vite-plugin-singlefile"
+import { resolve } from 'path'
+
+const entries = {
+  main: resolve(__dirname, 'src/main.ts'),
+  interface: resolve(__dirname, './src/interface/interface.html'),
+  worker: resolve(__dirname, './src/worker/worker.html'),
+}
+
+const input = {};
+
+if(process.env['INPUT']) {
+  const entry = process.env['INPUT'];
+  input[entry] = entries[entry]
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), viteSingleFile()],
+	build: {
+		target: "esnext",
+		assetsInlineLimit: 100000000,
+		chunkSizeWarningLimit: 100000000,
+		cssCodeSplit: false,
+		brotliSize: false,
+    emptyOutDir: false,
+		rollupOptions: {
+      input,
+			inlineDynamicImports: true,
+			output: {
+				manualChunks: (chunk) => "all.js",
+        entryFileNames: `assets/[name].js`,
+        chunkFileNames: `assets/[name].js`,
+        assetFileNames: `assets/[name].[ext]`
+			},
+		},
+	},
+})

packages/lucide-figma/webpack.config.js

@@ -1,48 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
-const webpack = require('webpack');
-
-module.exports = (env, argv) => ({
-  // This is necessary because Figma's 'eval' works differently than normal eval
-  devtool: argv.mode === 'production' ? false : 'inline-source-map',
-  entry: {
-    ui: './src/ui.tsx',
-    main: './src/main.ts',
-  },
-  output: {
-    filename: '[name].js',
-    path: path.resolve(__dirname, 'build'),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/,
-        loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      ICONS: JSON.stringify(
-        fs.readdirSync(path.join(process.cwd(), '../../icons')).map(name => name.split('.')[0]),
-      ),
-    }),
-    new HtmlWebpackPlugin({
-      template: './src/ui.html',
-      filename: 'ui.html',
-      inlineSource: '.(js)$',
-      chunks: ['ui'],
-    }),
-    new HtmlWebpackInlineSourcePlugin(),
-  ],
-});

packages/lucide-flutter/.gitignore

@@ -29,7 +29,7 @@
 .pub-cache/
 .pub/
 build/
-assets
+pubspec.lock
 
 # Android related
 **/android/**/gradle-wrapper.jar

packages/lucide-flutter/lib/lucide_icons.dart

@@ -1,499 +1,12 @@
 library lucide_icons;
+
 import "package:flutter/widgets.dart";
 import "src/icon_data.dart";
 
 // THIS FILE IS AUTOMATICALLY GENERATED!
 
 class LucideIcons {
-static const IconData activity = const LucideIconData(0xf100);
-static const IconData airplay = const LucideIconData(0xf101);
-static const IconData alarmCheck = const LucideIconData(0xf102);
-static const IconData alarmClock = const LucideIconData(0xf103);
-static const IconData alarmMinus = const LucideIconData(0xf104);
-static const IconData alarmPlus = const LucideIconData(0xf105);
-static const IconData album = const LucideIconData(0xf106);
-static const IconData alertCircle = const LucideIconData(0xf107);
-static const IconData alertOctagon = const LucideIconData(0xf108);
-static const IconData alertTriangle = const LucideIconData(0xf109);
-static const IconData alignCenter = const LucideIconData(0xf10a);
-static const IconData alignJustify = const LucideIconData(0xf10b);
-static const IconData alignLeft = const LucideIconData(0xf10c);
-static const IconData alignRight = const LucideIconData(0xf10d);
-static const IconData anchor = const LucideIconData(0xf10e);
-static const IconData aperture = const LucideIconData(0xf10f);
-static const IconData archive = const LucideIconData(0xf110);
-static const IconData arrowBigDown = const LucideIconData(0xf111);
-static const IconData arrowBigLeft = const LucideIconData(0xf112);
-static const IconData arrowBigRight = const LucideIconData(0xf113);
-static const IconData arrowBigUp = const LucideIconData(0xf114);
-static const IconData arrowDown = const LucideIconData(0xf115);
-static const IconData arrowDownCircle = const LucideIconData(0xf116);
-static const IconData arrowDownLeft = const LucideIconData(0xf117);
-static const IconData arrowDownRight = const LucideIconData(0xf118);
-static const IconData arrowLeft = const LucideIconData(0xf119);
-static const IconData arrowLeftCircle = const LucideIconData(0xf11a);
-static const IconData arrowRight = const LucideIconData(0xf11b);
-static const IconData arrowRightCircle = const LucideIconData(0xf11c);
-static const IconData arrowUp = const LucideIconData(0xf11d);
-static const IconData arrowUpCircle = const LucideIconData(0xf11e);
-static const IconData arrowUpLeft = const LucideIconData(0xf11f);
-static const IconData arrowUpRight = const LucideIconData(0xf120);
-static const IconData asterisk = const LucideIconData(0xf121);
-static const IconData atSign = const LucideIconData(0xf122);
-static const IconData award = const LucideIconData(0xf123);
-static const IconData axe = const LucideIconData(0xf124);
-static const IconData banknote = const LucideIconData(0xf125);
-static const IconData barChart = const LucideIconData(0xf126);
-static const IconData barChart2 = const LucideIconData(0xf127);
-static const IconData battery = const LucideIconData(0xf128);
-static const IconData batteryCharging = const LucideIconData(0xf129);
-static const IconData batteryFull = const LucideIconData(0xf12a);
-static const IconData batteryLow = const LucideIconData(0xf12b);
-static const IconData batteryMedium = const LucideIconData(0xf12c);
-static const IconData beaker = const LucideIconData(0xf12d);
-static const IconData bell = const LucideIconData(0xf12e);
-static const IconData bellMinus = const LucideIconData(0xf12f);
-static const IconData bellOff = const LucideIconData(0xf130);
-static const IconData bellPlus = const LucideIconData(0xf131);
-static const IconData bellRing = const LucideIconData(0xf132);
-static const IconData bike = const LucideIconData(0xf133);
-static const IconData binary = const LucideIconData(0xf134);
-static const IconData bitcoin = const LucideIconData(0xf135);
-static const IconData bluetooth = const LucideIconData(0xf136);
-static const IconData bluetoothConnected = const LucideIconData(0xf137);
-static const IconData bluetoothOff = const LucideIconData(0xf138);
-static const IconData bluetoothSearching = const LucideIconData(0xf139);
-static const IconData bold = const LucideIconData(0xf13a);
-static const IconData book = const LucideIconData(0xf13b);
-static const IconData bookOpen = const LucideIconData(0xf13c);
-static const IconData bookmark = const LucideIconData(0xf13d);
-static const IconData bot = const LucideIconData(0xf13e);
-static const IconData box = const LucideIconData(0xf13f);
-static const IconData boxSelect = const LucideIconData(0xf140);
-static const IconData briefcase = const LucideIconData(0xf141);
-static const IconData brush = const LucideIconData(0xf142);
-static const IconData bug = const LucideIconData(0xf143);
-static const IconData building = const LucideIconData(0xf144);
-static const IconData bus = const LucideIconData(0xf145);
-static const IconData calculator = const LucideIconData(0xf146);
-static const IconData calendar = const LucideIconData(0xf147);
-static const IconData camera = const LucideIconData(0xf148);
-static const IconData cameraOff = const LucideIconData(0xf149);
-static const IconData car = const LucideIconData(0xf14a);
-static const IconData cast = const LucideIconData(0xf14b);
-static const IconData check = const LucideIconData(0xf14c);
-static const IconData checkCircle = const LucideIconData(0xf14d);
-static const IconData checkCircle2 = const LucideIconData(0xf14e);
-static const IconData checkSquare = const LucideIconData(0xf14f);
-static const IconData chevronDown = const LucideIconData(0xf150);
-static const IconData chevronLeft = const LucideIconData(0xf151);
-static const IconData chevronRight = const LucideIconData(0xf152);
-static const IconData chevronUp = const LucideIconData(0xf153);
-static const IconData chevronsDown = const LucideIconData(0xf154);
-static const IconData chevronsDownUp = const LucideIconData(0xf155);
-static const IconData chevronsLeft = const LucideIconData(0xf156);
-static const IconData chevronsRight = const LucideIconData(0xf157);
-static const IconData chevronsUp = const LucideIconData(0xf158);
-static const IconData chevronsUpDown = const LucideIconData(0xf159);
-static const IconData chrome = const LucideIconData(0xf15a);
-static const IconData circle = const LucideIconData(0xf15b);
-static const IconData circleSlashed = const LucideIconData(0xf15c);
-static const IconData clipboard = const LucideIconData(0xf15d);
-static const IconData clipboardCheck = const LucideIconData(0xf15e);
-static const IconData clipboardCopy = const LucideIconData(0xf15f);
-static const IconData clipboardList = const LucideIconData(0xf160);
-static const IconData clipboardX = const LucideIconData(0xf161);
-static const IconData clock = const LucideIconData(0xf162);
-static const IconData cloud = const LucideIconData(0xf163);
-static const IconData cloudDrizzle = const LucideIconData(0xf164);
-static const IconData cloudFog = const LucideIconData(0xf165);
-static const IconData cloudHail = const LucideIconData(0xf166);
-static const IconData cloudLightning = const LucideIconData(0xf167);
-static const IconData cloudMoon = const LucideIconData(0xf168);
-static const IconData cloudOff = const LucideIconData(0xf169);
-static const IconData cloudRain = const LucideIconData(0xf16a);
-static const IconData cloudRainWind = const LucideIconData(0xf16b);
-static const IconData cloudSnow = const LucideIconData(0xf16c);
-static const IconData cloudSun = const LucideIconData(0xf16d);
-static const IconData cloudy = const LucideIconData(0xf16e);
-static const IconData clover = const LucideIconData(0xf16f);
-static const IconData code = const LucideIconData(0xf170);
-static const IconData code2 = const LucideIconData(0xf171);
-static const IconData codepen = const LucideIconData(0xf172);
-static const IconData codesandbox = const LucideIconData(0xf173);
-static const IconData coffee = const LucideIconData(0xf174);
-static const IconData coins = const LucideIconData(0xf175);
-static const IconData columns = const LucideIconData(0xf176);
-static const IconData command = const LucideIconData(0xf177);
-static const IconData compass = const LucideIconData(0xf178);
-static const IconData contact = const LucideIconData(0xf179);
-static const IconData contrast = const LucideIconData(0xf17a);
-static const IconData copy = const LucideIconData(0xf17b);
-static const IconData copyleft = const LucideIconData(0xf17c);
-static const IconData copyright = const LucideIconData(0xf17d);
-static const IconData cornerDownLeft = const LucideIconData(0xf17e);
-static const IconData cornerDownRight = const LucideIconData(0xf17f);
-static const IconData cornerLeftDown = const LucideIconData(0xf180);
-static const IconData cornerLeftUp = const LucideIconData(0xf181);
-static const IconData cornerRightDown = const LucideIconData(0xf182);
-static const IconData cornerRightUp = const LucideIconData(0xf183);
-static const IconData cornerUpLeft = const LucideIconData(0xf184);
-static const IconData cornerUpRight = const LucideIconData(0xf185);
-static const IconData cpu = const LucideIconData(0xf186);
-static const IconData creditCard = const LucideIconData(0xf187);
-static const IconData crop = const LucideIconData(0xf188);
-static const IconData cross = const LucideIconData(0xf189);
-static const IconData crosshair = const LucideIconData(0xf18a);
-static const IconData crown = const LucideIconData(0xf18b);
-static const IconData currency = const LucideIconData(0xf18c);
-static const IconData database = const LucideIconData(0xf18d);
-static const IconData delete = const LucideIconData(0xf18e);
-static const IconData disc = const LucideIconData(0xf18f);
-static const IconData divide = const LucideIconData(0xf190);
-static const IconData divideCircle = const LucideIconData(0xf191);
-static const IconData divideSquare = const LucideIconData(0xf192);
-static const IconData dollarSign = const LucideIconData(0xf193);
-static const IconData download = const LucideIconData(0xf194);
-static const IconData downloadCloud = const LucideIconData(0xf195);
-static const IconData dribbble = const LucideIconData(0xf196);
-static const IconData droplet = const LucideIconData(0xf197);
-static const IconData droplets = const LucideIconData(0xf198);
-static const IconData edit = const LucideIconData(0xf199);
-static const IconData edit2 = const LucideIconData(0xf19a);
-static const IconData edit3 = const LucideIconData(0xf19b);
-static const IconData equal = const LucideIconData(0xf19c);
-static const IconData equalNot = const LucideIconData(0xf19d);
-static const IconData euro = const LucideIconData(0xf19e);
-static const IconData expand = const LucideIconData(0xf19f);
-static const IconData externalLink = const LucideIconData(0xf1a0);
-static const IconData eye = const LucideIconData(0xf1a1);
-static const IconData eyeOff = const LucideIconData(0xf1a2);
-static const IconData facebook = const LucideIconData(0xf1a3);
-static const IconData fastForward = const LucideIconData(0xf1a4);
-static const IconData feather = const LucideIconData(0xf1a5);
-static const IconData figma = const LucideIconData(0xf1a6);
-static const IconData file = const LucideIconData(0xf1a7);
-static const IconData fileCheck = const LucideIconData(0xf1a8);
-static const IconData fileCheck2 = const LucideIconData(0xf1a9);
-static const IconData fileCode = const LucideIconData(0xf1aa);
-static const IconData fileDigit = const LucideIconData(0xf1ab);
-static const IconData fileInput = const LucideIconData(0xf1ac);
-static const IconData fileMinus = const LucideIconData(0xf1ad);
-static const IconData fileMinus2 = const LucideIconData(0xf1ae);
-static const IconData fileOutput = const LucideIconData(0xf1af);
-static const IconData filePlus = const LucideIconData(0xf1b0);
-static const IconData filePlus2 = const LucideIconData(0xf1b1);
-static const IconData fileSearch = const LucideIconData(0xf1b2);
-static const IconData fileText = const LucideIconData(0xf1b3);
-static const IconData fileX = const LucideIconData(0xf1b4);
-static const IconData fileX2 = const LucideIconData(0xf1b5);
-static const IconData files = const LucideIconData(0xf1b6);
-static const IconData film = const LucideIconData(0xf1b7);
-static const IconData filter = const LucideIconData(0xf1b8);
-static const IconData flag = const LucideIconData(0xf1b9);
-static const IconData flame = const LucideIconData(0xf1ba);
-static const IconData flashlight = const LucideIconData(0xf1bb);
-static const IconData flashlightOff = const LucideIconData(0xf1bc);
-static const IconData flaskConical = const LucideIconData(0xf1bd);
-static const IconData flaskRound = const LucideIconData(0xf1be);
-static const IconData folder = const LucideIconData(0xf1bf);
-static const IconData folderMinus = const LucideIconData(0xf1c0);
-static const IconData folderPlus = const LucideIconData(0xf1c1);
-static const IconData formInput = const LucideIconData(0xf1c2);
-static const IconData forward = const LucideIconData(0xf1c3);
-static const IconData framer = const LucideIconData(0xf1c4);
-static const IconData frown = const LucideIconData(0xf1c5);
-static const IconData functionSquare = const LucideIconData(0xf1c6);
-static const IconData gamepad = const LucideIconData(0xf1c7);
-static const IconData gamepad2 = const LucideIconData(0xf1c8);
-static const IconData gauge = const LucideIconData(0xf1c9);
-static const IconData gavel = const LucideIconData(0xf1ca);
-static const IconData ghost = const LucideIconData(0xf1cb);
-static const IconData gift = const LucideIconData(0xf1cc);
-static const IconData gitBranch = const LucideIconData(0xf1cd);
-static const IconData gitBranchPlus = const LucideIconData(0xf1ce);
-static const IconData gitCommit = const LucideIconData(0xf1cf);
-static const IconData gitMerge = const LucideIconData(0xf1d0);
-static const IconData gitPullRequest = const LucideIconData(0xf1d1);
-static const IconData github = const LucideIconData(0xf1d2);
-static const IconData gitlab = const LucideIconData(0xf1d3);
-static const IconData glasses = const LucideIconData(0xf1d4);
-static const IconData globe = const LucideIconData(0xf1d5);
-static const IconData globe2 = const LucideIconData(0xf1d6);
-static const IconData grab = const LucideIconData(0xf1d7);
-static const IconData graduationCap = const LucideIconData(0xf1d8);
-static const IconData grid = const LucideIconData(0xf1d9);
-static const IconData gripHorizontal = const LucideIconData(0xf1da);
-static const IconData gripVertical = const LucideIconData(0xf1db);
-static const IconData hammer = const LucideIconData(0xf1dc);
-static const IconData hand = const LucideIconData(0xf1dd);
-static const IconData handMetal = const LucideIconData(0xf1de);
-static const IconData hardDrive = const LucideIconData(0xf1df);
-static const IconData hardHat = const LucideIconData(0xf1e0);
-static const IconData hash = const LucideIconData(0xf1e1);
-static const IconData haze = const LucideIconData(0xf1e2);
-static const IconData headphones = const LucideIconData(0xf1e3);
-static const IconData heart = const LucideIconData(0xf1e4);
-static const IconData helpCircle = const LucideIconData(0xf1e5);
-static const IconData hexagon = const LucideIconData(0xf1e6);
-static const IconData highlighter = const LucideIconData(0xf1e7);
-static const IconData history = const LucideIconData(0xf1e8);
-static const IconData home = const LucideIconData(0xf1e9);
-static const IconData image = const LucideIconData(0xf1ea);
-static const IconData imageMinus = const LucideIconData(0xf1eb);
-static const IconData imageOff = const LucideIconData(0xf1ec);
-static const IconData imagePlus = const LucideIconData(0xf1ed);
-static const IconData import = const LucideIconData(0xf1ee);
-static const IconData inbox = const LucideIconData(0xf1ef);
-static const IconData indent = const LucideIconData(0xf1f0);
-static const IconData indianRupee = const LucideIconData(0xf1f1);
-static const IconData infinity = const LucideIconData(0xf1f2);
-static const IconData info = const LucideIconData(0xf1f3);
-static const IconData inspect = const LucideIconData(0xf1f4);
-static const IconData instagram = const LucideIconData(0xf1f5);
-static const IconData italic = const LucideIconData(0xf1f6);
-static const IconData jerseyPound = const LucideIconData(0xf1f7);
-static const IconData key = const LucideIconData(0xf1f8);
-static const IconData languages = const LucideIconData(0xf1f9);
-static const IconData laptop = const LucideIconData(0xf1fa);
-static const IconData laptop2 = const LucideIconData(0xf1fb);
-static const IconData lasso = const LucideIconData(0xf1fc);
-static const IconData lassoSelect = const LucideIconData(0xf1fd);
-static const IconData layers = const LucideIconData(0xf1fe);
-static const IconData layout = const LucideIconData(0xf1ff);
-static const IconData layoutDashboard = const LucideIconData(0xf200);
-static const IconData layoutGrid = const LucideIconData(0xf201);
-static const IconData layoutList = const LucideIconData(0xf202);
-static const IconData layoutTemplate = const LucideIconData(0xf203);
-static const IconData library = const LucideIconData(0xf204);
-static const IconData lifeBuoy = const LucideIconData(0xf205);
-static const IconData lightbulb = const LucideIconData(0xf206);
-static const IconData lightbulbOff = const LucideIconData(0xf207);
-static const IconData link = const LucideIconData(0xf208);
-static const IconData link2 = const LucideIconData(0xf209);
-static const IconData link2Off = const LucideIconData(0xf20a);
-static const IconData linkedin = const LucideIconData(0xf20b);
-static const IconData list = const LucideIconData(0xf20c);
-static const IconData listChecks = const LucideIconData(0xf20d);
-static const IconData listOrdered = const LucideIconData(0xf20e);
-static const IconData loader = const LucideIconData(0xf20f);
-static const IconData loader2 = const LucideIconData(0xf210);
-static const IconData locate = const LucideIconData(0xf211);
-static const IconData locateFixed = const LucideIconData(0xf212);
-static const IconData lock = const LucideIconData(0xf213);
-static const IconData logIn = const LucideIconData(0xf214);
-static const IconData logOut = const LucideIconData(0xf215);
-static const IconData mail = const LucideIconData(0xf216);
-static const IconData map = const LucideIconData(0xf217);
-static const IconData mapPin = const LucideIconData(0xf218);
-static const IconData maximize = const LucideIconData(0xf219);
-static const IconData maximize2 = const LucideIconData(0xf21a);
-static const IconData meh = const LucideIconData(0xf21b);
-static const IconData menu = const LucideIconData(0xf21c);
-static const IconData messageCircle = const LucideIconData(0xf21d);
-static const IconData messageSquare = const LucideIconData(0xf21e);
-static const IconData mic = const LucideIconData(0xf21f);
-static const IconData micOff = const LucideIconData(0xf220);
-static const IconData minimize = const LucideIconData(0xf221);
-static const IconData minimize2 = const LucideIconData(0xf222);
-static const IconData minus = const LucideIconData(0xf223);
-static const IconData minusCircle = const LucideIconData(0xf224);
-static const IconData minusSquare = const LucideIconData(0xf225);
-static const IconData monitor = const LucideIconData(0xf226);
-static const IconData monitorOff = const LucideIconData(0xf227);
-static const IconData monitorSpeaker = const LucideIconData(0xf228);
-static const IconData moon = const LucideIconData(0xf229);
-static const IconData moreHorizontal = const LucideIconData(0xf22a);
-static const IconData moreVertical = const LucideIconData(0xf22b);
-static const IconData mountain = const LucideIconData(0xf22c);
-static const IconData mountainSnow = const LucideIconData(0xf22d);
-static const IconData mousePointer = const LucideIconData(0xf22e);
-static const IconData mousePointer2 = const LucideIconData(0xf22f);
-static const IconData mousePointerClick = const LucideIconData(0xf230);
-static const IconData move = const LucideIconData(0xf231);
-static const IconData moveDiagonal = const LucideIconData(0xf232);
-static const IconData moveDiagonal2 = const LucideIconData(0xf233);
-static const IconData moveHorizontal = const LucideIconData(0xf234);
-static const IconData moveVertical = const LucideIconData(0xf235);
-static const IconData music = const LucideIconData(0xf236);
-static const IconData navigation = const LucideIconData(0xf237);
-static const IconData navigation2 = const LucideIconData(0xf238);
-static const IconData network = const LucideIconData(0xf239);
-static const IconData octagon = const LucideIconData(0xf23a);
-static const IconData option = const LucideIconData(0xf23b);
-static const IconData outdent = const LucideIconData(0xf23c);
-static const IconData package = const LucideIconData(0xf23d);
-static const IconData palette = const LucideIconData(0xf23e);
-static const IconData paperclip = const LucideIconData(0xf23f);
-static const IconData pause = const LucideIconData(0xf240);
-static const IconData pauseCircle = const LucideIconData(0xf241);
-static const IconData pauseOctagon = const LucideIconData(0xf242);
-static const IconData penTool = const LucideIconData(0xf243);
-static const IconData pencil = const LucideIconData(0xf244);
-static const IconData percent = const LucideIconData(0xf245);
-static const IconData personStanding = const LucideIconData(0xf246);
-static const IconData phone = const LucideIconData(0xf247);
-static const IconData phoneCall = const LucideIconData(0xf248);
-static const IconData phoneForwarded = const LucideIconData(0xf249);
-static const IconData phoneIncoming = const LucideIconData(0xf24a);
-static const IconData phoneMissed = const LucideIconData(0xf24b);
-static const IconData phoneOff = const LucideIconData(0xf24c);
-static const IconData phoneOutgoing = const LucideIconData(0xf24d);
-static const IconData pieChart = const LucideIconData(0xf24e);
-static const IconData pipette = const LucideIconData(0xf24f);
-static const IconData plane = const LucideIconData(0xf250);
-static const IconData play = const LucideIconData(0xf251);
-static const IconData playCircle = const LucideIconData(0xf252);
-static const IconData plugZap = const LucideIconData(0xf253);
-static const IconData plus = const LucideIconData(0xf254);
-static const IconData plusCircle = const LucideIconData(0xf255);
-static const IconData plusSquare = const LucideIconData(0xf256);
-static const IconData pocket = const LucideIconData(0xf257);
-static const IconData podcast = const LucideIconData(0xf258);
-static const IconData pointer = const LucideIconData(0xf259);
-static const IconData poundSterling = const LucideIconData(0xf25a);
-static const IconData power = const LucideIconData(0xf25b);
-static const IconData powerOff = const LucideIconData(0xf25c);
-static const IconData printer = const LucideIconData(0xf25d);
-static const IconData qrCode = const LucideIconData(0xf25e);
-static const IconData radio = const LucideIconData(0xf25f);
-static const IconData radioReceiver = const LucideIconData(0xf260);
-static const IconData redo = const LucideIconData(0xf261);
-static const IconData refreshCcw = const LucideIconData(0xf262);
-static const IconData refreshCw = const LucideIconData(0xf263);
-static const IconData regex = const LucideIconData(0xf264);
-static const IconData repeat = const LucideIconData(0xf265);
-static const IconData repeat1 = const LucideIconData(0xf266);
-static const IconData reply = const LucideIconData(0xf267);
-static const IconData replyAll = const LucideIconData(0xf268);
-static const IconData rewind = const LucideIconData(0xf269);
-static const IconData rockingChair = const LucideIconData(0xf26a);
-static const IconData rotateCcw = const LucideIconData(0xf26b);
-static const IconData rotateCw = const LucideIconData(0xf26c);
-static const IconData rss = const LucideIconData(0xf26d);
-static const IconData ruler = const LucideIconData(0xf26e);
-static const IconData russianRuble = const LucideIconData(0xf26f);
-static const IconData save = const LucideIconData(0xf270);
-static const IconData scale = const LucideIconData(0xf271);
-static const IconData scissors = const LucideIconData(0xf272);
-static const IconData screenShare = const LucideIconData(0xf273);
-static const IconData screenShareOff = const LucideIconData(0xf274);
-static const IconData search = const LucideIconData(0xf275);
-static const IconData send = const LucideIconData(0xf276);
-static const IconData separatorHorizontal = const LucideIconData(0xf277);
-static const IconData separatorVertical = const LucideIconData(0xf278);
-static const IconData server = const LucideIconData(0xf279);
-static const IconData serverCrash = const LucideIconData(0xf27a);
-static const IconData serverOff = const LucideIconData(0xf27b);
-static const IconData settings = const LucideIconData(0xf27c);
-static const IconData share = const LucideIconData(0xf27d);
-static const IconData share2 = const LucideIconData(0xf27e);
-static const IconData sheet = const LucideIconData(0xf27f);
-static const IconData shield = const LucideIconData(0xf280);
-static const IconData shieldAlert = const LucideIconData(0xf281);
-static const IconData shieldCheck = const LucideIconData(0xf282);
-static const IconData shieldClose = const LucideIconData(0xf283);
-static const IconData shieldOff = const LucideIconData(0xf284);
-static const IconData shirt = const LucideIconData(0xf285);
-static const IconData shoppingBag = const LucideIconData(0xf286);
-static const IconData shoppingCart = const LucideIconData(0xf287);
-static const IconData shovel = const LucideIconData(0xf288);
-static const IconData shrink = const LucideIconData(0xf289);
-static const IconData shuffle = const LucideIconData(0xf28a);
-static const IconData sidebar = const LucideIconData(0xf28b);
-static const IconData sidebarClose = const LucideIconData(0xf28c);
-static const IconData sidebarOpen = const LucideIconData(0xf28d);
-static const IconData sigma = const LucideIconData(0xf28e);
-static const IconData skipBack = const LucideIconData(0xf28f);
-static const IconData skipForward = const LucideIconData(0xf290);
-static const IconData skull = const LucideIconData(0xf291);
-static const IconData slack = const LucideIconData(0xf292);
-static const IconData slash = const LucideIconData(0xf293);
-static const IconData sliders = const LucideIconData(0xf294);
-static const IconData smartphone = const LucideIconData(0xf295);
-static const IconData smartphoneCharging = const LucideIconData(0xf296);
-static const IconData smile = const LucideIconData(0xf297);
-static const IconData snowflake = const LucideIconData(0xf298);
-static const IconData sortAsc = const LucideIconData(0xf299);
-static const IconData sortDesc = const LucideIconData(0xf29a);
-static const IconData speaker = const LucideIconData(0xf29b);
-static const IconData sprout = const LucideIconData(0xf29c);
-static const IconData square = const LucideIconData(0xf29d);
-static const IconData star = const LucideIconData(0xf29e);
-static const IconData starHalf = const LucideIconData(0xf29f);
-static const IconData stopCircle = const LucideIconData(0xf2a0);
-static const IconData strikethrough = const LucideIconData(0xf2a1);
-static const IconData sun = const LucideIconData(0xf2a2);
-static const IconData sunrise = const LucideIconData(0xf2a3);
-static const IconData sunset = const LucideIconData(0xf2a4);
-static const IconData swissFranc = const LucideIconData(0xf2a5);
-static const IconData switchCamera = const LucideIconData(0xf2a6);
-static const IconData table = const LucideIconData(0xf2a7);
-static const IconData tablet = const LucideIconData(0xf2a8);
-static const IconData tag = const LucideIconData(0xf2a9);
-static const IconData target = const LucideIconData(0xf2aa);
-static const IconData tent = const LucideIconData(0xf2ab);
-static const IconData terminal = const LucideIconData(0xf2ac);
-static const IconData terminalSquare = const LucideIconData(0xf2ad);
-static const IconData thermometer = const LucideIconData(0xf2ae);
-static const IconData thermometerSnowflake = const LucideIconData(0xf2af);
-static const IconData thermometerSun = const LucideIconData(0xf2b0);
-static const IconData thumbsDown = const LucideIconData(0xf2b1);
-static const IconData thumbsUp = const LucideIconData(0xf2b2);
-static const IconData ticket = const LucideIconData(0xf2b3);
-static const IconData timer = const LucideIconData(0xf2b4);
-static const IconData toggleLeft = const LucideIconData(0xf2b5);
-static const IconData toggleRight = const LucideIconData(0xf2b6);
-static const IconData tornado = const LucideIconData(0xf2b7);
-static const IconData trash = const LucideIconData(0xf2b8);
-static const IconData trash2 = const LucideIconData(0xf2b9);
-static const IconData trello = const LucideIconData(0xf2ba);
-static const IconData trendingDown = const LucideIconData(0xf2bb);
-static const IconData trendingUp = const LucideIconData(0xf2bc);
-static const IconData triangle = const LucideIconData(0xf2bd);
-static const IconData truck = const LucideIconData(0xf2be);
-static const IconData tv = const LucideIconData(0xf2bf);
-static const IconData tv2 = const LucideIconData(0xf2c0);
-static const IconData twitch = const LucideIconData(0xf2c1);
-static const IconData twitter = const LucideIconData(0xf2c2);
-static const IconData type = const LucideIconData(0xf2c3);
-static const IconData umbrella = const LucideIconData(0xf2c4);
-static const IconData underline = const LucideIconData(0xf2c5);
-static const IconData undo = const LucideIconData(0xf2c6);
-static const IconData unlink = const LucideIconData(0xf2c7);
-static const IconData unlink2 = const LucideIconData(0xf2c8);
-static const IconData unlock = const LucideIconData(0xf2c9);
-static const IconData upload = const LucideIconData(0xf2ca);
-static const IconData uploadCloud = const LucideIconData(0xf2cb);
-static const IconData user = const LucideIconData(0xf2cc);
-static const IconData userCheck = const LucideIconData(0xf2cd);
-static const IconData userMinus = const LucideIconData(0xf2ce);
-static const IconData userPlus = const LucideIconData(0xf2cf);
-static const IconData userX = const LucideIconData(0xf2d0);
-static const IconData users = const LucideIconData(0xf2d1);
-static const IconData vibrate = const LucideIconData(0xf2d2);
-static const IconData video = const LucideIconData(0xf2d3);
-static const IconData videoOff = const LucideIconData(0xf2d4);
-static const IconData view = const LucideIconData(0xf2d5);
-static const IconData voicemail = const LucideIconData(0xf2d6);
-static const IconData volume = const LucideIconData(0xf2d7);
-static const IconData volume1 = const LucideIconData(0xf2d8);
-static const IconData volume2 = const LucideIconData(0xf2d9);
-static const IconData volumeX = const LucideIconData(0xf2da);
-static const IconData wallet = const LucideIconData(0xf2db);
-static const IconData watch = const LucideIconData(0xf2dc);
-static const IconData webcam = const LucideIconData(0xf2dd);
-static const IconData wifi = const LucideIconData(0xf2de);
-static const IconData wifiOff = const LucideIconData(0xf2df);
-static const IconData wind = const LucideIconData(0xf2e0);
-static const IconData wrench = const LucideIconData(0xf2e1);
-static const IconData x = const LucideIconData(0xf2e2);
-static const IconData xCircle = const LucideIconData(0xf2e3);
-static const IconData xOctagon = const LucideIconData(0xf2e4);
-static const IconData xSquare = const LucideIconData(0xf2e5);
-static const IconData youtube = const LucideIconData(0xf2e6);
-static const IconData zap = const LucideIconData(0xf2e7);
-static const IconData zapOff = const LucideIconData(0xf2e8);
-static const IconData zoomIn = const LucideIconData(0xf2e9);
-static const IconData zoomOut = const LucideIconData(0xf2ea);
+  // Icons will be generated here..
+  // static const IconData {icon_name} = const LucideIconData({icon_hex});
+  // ...
 }

packages/lucide-flutter/pubspec.lock

@@ -1,175 +0,0 @@
-# Generated by pub
-# See https://dart.dev/tools/pub/glossary#lockfile
-packages:
-  async:
-    dependency: transitive
-    description:
-      name: async
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.6.1"
-  boolean_selector:
-    dependency: transitive
-    description:
-      name: boolean_selector
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.0"
-  characters:
-    dependency: transitive
-    description:
-      name: characters
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.1.0"
-  charcode:
-    dependency: transitive
-    description:
-      name: charcode
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.2.0"
-  clock:
-    dependency: transitive
-    description:
-      name: clock
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.1.0"
-  collection:
-    dependency: transitive
-    description:
-      name: collection
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.15.0"
-  csslib:
-    dependency: transitive
-    description:
-      name: csslib
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.17.0"
-  fake_async:
-    dependency: transitive
-    description:
-      name: fake_async
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.2.0"
-  flutter:
-    dependency: "direct main"
-    description: flutter
-    source: sdk
-    version: "0.0.0"
-  flutter_test:
-    dependency: "direct dev"
-    description: flutter
-    source: sdk
-    version: "0.0.0"
-  html:
-    dependency: "direct dev"
-    description:
-      name: html
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.15.0"
-  lint:
-    dependency: "direct dev"
-    description:
-      name: lint
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.6.0"
-  matcher:
-    dependency: transitive
-    description:
-      name: matcher
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.12.10"
-  meta:
-    dependency: transitive
-    description:
-      name: meta
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.3.0"
-  path:
-    dependency: transitive
-    description:
-      name: path
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.8.0"
-  recase:
-    dependency: "direct dev"
-    description:
-      name: recase
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "4.0.0"
-  sky_engine:
-    dependency: transitive
-    description: flutter
-    source: sdk
-    version: "0.0.99"
-  source_span:
-    dependency: transitive
-    description:
-      name: source_span
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.8.1"
-  stack_trace:
-    dependency: transitive
-    description:
-      name: stack_trace
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.10.0"
-  stream_channel:
-    dependency: transitive
-    description:
-      name: stream_channel
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.0"
-  string_scanner:
-    dependency: transitive
-    description:
-      name: string_scanner
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.1.0"
-  term_glyph:
-    dependency: transitive
-    description:
-      name: term_glyph
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.2.0"
-  test_api:
-    dependency: transitive
-    description:
-      name: test_api
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.3.0"
-  typed_data:
-    dependency: transitive
-    description:
-      name: typed_data
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.3.0"
-  vector_math:
-    dependency: transitive
-    description:
-      name: vector_math
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "2.1.0"
-sdks:
-  dart: ">=2.13.0 <3.0.0"
-  flutter: ">=1.17.0"

packages/lucide-flutter/pubspec.yaml

@@ -1,22 +1,26 @@
 name: lucide_icons
-description: Lucide icon pack for Flutter
-version: 0.15.30
+description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
+version: 0.16.12
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide
+
 environment:
   sdk: ">=2.12.0 <3.0.0"
   flutter: ">=1.17.0"
+
 dependencies:
   flutter:
     sdk: flutter
+
 dev_dependencies:
   flutter_test:
     sdk: flutter
   html: ^0.15.0
   recase: ^4.0.0
   lint: ^1.5.3
+
 flutter:
   fonts:
     - family: Lucide
       fonts:
-        - asset: assets/Lucide.ttf
+        - asset: assets/lucide.ttf

packages/lucide-flutter/test/icon_test.dart

@@ -0,0 +1,147 @@
+// Tests adapted from https://github.com/fluttercommunity/font_awesome_flutter/blob/master/test/fa_icon_test.dart
+// Copyright 2014 The Flutter Authors. All rights reserved.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:flutter/widgets.dart';
+import 'package:lucide_icons/lucide_icons.dart';
+
+void main() {
+  testWidgets('Can set opacity for an Icon', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: IconTheme(
+          data: IconThemeData(
+            color: Color(0xFF666666),
+            opacity: 0.5,
+          ),
+          child: Icon(LucideIcons.bot),
+        ),
+      ),
+    );
+    final RichText text = tester.widget(find.byType(RichText));
+    expect(text.text.style!.color, const Color(0xFF666666).withOpacity(0.5));
+  });
+
+  testWidgets('Icon sizing - no theme, default size',
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: Icon(LucideIcons.bot),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(24.0)));
+  });
+
+  testWidgets('Icon sizing - no theme, explicit size',
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: Icon(
+            LucideIcons.bot,
+            size: 96.0,
+          ),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(96.0)));
+  });
+
+  testWidgets('Icon sizing - sized theme', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: IconTheme(
+            data: IconThemeData(size: 36.0),
+            child: Icon(LucideIcons.bot),
+          ),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(36.0)));
+  });
+
+  testWidgets('Icon sizing - sized theme, explicit size',
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: IconTheme(
+            data: IconThemeData(size: 36.0),
+            child: Icon(
+              LucideIcons.bot,
+              size: 48.0,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(48.0)));
+  });
+
+  testWidgets('Icon sizing - sizeless theme, default size',
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: IconTheme(
+            data: IconThemeData(),
+            child: Icon(LucideIcons.bot),
+          ),
+        ),
+      ),
+    );
+
+    final RenderBox renderObject = tester.renderObject(find.byType(Icon));
+    expect(renderObject.size, equals(const Size.square(24.0)));
+  });
+
+  testWidgets("Changing semantic label from null doesn't rebuild tree ",
+      (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: Icon(LucideIcons.bot),
+        ),
+      ),
+    );
+
+    final Element richText1 = tester.element(find.byType(RichText));
+
+    await tester.pumpWidget(
+      const Directionality(
+        textDirection: TextDirection.ltr,
+        child: Center(
+          child: Icon(
+            LucideIcons.bot,
+            semanticLabel: 'a label',
+          ),
+        ),
+      ),
+    );
+
+    final Element richText2 = tester.element(find.byType(RichText));
+
+    // Compare a leaf Element in the Icon subtree before and after changing the
+    // semanticLabel to make sure the subtree was not rebuilt.
+    expect(richText2, same(richText1));
+  });
+}

packages/lucide-preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-preact",
-  "description": "Lucide Preact package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
-  "version": "0.15.30",
+  "description": "A Lucide icon library package for Preact applications",
+  "version": "0.16.12",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-preact/src/createPreactComponent.js

@@ -1,6 +1,16 @@
 import { h } from 'preact';
 import defaultAttributes from './defaultAttributes';
 
+/**
+ * Converts string to KebabCase
+ * Copied from scripts/helper. If anyone knows how to properly import it here
+ * then please fix it.
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
 export default (iconName, iconNode) => {
   const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }) =>
     h(
@@ -11,6 +21,7 @@ export default (iconName, iconNode) => {
         height: size,
         stroke: color,
         'stroke-width': strokeWidth,
+        class: `lucide lucide-${toKebabCase(iconName)}`,
         ...rest,
       },
       iconNode.map(([tag, attrs]) => h(tag, attrs)),

packages/lucide-preact/tests/__snapshots__/lucide-preact.spec.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
 
-exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

packages/lucide-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react",
-  "description": "Lucide React package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
-  "version": "0.15.30",
+  "description": "A Lucide icon library package for React applications",
+  "version": "0.16.12",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",

packages/lucide-react/scripts/buildTypes.js

@@ -1,10 +1,16 @@
-import path from "path";
-import {appendFile, readSvgDirectory, resetFile, toPascalCase, writeFile} from "../../../scripts/helpers";
+import path from 'path';
+import {
+  appendFile,
+  readSvgDirectory,
+  resetFile,
+  toPascalCase,
+  writeFile,
+} from '../../../scripts/helpers';
 
-const srcDirectory=path.join(__dirname, "../dist");
+const srcDirectory = path.join(__dirname, '../dist');
 
 // Declare type definitions
-const typeDefinitions=`\
+const typeDefinitions = `\
 /// <reference types="react" />
 import { SVGAttributes } from 'react'
 
@@ -15,6 +21,8 @@ export interface LucideProps extends Partial<React.SVGProps<SVGSVGElement>> {
     size?: string | number
 }
 
+export declare const createReactComponent: (iconName: string, iconNode: any[]) => (props: LucideProps) => JSX.Element;
+
 export type Icon = React.FC<LucideProps>;
 
 // Generated icons

packages/lucide-react/src/createReactComponent.js

@@ -2,6 +2,16 @@ import { forwardRef, createElement } from 'react';
 import PropTypes from 'prop-types';
 import defaultAttributes from './defaultAttributes';
 
+/**
+ * Converts string to KebabCase
+ * Copied from scripts/helper. If anyone knows how to properly import it here
+ * then please fix it.
+ *
+ * @param {string} string
+ * @returns {string} A kebabized string
+ */
+export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+
 export default (iconName, iconNode) => {
   const Component = forwardRef(
     ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }, ref) =>
@@ -14,6 +24,7 @@ export default (iconName, iconNode) => {
           height: size,
           stroke: color,
           strokeWidth,
+          className: `lucide lucide-${toKebabCase(iconName)}`,
           ...rest,
         },
         iconNode.map(([tag, attrs]) => createElement(tag, attrs)),

packages/lucide-react/src/lucide-react.js

@@ -1 +1,2 @@
 export * from './icons';
+export { default as createReactComponent } from './createReactComponent';

packages/lucide-react/tests/__snapshots__/lucide-react.spec.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
 
-exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
+exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"lucide lucide-grid\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

packages/lucide-static/.gitignore

@@ -0,0 +1,6 @@
+icons
+lib
+sprite.svg
+tags.json
+icon-nodes.json
+font

packages/lucide-static/.npmignore

@@ -0,0 +1,10 @@
+stats
+node_modules
+tests
+scripts
+build
+src
+babel.config.js
+jest.config.js
+rollup.config.js
+yarn.error.log

packages/lucide-static/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2020, Lucide Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

packages/lucide-static/README.md

@@ -0,0 +1,196 @@
+# Lucide Static
+
+This package include the following lucide implementations:
+
+- All svg files
+- Javascript library containing strings of svgs.
+- Icon fonts
+- Svg sprite
+
+> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
+
+## Why lucide-static?
+
+This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project.
+
+> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Threeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](https://github.com/lucide-icons/lucide/tree/master/packages/lucide), [lucide-react](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react), [lucide-vue](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue), [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next), [lucide-angular](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-angular), [lucide-preact](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact)
+
+## Installation
+
+## Package Managers
+
+```sh
+yarn add lucide-static
+
+# or
+
+npm install lucide-static
+```
+
+### CDN
+
+``` html
+<!-- Svg File -->
+<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
+
+<!-- Icon Font -->
+<style>
+  @font-face {
+    font-family: "LucideIcons";
+    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
+  }
+</style>
+```
+
+## Usage
+
+Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).
+
+### SVG Files
+
+#### Svg file as image
+
+To use it in for example html:
+
+``` html
+<!-- Svg File -->
+<img src="~lucide-static/icons/home.svg">
+```
+
+``` css
+.home-icon {
+  background-image: url(~lucide-static/icons/home.svg)
+}
+```
+Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)
+
+#### Svg file Inline
+
+You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg`.
+To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
+
+```js
+import arrowRightIcon from 'lucide-static/icons/arrow-right'
+
+// return string of a svg
+```
+
+### SVG Sprite
+
+You may need additional loader for this.
+
+```html
+<!-- Icon Sprite, not recommended for production! -->
+<img src="lucide-static/sprite.svg#home">
+
+<!-- or -->
+<svg
+  width="24"
+  height="24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <use href="#alert-triangle" />
+</svg>
+
+<svg>
+  ...sprite svg
+</svg>
+```
+
+If you'd prefer, you can use CSS to hold your base SVG properties
+
+```css
+.lucide-icon {
+    width: 24px;
+    height: 24px;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+```
+
+and update the svg as follows
+
+```svg
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="lucide-icon"
+>
+<use
+    href="#alert-triangle"
+  />
+</svg>
+<svg>
+  ...sprite svg
+</svg>
+```
+
+### Icon Font
+
+```css
+@import("~lucide-static/font/Lucide.css")
+```
+
+```html
+<div class="icon-home"></div>
+```
+
+
+### Node.js
+
+To use lucide icons in your Nodejs project you can import each icon as:
+
+```js
+const { messageSquare } = require('lucide-static/lib')
+```
+
+> Note: Each icon name is in camelCase.
+
+#### Example in node.js project
+
+```js
+const express = require('express')
+const { messageSquare } = require('lucide-static/lib')
+const app = express()
+const port = 3000
+
+app.get('/', (req, res) => {
+  res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>Page Title</title>
+      </head>
+      <body>
+        <h1>Lucide Icons</h1>
+        <p>This is a lucide icon ${messageSquare}</p>
+
+      </body>
+    </html>
+  `)
+})
+
+app.listen(port, () => {
+  console.log(`Example app listening at http://localhost:${port}`)
+})
+```
+
+## Contributing
+
+For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md).
+
+Caught a mistake or want to contribute to the documentation? [Edit this page on Github](https://github.com/lucide-icons/lucide/blob/master/README.md)
+
+## Community
+
+Join the community on our [Discord](https://discord.gg/EH6nSts) server!
+
+## License
+
+Lucide is totally free for commercial use and personally use, this software is licensed under the [ISC License](https://github.com/lucide-icons/lucide/blob/master/LICENSE).

packages/lucide-static/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "lucide-static",
+  "description": "Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "version": "0.16.19-rc.0",
+  "license": "ISC",
+  "homepage": "https://lucide.dev",
+  "bugs": "https://github.com/lucide-icons/lucide/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lucide-icons/lucide.git"
+  },
+  "main": "lib/index.js",
+  "scripts": {
+    "move:icons": "cp -r ../../icons icons",
+    "move:tags": "cp ../../tags.json tags.json",
+    "build": "yarn clean && yarn move:icons && yarn move:tags && yarn build:lib",
+    "build:lib": "yarn --cwd ../../ babel-node packages/lucide-static/scripts/buildLib.js",
+    "clean": "rm -rf lib && rm -rf build && rm -rf icons && rm -f sprite.svg && rm -f tags.json"
+  },
+  "devDependencies": {
+    "prettier": "^2.3.2",
+    "svgson": "^5.2.1"
+  }
+}

packages/lucide-static/scripts/buildLib.js

@@ -0,0 +1,47 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import fs from 'fs';
+import path from 'path';
+import getArgumentOptions from 'minimist';
+import { parseSync } from 'svgson';
+
+// import renderIconsObject from '../../../scripts/render/renderIconsObject';
+import { appendFile, readSvgDirectory, toCamelCase } from '../../../scripts/helpers';
+import readSvgs from './readSvgs';
+import generateSprite from './generateSprite';
+import generateIconNodes from './generateIconNodes';
+
+const cliArguments = getArgumentOptions(process.argv.slice(2));
+const createDirectory = dir => {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir);
+  }
+};
+
+const PACKAGE_DIR = path.resolve(__dirname, '../');
+const ICONS_DIR = path.join(PACKAGE_DIR, 'icons');
+const LIB_DIR = path.join(PACKAGE_DIR, cliArguments.output || 'lib');
+const ICON_MODULE_DIR = path.join(LIB_DIR, 'icons');
+
+createDirectory(LIB_DIR);
+createDirectory(ICON_MODULE_DIR);
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+const svgs = readSvgs(svgFiles, ICONS_DIR);
+
+svgs.forEach(({ name, contents }) => {
+  const componentName = toCamelCase(name);
+  const importString = `module.exports.${componentName} = require('./icons/${name}');\n`;
+  appendFile(importString, `index.js`, LIB_DIR);
+
+  const exportString = `module.exports = \`${contents}\`;\n`;
+  appendFile(exportString, `${name}.js`, ICON_MODULE_DIR);
+});
+
+const parsedSvgs = svgs.map(({ name, contents }) => ({
+  name,
+  contents,
+  parsedSvg: parseSync(contents),
+}));
+
+generateSprite(parsedSvgs, PACKAGE_DIR);
+generateIconNodes(parsedSvgs, PACKAGE_DIR);