lucide-static (#401)

* Add lucide static

* add render files

* add read scripts

* Add sprite generator

* start with documentation

* Add docs

* adding documentation

* fix build command

* Add some extra static files

* bump version

* Update packages/lucide-static/README.md

Co-authored-by: Kathryn Reeve <67553+BinaryKitten@users.noreply.github.com>

* Fix sprite generation

* update readme

* Add lucide static workflow

* adjust readme

* Add font to release yml

* Temporary turn of new versioning for lucide-static

Co-authored-by: Kathryn Reeve <67553+BinaryKitten@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/font.yml

@@ -1,61 +0,0 @@
-name: Build Lucide
-on:
-  push:
-    branches: [ master ]
-
-  pull_request:
-    branches: [ master ]
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
-  Build:
-    runs-on: ubuntu-latest
-    steps:
-
-    - name: Clone 'Lucide'
-      uses: actions/checkout@v2
-
-    - name: Update repos
-      run: sudo apt-get update
-
-    - name: Install FontForge
-      run: sudo apt-get install zlib1g-dev fontforge
-
-    - name: Clone sfnt2woff-zopfli repo
-      run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
-
-    - name: Install and move sfnt2woff-zopfli
-      run: |
-          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/
-
-    - 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: mkdir converted_icons && node scripts/outline_svg.js
-
-    - name: Build 'Lucide'
-      run: echo "Building Lucide font" && fontcustom compile ./converted_icons -h -n Lucide -o build -F
-
-    - name: Zip 'Lucide'
-      run: zip -r Lucide.zip build
-
-    - name: 'Upload to Artifacts'
-      uses: actions/upload-artifact@v1.0.0
-      with:
-        name: Lucide
-        path: build

.github/workflows/release.yml

@@ -3,24 +3,29 @@ 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 }}
-      YARN_CACHE_DIR: ${{ steps.yarn_cache.outputs.YARN_CACHE_DIR }}
 
     steps:
       - name: Get the version
         id: get_version
-        run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\/\v}
-
-      - name: Get yarn cache directory path
-        id: yarn_cache
-        run: echo "::set-output name=YARN_CACHE_DIR::$(yarn cache dir)"
+        run: |
+          echo $VERSION_REF
+          echo ::set-output name=VERSION::${VERSION_REF/refs\/tags\/\v}
+        env:
+          VERSION_REF: ${{ github.event.inputs.version || github.ref }}
 
   lucide:
     if: github.repository == 'lucide-icons/lucide'
@@ -28,15 +33,14 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/setup-node@v2.4.0
         with:
-          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: "14"
+          cache: yarn
+          cache-dependency-path: 'yarn.lock'
 
       - 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 }}
@@ -65,15 +69,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/setup-node@v2.4.0
         with:
-          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-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 }}
@@ -102,19 +104,13 @@ jobs:
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v2.4.0
         with:
-          node-version: '12.x'
-
-      - uses: actions/cache@v2
-        with:
-          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-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 }}
@@ -137,21 +133,54 @@ jobs:
           name: lucide-vue-package-json
           path: packages/lucide-vue/package.json
 
+  lucide-vue-next:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: pre-build
+    steps:
+      - uses: actions/checkout@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-vue-next version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+
+      - name: Build
+        run: yarn workspace lucide-vue-next build
+
+      - name: Test
+        run: yarn workspace lucide-vue-next test
+
+      - name: Publish
+        run: yarn workspace lucide-vue-next publish
+
+      - name: Upload package.json
+        uses: actions/upload-artifact@v2
+        with:
+          name: lucide-vue-next-package-json
+          path: packages/lucide-vue-next/package.json
+
   lucide-angular:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/setup-node@v2.4.0
         with:
-          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-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 }}
@@ -171,27 +200,244 @@ jobs:
       - name: Upload package.json
         uses: actions/upload-artifact@v2
         with:
+          name: lucide-angular-package-json
           path: packages/lucide-angular/package.json
 
-  upload-package-jsons:
+  lucide-preact:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
-    needs: [lucide, lucide-react, lucide-vue, lucide-angular]
+    needs: pre-build
+    steps:
+      - uses: actions/checkout@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 package.json version lucide
+        run: yarn workspace lucide-preact version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+
+      - name: Build
+        run: yarn workspace lucide-preact build
+
+      - name: Test
+        run: yarn workspace lucide-preact test
+
+      - name: Publish
+        run: yarn workspace lucide-preact publish
+
+      - name: Upload package.json
+        uses: actions/upload-artifact@v2
+        with:
+          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/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.0
+        with:
+          node-version: "14"
+          cache: yarn
+
+      - name: Install FontForge
+        run: sudo apt-get install zlib1g-dev fontforge
+
+      - name: Clone sfnt2woff-zopfli repo
+        run: git clone https://github.com/bramstein/sfnt2woff-zopfli.git sfnt2woff-zopfli
+
+      - name: Install and move sfnt2woff-zopfli
+        run: |
+          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/
+
+      - name: Install Font Custom dependency
+        run: sudo gem install fontcustom
+
+      - name: Install
+        run: yarn --prefer-offline
+
+      - name: Build Icon Font
+        run: |
+          mkdir lucide-font
+          yarn build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
+
+      - name: "Upload to Artifacts"
+        uses: actions/upload-artifact@v1
+        with:
+          name: lucide-font
+          path: lucide-font
+
+  lucide-flutter:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: [pre-build, lucide-font]
+    container:
+      image: cirrusci/flutter:latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/download-artifact@v2
+      - uses: actions/cache@v2
+        with:
+          path: ~/.pub-cache
+          key: ${{ runner.os }}-pub-${{ hashFiles('~/.pub-cache') }}
+          restore-keys: |
+            ${{ runner.os }}-pub-
+
+      - name: Setup credentials
+        run: |
+          mkdir -p ~/.pub-cache
+          cat <<EOF > ~/.pub-cache/credentials.json
+          {
+            "accessToken": "${{ secrets.GOOGLE_OAUTH_ACCESS_TOKEN }}",
+            "refreshToken": "${{ secrets.GOOGLE_OAUTH_REFRESH_TOKEN }}",
+            "idToken": "${{ secrets.GOOGLE_OAUTH_ID_TOKEN }}",
+            "tokenEndpoint":"https://accounts.google.com/o/oauth2/token",
+            "scopes": [ "openid", "https://www.googleapis.com/auth/userinfo.email" ],
+            "expiration": 1629835569218
+          }
+          EOF
+
+      - name: Get packages
+        run: flutter pub get
+        working-directory: packages/lucide-flutter
+
+      - 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 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: 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: flutter pub publish -f
+        working-directory: packages/lucide-flutter
+
+      - name: Upload pubspec.yaml
+        uses: actions/upload-artifact@v2
+        with:
+          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,
+      ]
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/download-artifact@v2
+      - uses: actions/checkout@v2
+      - uses: actions/download-artifact@v2
 
-    - name: Commit package.jsons
-      run: |
-        mv lucide-package-json/package.json packages/lucide/package.json
-        mv lucide-react-package-json/package.json packages/lucide-react/package.json
-        mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
+      - name: Commit package files
+        run: |
+          mv lucide-package-json/package.json packages/lucide/package.json
+          mv lucide-react-package-json/package.json packages/lucide-react/package.json
+          mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
+          mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
+          mv lucide-vue-next-package-json/package.json packages/lucide-vue-next/package.json
+          mv lucide-angular-package-json/package.json packages/lucide-angular/package.json
+          mv lucide-flutter-pubspec-yaml/pubspec.yaml packages/lucide-flutter/pubspec.yaml
 
-    - name: Commit package.jsons
-      run: |
-        git add packages/*/package.json
-        git -c user.name="Lucide Bot" -c user.email="lucide-bot@users.noreply.github.com" \
-          commit -m ":package: Bump lucide package versions to ${{ needs.pre-build.outputs.VERSION }}" --no-verify --quiet
-        git remote set-url --push origin https://lucide-bot:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY.git
-        git push origin HEAD:master
+      - name: Commit package.jsons
+        run: |
+          git add packages/*/package.json packages/lucide-flutter/pubspec.yaml
+          git -c user.name="Lucide Bot" -c user.email="lucide-bot@users.noreply.github.com" \
+            commit -m ":package: Bump lucide package versions to ${{ needs.pre-build.outputs.VERSION }}" --no-verify --quiet
+          git remote set-url --push origin https://lucide-bot:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY.git
+          git push origin HEAD:master
+
+      - name: Zip font and icons
+        run: |
+          zip -r lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip lucide-font
+          zip -r lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip icons
+
+      - name: Release zip and fonts
+        uses: softprops/action-gh-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.CREATE_RELEASE_TOKEN }}
+        with:
+          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

CONTRIBUTING.md

@@ -1,3 +1,4 @@
+
 # Contribution Guidelines
 
 :+1::tada: First off, thanks for taking the time to contribute! :tada::+1:
@@ -22,8 +23,23 @@ Guidelines for pull requests:
 
 #### Guidelines
 
-Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide
-Read it here: [ICON_GUIDELINES](docs/ICON_DESIGN_GUIDE.md)
+Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide.
+
+Read it here: [ICON_GUIDELINES](docs/ICON_DESIGN_GUIDE.md).
+
+### Templates
+
+Here you can find templates and instructions on how to implement the guidelines with different programs.
+
+#### Adobe Illustrator
+
+`Template`: You can find a template for Adobe Illustrator under `/docs/templates/illustrator-template.ai`.
+`Instructions`: You can find the [Illustrator Guide](/docs/ILLUSTRATOR_GUIDE.md) and how to work with the template in `/docs/ILLUSTRATOR_GUIDE.md`.
+
+#### Inkscape
+
+`Template`: None
+`Instructions`: You can find the [Inkscape Guide](/docs/INKSCAPE_GUIDE.md) and how to set up Inkscape under `/docs/INKSCAPE_GUIDE.md`.
 
 #### Submitting Mulitple Icons
 

README.md

@@ -4,18 +4,20 @@
 
 ![NPM](https://img.shields.io/npm/l/lucide)
 [![npm](https://img.shields.io/npm/v/lucide)](https://www.npmjs.com/package/lucide)
+[![installs](https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json)](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons)
 [![Discord](https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA)](https://discord.gg/EH6nSts)
 
 ## What is Lucide?
 
 Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
-Started after growing disaffection of the moderation of the [Feather Icons](https://github.com/feathericons/feather) project, with over 300+ open issues and over 100+ open PRs, this project is no longer maintained. The owner of the project stopped merging icons and want to keep the project like it now is. Hundreds of developers/designer wasted their time trying to contribute, what a shame.
 
-We're trying to expanding the icon set as much as possible while keeping it nice-looking, we do it as a community of devs and designers, join us!
+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.
+- Lucide already expanded the icon set by 130+ in less then a year, so more icons to work with.
 - Well maintained code base.
 - Active community.
 
@@ -27,16 +29,20 @@ We're trying to expanding the icon set as much as possible while keeping it nice
 * [Usage](#usage)
   * [Web](#web)
   * [React](#react)
-  * [Vue](#vue)
+  * [Vue 2](#vue-2)
+  * [Vue 3](#vue-3)
   * [Angular](#angular)
+  * [Preact](#preact)
   * [Figma](#figma)
+  * [Laravel](#laravel)
+  * [Flutter](#flutter)
 * [Contributing](#contributing)
 * [Community](#community)
 * [License](#license)
 
 ## Usage
 
-At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Feather 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)
+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)
 
 The following are additional ways you can use Lucide.
 With the Javascript library you can easily incorporate the icon you want in your webpage.
@@ -69,7 +75,7 @@ npm install lucide-react
 
 For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react#lucide-react).
 
-### Vue
+### Vue 2
 
 Implementation of the lucide icon library for vue applications.
 
@@ -83,6 +89,20 @@ npm install lucide-vue
 
 For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#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](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next).
+
 ### Angular
 
 ```sh
@@ -93,7 +113,21 @@ 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
+
+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](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact#lucide-preact).
 
 ### Figma
 
@@ -103,6 +137,26 @@ Visit [Figma community page](https://www.figma.com/community/plugin/939567362549
 
 <img width="420" src="https://www.figma.com/community/plugin/939567362549682242/thumbnail" alt="Figma Lucide Cover">
 
+### Laravel
+
+Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
+
+```sh
+composer require mallardduck/blade-lucide-icons
+```
+
+For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
+
+### Flutter
+
+Implementation of Lucide icon library for Flutter applications.
+
+```sh
+flutter pub add lucide_icons
+```
+
+For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).
+
 ## Contributing
 
 For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md).

babel.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   presets: ['@babel/env'],
+  // babelrcRoots: ['.', './packages/*'],
   env: {
     test: {
       presets: ['@babel/env'],

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/ILLUSTRATOR_GUIDE.md

@@ -0,0 +1,28 @@
+
+# Illustrator Template Guide
+
+This Guide explains how to properly use the Adobe Illustrator Template for Lucide.
+
+>Attention: Even though it is unlikely the template can be outdated or not 100% correct. Please check the Icon Design Guide before you start working with the template to ensure integrity with the Lucide icon pack.
+
+## General Workflow
+
+The Illustrator template is created following guidelines from the [Icon Design Guide](ICON_DESIGN_GUIDE.md).
+
+**Workflow:**
+
+1. Open the Document which can be found under __*/docs/templates/illustrator_template.ai*__ .
+
+2. You can now remove the content from the example logo layer ("Draw") and start creating.
+
+3. Verify that you follow the [Icon Design Guidelines](ICON_DESIGN_GUIDE.md).
+
+4. Before you export the file as an SVG make sure to check that you followed the guidelines and remove all unecessary layers (especially "Padding" and "Grid").
+
+5. Export the file with the export menu under: `Export > Export As..` than safe the file as SVG. Select the following options in the SVG Options dialog:
+
+![SVG export options in Illustrator](images/illustrator-svg-options.png?raw=true "Setting Page Size")
+
+After that, double check that the [code conventions and SVG global attributes](https://github.com/lucide-icons/lucide/blob/master/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct.
+
+7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).

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

@@ -9,7 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="21 8 21 21 3 21 3 8" />
-  <rect x="1" y="3" width="22" height="5" />
-  <line x1="10" y1="12" x2="14" y2="12" />
+  <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/battery-charging.svg

@@ -9,7 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7 7H3.78A1.73 1.73 0 002 8.67v6.66A1.73 1.73 0 003.78 17H6m8-10h2.22A1.73 1.73 0 0118 8.67v6.66A1.73 1.73 0 0116.22 17H13" />
+  <path d="M14 7h2a2 2 0 012 2v6a2 2 0 01-2 2h-3" />
+  <path d="M7 7H4a2 2 0 00-2 2v6a2 2 0 002 2h2" />
   <polyline points="11 7 8 12 12 12 9 17" />
   <line x1="22" x2="22" y1="11" y2="13" />
 </svg>

icons/bell-ring.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="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9" />
+  <path d="M13.73 21a2 2 0 01-3.46 0" />
+  <path d="M2 8c0-2.2.7-4.3 2-6" />
+  <path d="M22 8a10 10 0 00-2-6" />
+</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/check-circle-2.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="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
+  <path d="M9 12l2 2 4-4" />
+</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/chevrons-down-up.svg

@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M7 20l5-5 5 5" />
+  <path d="M7 4l5 5 5-5" />
+</svg>

icons/clipboard-copy.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="M16 4h2a2 2 0 012 2v4M8 4H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2v-2" />
+  <rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
+  <path d="M21 14H11" />
+  <path d="M15 10l-4 4 4 4" />
+</svg>

icons/currency.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"
+>
+  <circle cx="12" cy="12" r="8" />
+  <line x1="3" y1="3" x2="6" y2="6" />
+  <line x1="21" y1="3" x2="18" y2="6" />
+  <line x1="3" y1="21" x2="6" y2="18" />
+  <line x1="21" y1="21" x2="18" y2="18" />
+</svg>

icons/flag-triangle-left.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="M17 22V2L7 7l10 5" />
+</svg>

icons/flag-triangle-right.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="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/forward.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="15 17 20 12 15 7"></polyline>
+  <path d="M4 18v-2a4 4 0 0 1 4-4h12"></path>
+</svg>

icons/function-square.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"
+>
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+  <path d="M9 17c1.93 0 2.85-1 2.85-2.8V9.99c0-1.93 1.03-3.26 3.15-2.93M9 11.24h5.66" />
+</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

@@ -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="M22 10v6M2 10l10-5 10 5-10 5z" />
+  <path d="M6 12v5c3 3 9 3 12 0v-5" />
+</svg>

icons/hand-metal.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="M18 12.5V10a2 2 0 00-2-2v0a2 2 0 00-2 2v1.4" />
+  <path d="M14 11V9a2 2 0 10-4 0v2" />
+  <path d="M10 10.5V5a2 2 0 10-4 0v9" />
+  <path d="M7 15l-1.76-1.76a2 2 0 00-2.83 2.82l3.6 3.6C7.5 21.14 9.2 22 12 22h2a8 8 0 008-8V7a2 2 0 10-4 0v5" />
+</svg>

icons/import.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 3v12" />
+  <path d="M8 11l4 4 4-4" />
+  <path d="M8 5H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V7a2 2 0 00-2-2h-4" />
+</svg>

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/megaphone.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="M3 11l18-5v12L3 14v-3z" />
+  <path d="M11.6 16.8a3 3 0 11-5.8-1.6" />
+</svg>

icons/mountain-snow.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="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

@@ -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="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/quote.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="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" />
+  <path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z" />
+</svg>

icons/reply-all.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"
+>
+  <polyline points="7 17 2 12 7 7"></polyline>
+  <polyline points="12 17 7 12 12 7"></polyline>
+  <path d="M22 18v-2a4 4 0 0 0-4-4H7"></path>
+</svg>

icons/reply.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="9 17 4 12 9 7"></polyline>
+  <path d="M20 18v-2a4 4 0 0 0-4-4H4"></path>
+</svg>

icons/rocking-chair.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"
+>
+  <polyline points="3.5 2 6.5 12.5 18 12.5" />
+  <line x1="9.5" y1="12.5" x2="5.5" y2="20" />
+  <line x1="15" y1="12.5" x2="18.5" y2="20" />
+  <path d="M2.75 18a13 13 0 0018.5 0" />
+</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/settings.svg

@@ -1,12 +1,13 @@
 <svg
- width="24"
- height="24" 
- fill="none" 
- xmlns="http://www.w3.org/2000/svg" 
- 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="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z" />
   <circle cx="12" cy="12" r="3" />

icons/smartphone-charging.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"
+>
+  <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+  <path d="M12.667 8L10 12h4l-2.667 4" />
+</svg>

icons/smartphone.svg

@@ -10,5 +10,5 @@
   stroke-linejoin="round"
 >
   <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
-  <line x1="12" y1="18" x2="12.01" y2="18" />
+  <path d="M12 18h.01" />
 </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/tent.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 20L10 4" />
+  <path d="M5 20l9-16" />
+  <path d="M3 20h18" />
+  <path d="M12 15l-3 5" />
+  <path d="M12 15l3 5" />
+</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

@@ -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="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/twitter.svg

@@ -9,5 +9,5 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+  <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5 0-.28-.03-.56-.08-.83A7.72 7.72 0 0023 3z" />
 </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/vibrate.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="M2 8l2 2-2 2 2 2-2 2" />
+  <path d="M22 8l-2 2 2 2-2 2 2 2" />
+  <rect x="8" y="5" width="8" height="14" rx="1" />
+</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

@@ -5,23 +5,34 @@
       "packages/*"
     ],
     "nohoist": [
-      "**/jest", "**/jest/**",
-      "**/jasmine", "**/jasmine/**",
-      "**/react", "**/react/**",
-      "**/testing-library__jest-dom", "**/testing-library__jest-dom/**",
-      "**/testing-library__react-hooks", "**/testing-library__react-hooks/**",
-      "**/react-dom", "**/react-dom/**",
-      "**/react-test-renderer", "**/react-test-renderer/**"
+      "**/jest",
+      "**/jest/**",
+      "**/jasmine",
+      "**/jasmine/**",
+      "**/react",
+      "**/react/**",
+      "**/testing-library__jest-dom",
+      "**/testing-library__jest-dom/**",
+      "**/testing-library__react-hooks",
+      "**/testing-library__react-hooks/**",
+      "**/react-dom",
+      "**/react-dom/**",
+      "**/react-test-renderer",
+      "**/react-test-renderer/**"
     ]
   },
   "scripts": {
-    "build": "yarn lucide build && yarn lucide-react build && yarn lucide-vue build",
+    "build": "yarn lucide build && yarn lucide-react build && yarn lucide-preact build && yarn lucide-vue build && yarn lucide-vue-next build && yarn lucide-angular build",
     "test": "yarn lucide build:icons && yarn lucide-react build:icons && yarn lucide-vue build:icons && jest",
     "lucide": "yarn workspace lucide",
     "lucide-angular": "yarn workspace lucide-angular",
     "lucide-react": "yarn workspace lucide-react",
+    "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",
     "addtags": "babel-node ./scripts/addMissingKeysToTags.js --presets @babel/env",
     "generate:changelog": "babel-node ./scripts/generateChangelog.js --presets @babel/env"
@@ -66,5 +77,8 @@
   },
   "lint-staged": {
     "icons/*.svg": "npx babel-node ./scripts/optimizeStagedSvgs.js --presets @babel/env"
+  },
+  "dependencies": {
+    "svg-outline-stroke": "^1.3.1"
   }
 }

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.1-beta.1",
+  "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/common": "~11.2.6",
-    "@angular/compiler": "~11.2.6",
-    "@angular/core": "~11.2.6",
-    "@angular/platform-browser": "~11.2.6",
-    "@angular/platform-browser-dynamic": "~11.2.6",
     "@angular-devkit/build-angular": "~0.1102.5",
-    "@angular/cli": "~11.2.5",
-    "@angular/compiler-cli": "~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>