Add Pilcrow Icon (paragraph) (#884)

* add pilcrow icon
* add tags

.eslintignore

@@ -3,3 +3,4 @@ build
 coverage
 lib
 tests
+node_modules

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   extends: ['airbnb-base', 'prettier'],
   plugins: ['import', 'prettier'],
@@ -14,8 +14,26 @@ module.exports = {
       'error',
       {
         singleQuote: true,
-        trailingComma: 'all'
-      }
-    ]
-  }
+        trailingComma: 'all',
+      },
+    ],
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: ['**/*.test.js', '**/*.spec.js', './scripts/**'] },
+    ],
+    'import/extensions': [
+      'error',
+      {
+        pattern: {
+          mjs: 'always',
+          json: 'always',
+        },
+      },
+    ],
+  },
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./site/tsconfig.json', './packages/*/tsconfig.json'],
+    ecmaVersion: 2020,
+  },
 };

.github/workflows/ci.yml

@@ -14,8 +14,8 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 

.github/workflows/lucide-angular.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-angular/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-angular/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-angular:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-angular test
-

.github/workflows/lucide-font.yml

@@ -0,0 +1,59 @@
+name: Lucide font checks
+
+on:
+  pull_request:
+    paths:
+      - icons/**
+      - pnpm-lock.yaml
+  push:
+    paths:
+      - icons/**
+      - pnpm-lock.yaml
+
+jobs:
+  lucide-font:
+    runs-on: ubuntu-latest
+    container: ericfennis/lucide-font:latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2.0.1
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-lucide-font-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-lucide-font-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --filter outline-svg
+
+      - name: Outline svg Icons
+        run: pnpm build:outline-icons
+
+      - name: Create directory
+        run: mkdir lucide-font
+
+      - name: Build font
+        run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
+
+      - name: "Upload to Artifacts"
+        uses: actions/upload-artifact@v1
+        with:
+          name: lucide-font
+          path: lucide-font

.github/workflows/lucide-preact.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-preact/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-preact/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-preact:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-preact test
-

.github/workflows/lucide-react-native.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-react-native/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-react-native/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-react-native:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-react-native test
-

.github/workflows/lucide-react.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-react/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-react/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-react:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-react test
-

.github/workflows/lucide-solid.yml

@@ -0,0 +1,49 @@
+name: Lucide Solid Checks
+
+on:
+  pull_request:
+    paths:
+      - packages/lucide-solid/**
+      - pnpm-lock.yaml
+  push:
+    paths:
+      - packages/lucide-solid/**
+      - pnpm-lock.yaml
+
+jobs:
+  lucide-solid:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2.0.1
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm --filter lucide-solid build
+
+      - name: Test
+        run: pnpm --filter lucide-solid test

.github/workflows/lucide-static.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-static/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-static/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-static:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -42,4 +44,3 @@ jobs:
 
       - name: Build
         run: pnpm --filter lucide-static build
-

.github/workflows/lucide-svelte.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-svelte/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-svelte/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-svelte:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-svelte test
-

.github/workflows/lucide-vue-next.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue-next/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-vue-next/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-vue-next:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-vue-next test
-

.github/workflows/lucide-vue.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide-vue/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide-vue:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-vue test
-

.github/workflows/lucide.yml

@@ -4,16 +4,18 @@ on:
   pull_request:
     paths:
       - packages/lucide/**
+      - pnpm-lock.yaml
   push:
     paths:
       - packages/lucide/**
+      - pnpm-lock.yaml
 
 jobs:
   lucide:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -45,4 +47,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide test
-

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release Packages
 on:
   push:
     tags:
-      - "v*"
+      - 'v*'
 
   workflow_dispatch:
     inputs:
@@ -32,8 +32,8 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -86,9 +86,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -141,9 +141,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -196,9 +196,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -251,9 +251,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -306,9 +306,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -345,10 +345,10 @@ jobs:
         run: pnpm --filter lucide-angular build
 
       - name: Test
-        run: pnpm --filter lucide-angular test:headless
+        run: pnpm --filter lucide-angular test
 
       - name: Publish
-        run: pnpm --filter lucide-angular publish dist --no-git-checks
+        run: pnpm --filter lucide-angular publish --no-git-checks --ignore-scripts
 
       - name: Upload package.json
         uses: actions/upload-artifact@v2
@@ -361,9 +361,9 @@ jobs:
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -411,14 +411,69 @@ jobs:
           name: lucide-preact-package-json
           path: packages/lucide-preact/package.json
 
+  lucide-solid:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: pre-build
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2.0.1
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Set Auth Token
+        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
+
+      - name: Set package.json version lucide
+        run: pnpm --filter lucide-solid version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+
+      - name: Build
+        run: pnpm --filter lucide-solid build
+
+      - name: Test
+        run: pnpm --filter lucide-solid test
+
+      - name: Publish
+        run: pnpm --filter lucide-solid publish --no-git-checks
+
+      - name: Upload package.json
+        uses: actions/upload-artifact@v2
+        with:
+          name: lucide-solid-package-json
+          path: packages/lucide-solid/package.json
+
   lucide-svelte:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: pre-build
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -471,10 +526,10 @@ jobs:
     runs-on: ubuntu-latest
     needs: [pre-build, lucide-font]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/download-artifact@v2
 
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
 
@@ -526,8 +581,9 @@ jobs:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: pre-build
+    container: ericfennis/lucide-font:latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3.4.1
         with:
           node-version: 16
@@ -552,37 +608,17 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
-      - 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 dependencies
-        run: pnpm install
+        run: pnpm install --filter outline-svg
 
-      - name: Build Icon Font
-        run: |
-          mkdir lucide-font
-          pnpm build:outline-icons --outputDir=converted_icons && fontcustom compile "./converted_icons" -h -n "lucide" -o ./lucide-font -F
+      - name: Outline svg Icons
+        run: pnpm build:outline-icons
+
+      - name: Create directory
+        run: mkdir lucide-font
+
+      - name: Build font
+        run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
 
       - name: "Upload to Artifacts"
         uses: actions/upload-artifact@v1
@@ -597,7 +633,7 @@ jobs:
     container:
       image: cirrusci/flutter:latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/download-artifact@v2
       - uses: actions/cache@v2
         with:
@@ -680,13 +716,14 @@ jobs:
       ]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: actions/download-artifact@v2
 
       - 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-react-native-package-json/package.json packages/lucide-react-native/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-svelte-package-json/package.json packages/lucide-svelte/package.json

.gitignore

@@ -12,6 +12,7 @@ stash
 coverage
 stats
 *.log
+outlined
 packages/**/src/icons/*.js
 packages/**/src/icons/*.ts
 packages/**/LICENSE

CONTRIBUTING.md

@@ -10,13 +10,13 @@ The following is a set of guidelines for contributing to Lucide. Feel free to pr
 Feel free to open a pull-request to contribute to this project.
 
 **Working on your first Pull Request?** You can learn how from this *free* series
-[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
+[How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github)
 
 Guidelines for pull requests:
 
 - __Make your commit messages as descriptive as possible.__ Include as much information as you can. Explain anything that the file diffs themselves won’t make apparent.
 - __Document your pull request__. Explain your fix, link to the relevant issue, add screenshots when adding new icons.
-- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `master` branch.
+- __Make sure the target of your pull request is the relevant branch__. Most of bugfix or new feature should go to the `main` branch.
 - __Include only related work__. If your pull request has unrelated commit, it won't be accepted.
 
 ### Pull Requests Including Icons
@@ -65,7 +65,7 @@ If you are a designer who wants to contribute to Lucide but you don't know what
 
 ## Development
 
-You will need minimum version of [Nodejs 16+](https://nodejs.org)
+You will need minimum version of [Nodejs 16.4+](https://nodejs.org)
 For packagemanagement you will need [yarn v1](https://yarnpkg.com/getting-started/install).
 For flutter package development, you need [Flutter 1.17+](https://docs.flutter.dev/get-started/install).
 

README.md

@@ -1,15 +1,15 @@
-<p align=center><img width="410" src="https://lucide.dev/logo-text.svg" alt="Lucide Logo"></p>
+<p align=center><img width="480" src="https://lucide.dev/lucide-logo-repo.svg" alt="Lucide Logo"></p>
+<p align="center">
+  <a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide" alt="license"></a>
+  <a href="https://www.npmjs.com/package/lucide"><img src="https://img.shields.io/npm/v/lucide" alt="npm package"></a>
+  <a href="https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons"><img src="https://img.shields.io/endpoint?logo=figma&label=installs&url=https://yuanqing.github.io/figma-plugins-stats/plugin/939567362549682242/installs.json" alt="figma installs"></a>
+  <a href="https://github.com/lucide-icons/lucide/actions/workflows/release.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/release.yml/badge.svg" alt="build status"></a>
+  <a href="https://discord.gg/EH6nSts"><img src="https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA" alt="discord chat"></a>
+</p>
 
 # Lucide
 
-![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.
+Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
 
 It began after growing disaffection with 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.
 
@@ -17,30 +17,33 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
 
 ### Why choose Lucide over Feather Icons
 
-- Lucide already expanded the icon set by 130+ in less than a year, so more icons to work with.
+- More icons to work with: Lucide already has hundreds of icons more than Feather does.
+- Official librairies and integrations with popular frameworks and design tools.
 - Well maintained code base.
-- Active community.
+- Active community, regularly growing and improving the set.
 
 ## Table of Contents
 
-* [Installation](#installation)
-  * [Package managers](#package-managers)
-  * [CDN](#cdn)
-* [Usage](#usage)
-  * [Web](#web)
-  * [React](#react)
-  * [React Native](#react-native)
-  * [Vue 2](#vue-2)
-  * [Vue 3](#vue-3)
-  * [Angular](#angular)
-  * [Preact](#preact)
-  * [Static](#static-svg-sprite-font-icons-)
-  * [Figma](#figma)
-  * [Laravel](#laravel)
-  * [Flutter](#flutter)
-* [Contributing](#contributing)
-* [Community](#community)
-* [License](#license)
+- [Usage](#usage)
+  - [Web](#web)
+  - [React](#react)
+  - [React Native](#react-native)
+  - [Vue 2](#vue-2)
+  - [Vue 3](#vue-3)
+  - [Angular](#angular)
+  - [Preact](#preact)
+  - [Static (svg sprite, font, icons ..)](#static-svg-sprite-font-icons-)
+  - [Figma](#figma)
+  - [Laravel](#laravel)
+  - [Flutter](#flutter)
+  - [Svelte](#svelte)
+  - [Solid](#solid)
+  - [Hyva](#hyva)
+- [Contributing](#contributing)
+- [Community](#community)
+- [License](#license)
+- [Credits](#credits)
+- [Sponsors](#sponsors)
 
 ## Usage
 
@@ -55,9 +58,11 @@ Implementation of the lucide icon library for web applications.
 
 ```sh
 npm install lucide
+```
 
-#or
+or
 
+```sh
 yarn add lucide
 ```
 
@@ -69,9 +74,11 @@ Implementation of the lucide icon library for react applications.
 
 ```sh
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
@@ -83,13 +90,15 @@ Implementation of the lucide icon library for React Native applications.
 
 ```sh
 yarn add lucide-react-native
+```
 
-# or
+or
 
+```sh
 npm install lucide-react-native
 ```
 
-For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react-native#lucide-react-native).
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-react-native#lucide-react-native).
 
 ### Vue 2
 
@@ -97,9 +106,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```sh
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
@@ -111,9 +122,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```sh
 yarn add lucide-vue-next
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue-next
 ```
 
@@ -123,9 +136,11 @@ For more details, see the [documentation](https://github.com/lucide-icons/lucide
 
 ```sh
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
@@ -137,9 +152,11 @@ Implementation of the lucide icon library for preact applications.
 
 ```sh
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
@@ -156,9 +173,11 @@ NPM package
 
 ```sh
 yarn add lucide-static
+```
 
-# or
+or
 
+```sh
 npm install lucide-static
 ```
 
@@ -190,6 +209,48 @@ flutter pub add lucide_icons
 
 For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).
 
+### Svelte
+
+Implementation of the lucide icon library for Svelte applications.
+
+```sh
+yarn add lucide-svelte
+```
+
+or
+
+```sh
+npm install lucide-svelte
+```
+
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-svelte#lucide-svelte).
+
+### Solid
+
+Implementation of the lucide icon library for solid applications.
+
+```sh
+yarn add lucide-solid
+```
+
+or
+
+```sh
+npm install lucide-solid
+```
+
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-solid#lucide-solid).
+
+### Hyva
+
+Implementation of Lucide icon's using Hyvä's svg php viewmodal to render icons for Magento 2 Hyva theme based projects.
+
+```sh
+composer require siteation/magento2-hyva-icons-lucide
+```
+
+For more details, see the [documentation](https://github.com/Siteation/magento2-hyva-icons-lucide/blob/main/README.md).
+
 ## Contributing
 
 For more info on how to contribute please see the [contribution guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
@@ -216,4 +277,3 @@ Thank you to all the people who contributed to Lucide!
 <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
   <img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
 </a>
-

docs/comparison.md

@@ -8,7 +8,7 @@ title: Comparison
 
 Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather).
 
-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 adn not maintained actively. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
+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 and not maintained actively. 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.
 

docs/installation.md

@@ -10,9 +10,11 @@ Implementation of the lucide icon library for web applications.
 
 ```bash
 npm install lucide
+```
 
-#or
+or
 
+```sh
 yarn add lucide
 ```
 
@@ -24,9 +26,11 @@ Implementation of the lucide icon library for react applications.
 
 ```bash
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
@@ -38,9 +42,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```bash
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
@@ -52,9 +58,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```bash
 yarn add lucide-vue-next
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue-next
 ```
 
@@ -66,9 +74,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```bash
 yarn add lucide-svelte
+```
 
-# or
+or
 
+```sh
 npm install lucide-svelte
 ```
 
@@ -78,9 +88,11 @@ For more details, see the [documentation](packages/lucide-svelte).
 
 ```bash
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
@@ -92,9 +104,11 @@ Implementation of the lucide icon library for preact applications.
 
 ```bash
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
@@ -106,7 +120,7 @@ The lucide figma plugin.
 
 Visit [Figma community page](https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons) to install the plugin.
 
-![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail "Figma Lucide Cover")
+![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail 'Figma Lucide Cover')
 
 ## Laravel
 

docs/packages/lucide-angular.md

@@ -4,11 +4,13 @@ Implementation of the lucide icon library for angular applications.
 
 ## Installation
 
-``` sh
+```sh
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
@@ -20,12 +22,12 @@ There are three ways for use this library.
 
 After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
 
-``` html
+```html
 <!-- app.component.html -->
 <div id="lucide-icon"></div>
 ```
 
-``` js
+```js
 // app.component.ts
 
 import { Component, OnInit } from '@angular/core';
@@ -37,7 +39,6 @@ import { Activity } from 'lucide-angular/icons';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent implements OnInit {
   ngOnInit(): void {
     const div = document.getElementById('lucide-icon');
@@ -51,11 +52,11 @@ export class AppComponent implements OnInit {
 }
 ```
 
-### Method 2: User __Tag__ with __name__ property
+### 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
+```js
 // app.module.ts
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -65,32 +66,29 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    LucideAngularModule.pick({ AlarmCheck, Edit })  // add all of icons that is imported.
+    LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-
-export class AppModule { }
+export class AppModule {}
 ```
 
-``` html
+```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
+### 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
+```js
 // app.module.ts
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -100,28 +98,21 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ })
-  ],
+  declarations: [AppComponent],
+  imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
   providers: [],
   bootstrap: [AppComponent]
 })
-
-export class AppModule { }
+export class AppModule {}
 ```
 
-``` xml
+```xml
 <!-- app.component.html -->
 <lucide-icon [img]="ico1" class="myicon"></lucide-icon>
 <lucide-icon [img]="ico2" class="myicon"></lucide-icon>
 ```
 
-``` js
+```js
 // app.component.ts
 import { Component } from '@angular/core';
 import { Airplay, Circle } from 'lucide-angular';
@@ -131,7 +122,6 @@ import { Airplay, Circle } from 'lucide-angular';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent {
   ico1 = Airplay;
   ico2 = Circle;
@@ -144,9 +134,9 @@ export class AppComponent {
 
 In `Method 2`: import all icons in `app.module.ts` by:
 
-``` js
+```js
 
-import { icons } from 'lucide-angular/icons';
+import { icons } from 'lucide-angular';
 
 LucideAngularModule.pick(icons)
 

docs/packages/lucide-preact.md

@@ -10,28 +10,30 @@ Implementation of the lucide icon library for preact applications.
 
 ```sh
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
 ## How to use
 
-It's build with ESmodules so it's completely threeshakable.
+It's build with ESmodules so it's completely tree-shakable.
 Each icon can be imported as a preact component.
 
 ### Example
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-preact';
 // Returns PreactComponent
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -39,20 +41,20 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| 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
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
@@ -62,17 +64,17 @@ const App = () => {
 
 It is possible to create one generic icon component to load icons.
 
-> ⚠️ Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+> ⚠️ 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
+```js
 import * as icons from 'lucide-preact';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

docs/packages/lucide-react-native.md

@@ -8,15 +8,17 @@ First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install
 
 ```bash
 yarn add lucide-react-native
+```
 
-# or
+or
 
+```sh
 npm install lucide-react-native
 ```
 
 ## How to use
 
-It's build with ESmodules so it's completely threeshakable.
+It's build with ESmodules so it's completely tree-shakable.
 Each icon can be imported as a react component.
 
 ### Example

docs/packages/lucide-react.md

@@ -4,30 +4,32 @@ Implementation of the lucide icon library for react applications
 
 ## Installation
 
-``` bash
+```bash
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
 ## How to use
 
-It's build with ESmodules so it's completely threeshakable.
+It's build with ESmodules so it's completely tree-shakable.
 Each icon can be imported as a react component.
 
 ### Example
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-react';
 // Returns ReactComponent
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -35,20 +37,20 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| 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
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```
 
@@ -56,17 +58,17 @@ const App = () => {
 
 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.
+> :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
+```js
 import * as icons from 'lucide-react';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

docs/packages/lucide-static.md

@@ -19,23 +19,25 @@ This package is suitable for very specific use cases for example if you want to
 
 ```sh
 yarn add lucide-static
+```
 
-# or
+or
 
+```sh
 npm install lucide-static
 ```
 
 ### CDN
 
-``` html
+```html
 <!-- Svg File -->
-<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
+<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
 
 <!-- Icon Font -->
 <style>
   @font-face {
-    font-family: "LucideIcons";
-    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format("truetype");
+    font-family: 'LucideIcons';
+    src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
   }
 </style>
 ```
@@ -50,14 +52,14 @@ Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprit
 
 To use it in for example html:
 
-``` html
+```html
 <!-- Svg File -->
-<img src="~lucide-static/icons/home.svg">
+<img src="~lucide-static/icons/home.svg" />
 ```
 
-``` css
+```css
 .home-icon {
-  background-image: url(~lucide-static/icons/home.svg)
+  background-image: url(~lucide-static/icons/home.svg);
 }
 ```
 
@@ -69,7 +71,7 @@ You can simply import each svg by targeting `lucide-static/icons/{icon-name}.svg
 To use svgs in your project you can for example use a [svg loader](https://v4.webpack.js.org/loaders/svg-inline-loader/).
 
 ```js
-import arrowRightIcon from 'lucide-static/icons/arrow-right'
+import arrowRightIcon from 'lucide-static/icons/arrow-right';
 
 // return string of a svg
 ```
@@ -80,7 +82,7 @@ You may need additional loader for this.
 
 ```html
 <!-- Icon Sprite, not recommended for production! -->
-<img src="lucide-static/sprite.svg#home">
+<img src="lucide-static/sprite.svg#home" />
 
 <!-- or -->
 <svg
@@ -104,13 +106,13 @@ If you'd prefer, you can use CSS to hold your base SVG properties
 
 ```css
 .lucide-icon {
-    width: 24px;
-    height: 24px;
-    stroke: currentColor;
-    fill: none;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 ```
 
@@ -133,20 +135,19 @@ and update the svg as follows
 ### Icon Font
 
 ```css
-@import("~lucide-static/font/Lucide.css")
+@import ('~lucide-static/font/Lucide.css');
 ```
 
 ```html
 <div class="icon-home"></div>
 ```
 
-
 ### Node.js
 
 To use lucide icons in your Nodejs project you can import each icon as:
 
 ```js
-const { messageSquare } = require('lucide-static/lib')
+const { messageSquare } = require('lucide-static/lib');
 ```
 
 > Note: Each icon name is in camelCase.
@@ -154,10 +155,10 @@ const { messageSquare } = require('lucide-static/lib')
 #### Example in node.js project
 
 ```js
-const express = require('express')
-const { messageSquare } = require('lucide-static/lib')
-const app = express()
-const port = 3000
+const express = require('express');
+const { messageSquare } = require('lucide-static/lib');
+const app = express();
+const port = 3000;
 
 app.get('/', (req, res) => {
   res.send(`
@@ -172,10 +173,10 @@ app.get('/', (req, res) => {
 
       </body>
     </html>
-  `)
-})
+  `);
+});
 
 app.listen(port, () => {
-  console.log(`Example app listening at http://localhost:${port}`)
-})
+  console.log(`Example app listening at http://localhost:${port}`);
+});
 ```

docs/packages/lucide-svelte.md

@@ -6,9 +6,11 @@ Implementation of the lucide icon library for svelte applications.
 
 ```bash
 yarn add lucide-svelte
+```
 
-# or
+or
 
+```sh
 npm install lucide-svelte
 ```
 
@@ -22,17 +24,17 @@ Default usage:
 
 ```html
 <script>
-import { Skull } from 'lucide-svelte'
+  import { Skull } from 'lucide-svelte';
 </script>
 
-<Skull/>
+<Skull />
 ```
 
 You can pass additional props to adjust the icon.
 
 ```html
 <script>
-import { Camera } from 'lucide-svelte'
+  import { Camera } from 'lucide-svelte';
 </script>
 
 <Camera color="#ff3e98" />
@@ -40,12 +42,12 @@ import { Camera } from 'lucide-svelte'
 
 ### Available props
 
-|  name          |   type   |  default
-| -------------- | -------- | --------
-| `size`         | *Number* | 24
-| `color`        | *String* | currentColor
-| `strokeWidth`  | *Number* | 2
-| `*<SVGProps>`  | *String* | -
+| name          | type     | default      |
+| ------------- | -------- | ------------ |
+| `size`        | _Number_ | 24           |
+| `color`       | _String_ | currentColor |
+| `strokeWidth` | _Number_ | 2            |
+| `*<SVGProps>` | _String_ | -            |
 
 \* All SVGProps are available to style the svgs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation)
 
@@ -53,10 +55,10 @@ import { Camera } from 'lucide-svelte'
 
 ```html
 <script>
-import { Phone } from 'lucide-svelte'
+  import { Phone } from 'lucide-svelte';
 </script>
 
-<Phone fill="#333"/>
+<Phone fill="#333" />
 ```
 
 This results a filled phone icon.
@@ -69,20 +71,20 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` html
+```html
 <script>
-  import * as icons from "lucide-svelte";
+  import * as icons from 'lucide-svelte';
   export let name;
 </script>
 
-<svelte:component this={icons[name]} {...$$props}/>
+<svelte:component this="{icons[name]}" {...$$props} />
 ```
 
 ##### Then you can use it like this
 
-``` html
+```html
 <script>
-  import LucideIcon from "./LucideIcon";
+  import LucideIcon from './LucideIcon';
 </script>
 
 <LucideIcon name="Menu" />

docs/packages/lucide-vue-next.md

@@ -2,7 +2,7 @@
 
 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](lucide-vue)
+> ⚠️ This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue](lucide-vue)
 
 ## Installation
 
@@ -20,7 +20,7 @@ npm install lucide-vue-next
 
 ## How to use
 
-It's build with ESmodules so it's completely threeshakable.
+It's build with ESmodules so it's completely tree-shakable.
 Each icon can be imported as a vue component.
 
 ### Example
@@ -35,15 +35,8 @@ You can pass additional props to adjust the icon.
   />
 </template>
 
-<script>
-// Returns Vue component
+<script setup>
 import { Camera } from 'lucide-vue-next';
-
-export default {
-  name: "My Component",
-  components: { Camera }
-}
-
 </script>
 ```
 
@@ -53,8 +46,8 @@ export default {
 | ------------ | -------- | --------
 | `size`       | *Number* | 24
 | `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
-| `defaultClass`| *String* | lucide-icon
+| `stroke-width`| *Number* | 2
+| `default-class`| *String* | lucide-icon
 
 ### Custom props
 
@@ -76,25 +69,25 @@ It is possible to create one generic icon component to load icons.
 
 ``` html
 <template>
-  <component :is="icon" />
+    <component :is="icon" :size="size" :color="color" :stroke-width="strokeWidth" :default-class="defaultClass" />
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue';
 import * as icons from "lucide-vue-next";
 
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
   },
-  setup(props) {
-    const icon = computed(() => icons[props.name])
+  size: Number,
+  color: String,
+  strokeWidth: Number,
+  defaultClass: String
+})
 
-    return { icon }
-  }
-};
+const icon = computed(() => icons[props.name]);
 </script>
 ```
 
@@ -107,3 +100,4 @@ export default {
   </div>
 </template>
 ```
+All other props listed above also work on the `Icon` Component.

docs/packages/lucide-vue.md

@@ -8,55 +8,53 @@ Implementation of the lucide icon library for Vue applications.
 
 ```sh
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
 ## How to use
 
-It's build with ESmodules so it's completely threeshakable.
+It's build with ESmodules so it's completely tree-shakable.
 Each icon can be imported as a vue component.
 
 ### Example
 
 You can pass additional props to adjust the icon.
 
-``` html
+```html
 <template>
-  <Camera
-    color="red"
-    :size="32"
-  />
+  <Camera color="red" :size="32" />
 </template>
 
 <script>
-// Returns Vue component
-import { Camera } from 'lucide-vue';
-
-export default {
-  name: "My Component",
-  components: { Camera }
-}
+  // 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
+| 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.
 
-``` html
+```html
 <template>
   <Camera fill="red" />
 </template>
@@ -70,33 +68,33 @@ It is possible to create one generic icon component to load icons.
 
 #### Icon Component Example
 
-``` html
+```html
 <template>
   <component :is="icon" />
 </template>
 
 <script>
-import * as icons from "lucide-vue";
+  import * as icons from 'lucide-vue';
 
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true,
+  export default {
+    props: {
+      name: {
+        type: String,
+        required: true
+      }
     },
-  },
-  computed: {
-    icon() {
-      return icons[this.name];
-    },
-  },
-};
+    computed: {
+      icon() {
+        return icons[this.name];
+      }
+    }
+  };
 </script>
 ```
 
 ##### Then you can use it like this
 
-``` html
+```html
 <template>
   <div id="app">
     <Icon name="Airplay" />

docs/packages/lucide.md

@@ -6,15 +6,19 @@ Implementation of the lucide icon library for web applications.
 
 ### Package Managers
 
-``` bash
+```sh
 npm install lucide
-#or
+```
+
+or
+
+```sh
 yarn add lucide
 ```
 
 ### CDN
 
-``` html
+```html
 <!-- Development version -->
 <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
 
@@ -44,7 +48,7 @@ Here is a complete example with unpkg
 
 ### With ESModules
 
-To reduce bundle size, lucide is built to be fully treeshakable.
+To reduce bundle size, lucide is built to be fully tree-shakable.
 The `createIcons` function will search for HTMLElements with the attribute `icon-name` and replace it with the svg from the given icon name.
 
 ```html
@@ -56,7 +60,7 @@ The `createIcons` function will search for HTMLElements with the attribute `icon
 import { createIcons, icons } from 'lucide';
 
 // Caution, this will import all the icons and bundle them.
-createIcons({icons});
+createIcons({ icons });
 
 // Recommended way, to include only the icons you need.
 import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
@@ -65,8 +69,8 @@ createIcons({
   icons: {
     Menu,
     ArrowRight,
-    Globe,
-  },
+    Globe
+  }
 });
 ```
 
@@ -83,9 +87,9 @@ createIcons({
   attrs: {
     class: ['my-custom-class', 'icon'],
     'stroke-width': 1,
-    stroke: '#333',
+    stroke: '#333'
   },
-  nameAttr: 'icon-name', // attribute for the icon name.
+  nameAttr: 'icon-name' // attribute for the icon name.
 });
 ```
 
@@ -98,8 +102,8 @@ createIcons({
   icons: {
     Menu,
     ArrowRight,
-    Globe,
-  },
+    Globe
+  }
 });
 ```
 

icons/baby.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M9 12h0" />
-  <path d="M15 12h0" />
+  <path d="M9 12h0.01" />
+  <path d="M15 12h0.01" />
   <path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5" />
   <path d="M19 6.3a9 9 0 0 1 1.8 3.9 2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1" />
 </svg>

icons/bean-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="M9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22a13.96 13.96 0 0 0 9.9-4.1" />
+  <path d="M10.75 5.093A6 6 0 0 1 22 8c0 2.411-.61 4.68-1.683 6.66" />
+  <path d="M5.341 10.62a4 4 0 0 0 6.487 1.208M10.62 5.341a4.015 4.015 0 0 1 2.039 2.04" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/bean.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="M10.165 6.598C9.954 7.478 9.64 8.36 9 9c-.64.64-1.521.954-2.402 1.165A6 6 0 0 0 8 22c7.732 0 14-6.268 14-14a6 6 0 0 0-11.835-1.402Z" />
+  <path d="M5.341 10.62A4 4 0 1 0 10.62 5.34" />
+</svg>

icons/book-open-check.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="M8 3H2v15h7c1.7 0 3 1.3 3 3V7c0-2.2-1.8-4-4-4Z" />
+  <path d="m16 12 2 2 4-4" />
+  <path d="M22 6V3h-6c-2.2 0-4 1.8-4 4v14c0-1.7 1.3-3 3-3h7v-2.3" />
+</svg>

icons/candy-off.svg

@@ -0,0 +1,20 @@
+<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.5 8.5-1 1a4.95 4.95 0 0 0 7 7l1-1" />
+  <path d="M11.843 6.187A4.947 4.947 0 0 1 16.5 7.5a4.947 4.947 0 0 1 1.313 4.657" />
+  <path d="M14 16.5V14" />
+  <path d="M14 6.5v1.843" />
+  <path d="M10 10v7.5" />
+  <path d="m16 7 1-5 1.367.683A3 3 0 0 0 19.708 3H21v1.292a3 3 0 0 0 .317 1.341L22 7l-5 1" />
+  <path d="m8 17-1 5-1.367-.683A3 3 0 0 0 4.292 21H3v-1.292a3 3 0 0 0-.317-1.341L2 17l5-1" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/candy.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="m9.5 7.5-2 2a4.95 4.95 0 1 0 7 7l2-2a4.95 4.95 0 1 0-7-7Z" />
+  <path d="M14 6.5v10" />
+  <path d="M10 7.5v10" />
+  <path d="m16 7 1-5 1.37.68A3 3 0 0 0 19.7 3H21v1.3c0 .46.1.92.32 1.33L22 7l-5 1" />
+  <path d="m8 17-1 5-1.37-.68A3 3 0 0 0 4.3 21H3v-1.3a3 3 0 0 0-.32-1.33L2 17l5-1" />
+</svg>

icons/cat.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"
+>
+  <path d="M14 5.256A8.148 8.148 0 0 0 12 5a9.04 9.04 0 0 0-2 .227M20.098 10c.572 1.068.902 2.24.902 3.444C21 17.89 16.97 21 12 21s-9-3-9-7.556c0-1.251.288-2.41.792-3.444"/>
+  <path d="M3.75 10S2.11 3.58 3.5 3C4.89 2.42 8 3 9.781 5"/>
+  <path d="M20.172 10.002s1.64-6.42.25-7c-1.39-.58-4.5 0-6.282 2"/>
+  <path d="M8 14v.5"/>
+  <path d="M16 14v.5"/>
+  <path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/>
+</svg>

icons/check-check.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="M18 6 7 17l-5-5" />
+  <path d="m22 10-7.5 7.5L13 16" />
+</svg>

icons/dna-off.svg

@@ -0,0 +1,23 @@
+<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 2c-1.35 1.5-2.092 3-2.5 4.5M9 22c1.35-1.5 2.092-3 2.5-4.5" />
+  <path d="M2 15c3.333-3 6.667-3 10-3m10-3c-1.5 1.35-3 2.092-4.5 2.5" />
+  <path d="m17 6-2.5-2.5" />
+  <path d="m14 8-1.5-1.5" />
+  <path d="m7 18 2.5 2.5" />
+  <path d="m3.5 14.5.5.5" />
+  <path d="m20 9 .5.5" />
+  <path d="m6.5 12.5 1 1" />
+  <path d="m16.5 10.5 1 1" />
+  <path d="m10 16 1.5 1.5" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/dna.svg

@@ -0,0 +1,23 @@
+<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 15c6.667-6 13.333 0 20-6" />
+  <path d="M9 22c1.798-1.998 2.518-3.995 2.807-5.993" />
+  <path d="M15 2c-1.798 1.998-2.518 3.995-2.807 5.993" />
+  <path d="m17 6-2.5-2.5" />
+  <path d="m14 8-1-1" />
+  <path d="m7 18 2.5 2.5" />
+  <path d="m3.5 14.5.5.5" />
+  <path d="m20 9 .5.5" />
+  <path d="m6.5 12.5 1 1" />
+  <path d="m16.5 10.5 1 1" />
+  <path d="m10 16 1.5 1.5" />
+</svg>

icons/dog.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"
+>
+  <path d="M10 5.172C10 3.782 8.423 2.679 6.5 3c-2.823.47-4.113 6.006-4 7 .08.703 1.725 1.722 3.656 1 1.261-.472 1.96-1.45 2.344-2.5"/>
+  <path d="M14.267 5.172c0-1.39 1.577-2.493 3.5-2.172 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5"/>
+  <path d="M8 14v.5"/>
+  <path d="M16 14v.5"/>
+  <path d="M11.25 16.25h1.5L12 17l-.75-.75Z"/>
+  <path d="M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444c0-1.061-.162-2.2-.493-3.309m-9.243-6.082A8.801 8.801 0 0 1 12 5c.78 0 1.5.108 2.161.306"/>
+</svg>

icons/dumbbell.svg

@@ -0,0 +1,19 @@
+<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.5 6.5 11 11" />
+  <path d="m21 21-1-1" />
+  <path d="m3 3 1 1" />
+  <path d="m18 22 4-4" />
+  <path d="m2 6 4-4" />
+  <path d="m3 10 7-7" />
+  <path d="m14 21 7-7" />
+</svg>

icons/ear-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="M6 18.5a3.5 3.5 0 1 0 7 0c0-1.57.92-2.52 2.04-3.46" />
+  <path d="M6 8.5c0-.75.13-1.47.36-2.14" />
+  <path d="M8.8 3.15A6.5 6.5 0 0 1 19 8.5c0 1.63-.44 2.81-1.09 3.76" />
+  <path d="M12.5 6A2.5 2.5 0 0 1 15 8.5M10 13a2 2 0 0 0 1.82-1.18" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/ear.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="M6 8.5a6.5 6.5 0 1 1 13 0c0 6-6 6-6 10a3.5 3.5 0 1 1-7 0" />
+  <path d="M15 8.5a2.5 2.5 0 0 0-5 0v1a2 2 0 1 1 0 4" />
+</svg>

icons/egg-off.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="M6.399 6.399C5.362 8.157 4.65 10.189 4.5 12c-.37 4.43 1.27 9.95 7.5 10 3.256-.026 5.259-1.547 6.375-3.625" />
+  <path d="M19.532 13.875A14.07 14.07 0 0 0 19.5 12c-.36-4.34-3.95-9.96-7.5-10-1.04.012-2.082.502-3.046 1.297" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/flask-conical-off.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"
+>
+  <path d="M10 10 4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-1.272-2.542" />
+  <path d="M10 2v2.343" />
+  <path d="M14 2v6.343" />
+  <path d="M8.5 2h7" />
+  <path d="M7 16h9" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/flask-conical.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M10 2v8L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45L14 10V2" />
+  <path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2" />
   <path d="M8.5 2h7" />
   <path d="M7 16h10" />
 </svg>

icons/heading-1.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="M4 12h8" />
+  <path d="M4 18V6" />
+  <path d="M12 18V6" />
+  <path d="m17 12 3-2v8" />
+</svg>

icons/heading-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="M4 12h8" />
+  <path d="M4 18V6" />
+  <path d="M12 18V6" />
+  <path d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1" />
+</svg>

icons/heading-3.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="M4 12h8" />
+  <path d="M4 18V6" />
+  <path d="M12 18V6" />
+  <path d="M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2" />
+  <path d="M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2" />
+</svg>

icons/heading-4.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="M4 12h8" />
+  <path d="M4 18V6" />
+  <path d="M12 18V6" />
+  <path d="M17 10v4h4" />
+  <path d="M21 10v8" />
+</svg>

icons/heading-5.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="M4 12h8" />
+  <path d="M4 18V6" />
+  <path d="M12 18V6" />
+  <path d="M17 13v-3h4" />
+  <path d="M17 17.7c.4.2.8.3 1.3.3 1.5 0 2.7-1.1 2.7-2.5S19.8 13 18.3 13H17" />
+</svg>

icons/heading-6.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="M4 12h8" />
+  <path d="M4 18V6" />
+  <path d="M12 18V6" />
+  <circle cx="19" cy="16" r="2" />
+  <path d="M20 10c-2 2-3 3.5-3 6" />
+</svg>

icons/heading.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="M6 12h12" />
+  <path d="M6 20V4" />
+  <path d="M18 20V4" />
+</svg>

icons/hop-off.svg

@@ -0,0 +1,20 @@
+<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.5 5.5C19 7 20.5 9 21 11c-1.323.265-2.646.39-4.118.226" />
+  <path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
+  <path d="M17.5 17.5c-2.5 0-4 0-6-1" />
+  <path d="M20 11.5c1 1.5 2 3.5 2 4.5" />
+  <path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
+  <path d="M22 22c-2 0-3.5-.5-5.5-1.5" />
+  <path d="M4.783 4.782C1.073 8.492 1 14.5 5 18c1-1 2-4.5 1.5-6.5 1.5 1 4 1 5.5.5M8.227 2.57C11.578 1.335 15.453 2.089 18 5c-.88.88-3.7 1.761-5.726 1.618" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/hop.svg

@@ -0,0 +1,20 @@
+<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.5 5.5C19 7 20.5 9 21 11c-2.5.5-5 .5-8.5-1" />
+  <path d="M5.5 17.5C7 19 9 20.5 11 21c.5-2.5.5-5-1-8.5" />
+  <path d="M16.5 11.5c1 2 1 3.5 1 6-2.5 0-4 0-6-1" />
+  <path d="M20 11.5c1 1.5 2 3.5 2 4.5-1.5.5-3 0-4.5-.5" />
+  <path d="M11.5 20c1.5 1 3.5 2 4.5 2 .5-1.5 0-3-.5-4.5" />
+  <path d="M20.5 16.5c1 2 1.5 3.5 1.5 5.5-2 0-3.5-.5-5.5-1.5" />
+  <path d="M4.783 4.782C8.493 1.072 14.5 1 18 5c-1 1-4.5 2-6.5 1.5 1 1.5 1 4 .5 5.5-1.5.5-4 .5-5.5-.5C7 13.5 6 17 5 18c-4-3.5-3.927-9.508-.217-13.218Z" />
+  <path d="M4.5 4.5 3 3c-.184-.185-.184-.816 0-1" />
+</svg>

icons/milk-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="M8 2h8" />
+  <path d="M9 2v1.343M15 2v2.789a4 4 0 0 0 .672 2.219l.656.984a4 4 0 0 1 .672 2.22v1.131M7.8 7.8l-.128.192A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3" />
+  <path d="M7 15a6.47 6.47 0 0 1 5 0 6.472 6.472 0 0 0 3.435.435" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/milk.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="M8 2h8" />
+  <path d="M9 2v2.789a4 4 0 0 1-.672 2.219l-.656.984A4 4 0 0 0 7 10.212V20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-9.789a4 4 0 0 0-.672-2.219l-.656-.984A4 4 0 0 1 15 4.788V2" />
+  <path d="M7 15a6.472 6.472 0 0 1 5 0 6.47 6.47 0 0 0 5 0" />
+</svg>

icons/monitor-smartphone.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 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8" />
+  <path d="M10 19v-3.96 3.15" />
+  <path d="M7 19h5" />
+  <rect x="16" y="12" width="6" height="10" rx="2" />
+</svg>

icons/nut-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="M12 4V2" />
+  <path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592a7.01 7.01 0 0 0 4.125-2.939" />
+  <path d="M19 10v3.343" />
+  <path d="M12 12c-1.349-.573-1.905-1.005-2.5-2-.546.902-1.048 1.353-2.5 2-1.018-.644-1.46-1.08-2-2-1.028.71-1.69.918-3 1 1.081-1.048 1.757-2.03 2-3 .194-.776.84-1.551 1.79-2.21m11.654 5.997c.887-.457 1.28-.891 1.556-1.787 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4-.74 0-1.461.068-2.15.192" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/nut.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 4V2" />
+  <path d="M5 10v4a7.004 7.004 0 0 0 5.277 6.787c.412.104.802.292 1.102.592L12 22l.621-.621c.3-.3.69-.488 1.102-.592A7.003 7.003 0 0 0 19 14v-4" />
+  <path d="M12 4C8 4 4.5 6 4 8c-.243.97-.919 1.952-2 3 1.31-.082 1.972-.29 3-1 .54.92.982 1.356 2 2 1.452-.647 1.954-1.098 2.5-2 .595.995 1.151 1.427 2.5 2 1.31-.621 1.862-1.058 2.5-2 .629.977 1.162 1.423 2.5 2 1.209-.548 1.68-.967 2-2 1.032.916 1.683 1.157 3 1-1.297-1.036-1.758-2.03-2-3-.5-2-4-4-8-4Z" />
+</svg>

icons/pilcrow.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="M13 4v16" />
+  <path d="M17 4v16" />
+  <path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13" />
+</svg>

icons/plug-2.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="M9 2v6" />
+  <path d="M15 2v6" />
+  <path d="M12 17v5" />
+  <path d="M5 8h14" />
+  <path d="M6 11V8h12v3a6 6 0 1 1-12 0v0Z" />
+</svg>

icons/plug.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="M12 22v-5" />
+  <path d="M9 7V2" />
+  <path d="M15 7V2" />
+  <path d="M6 13V8h12v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4Z" />
+</svg>

icons/sailboat.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="M22 18H2a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4Z"/>
+  <path d="M21 14 10 2 3 14h18Z"/>
+  <path d="M10 2v16"/>
+</svg>

icons/signal-zero.svg

@@ -10,5 +10,4 @@
   stroke-linejoin="round"
 >
   <path d="M2 20h.01" />
-  <path d="M7 20v-4" />
 </svg>

icons/sort-asc.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M11 5h4" />
-  <path d="M11 9h7" />
-  <path d="M11 13h10" />
-  <path d="m3 17 3 3 3-3" />
-  <path d="M6 18V4" />
+  <path d="M11 11H15" />
+  <path d="M11 15H18" />
+  <path d="M11 19H21" />
+  <path d="M9 7L6 4L3 7" />
+  <path d="M6 6L6 20" />
 </svg>

icons/spline.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="M21 6V4c0-.6-.4-1-1-1h-2a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1Z" />
+  <path d="M7 20v-2c0-.6-.4-1-1-1H4a1 1 0 0 0-1 1v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1Z" />
+  <path d="M5 17A12 12 0 0 1 17 5" />
+</svg>

icons/vegan.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 2c4.056 3.007 9.232 9.337 10 20 .897-6.818 1.5-9.5 4-14" />
+  <path d="M20.375 6.533A9.953 9.953 0 0 1 22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2c2.003 0 3.869.589 5.433 1.603" />
+  <path d="M17.104 4c-1.002 1.274-1.146 2.586-1.1 4 1.9-.1 3.003-.201 4.3-1.4 1.406-1.3 1.6-2.3 1.7-4.6-2.7.1-3.623.375-4.9 2Z" />
+</svg>

icons/wheat-off.svg

@@ -0,0 +1,22 @@
+<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 22 10-10" />
+  <path d="m16 8-1.17 1.17" />
+  <path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
+  <path d="m8 8-.53.53a3.5 3.5 0 0 0 0 4.94L9 15l1.53-1.53c.55-.55.88-1.25.98-1.97" />
+  <path d="M10.91 5.26c.15-.26.34-.51.56-.73L13 3l1.53 1.53a3.5 3.5 0 0 1 .28 4.62" />
+  <path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
+  <path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
+  <path d="m16 16-.53.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.49 3.49 0 0 1 1.97-.98" />
+  <path d="M18.74 13.09c.26-.15.51-.34.73-.56L21 11l-1.53-1.53a3.5 3.5 0 0 0-4.62-.28" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

icons/wheat.svg

@@ -0,0 +1,20 @@
+<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 22 16 8" />
+  <path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
+  <path d="M7.47 8.53 9 7l1.53 1.53a3.5 3.5 0 0 1 0 4.94L9 15l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
+  <path d="M11.47 4.53 13 3l1.53 1.53a3.5 3.5 0 0 1 0 4.94L13 11l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z" />
+  <path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z" />
+  <path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
+  <path d="M15.47 13.47 17 15l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
+  <path d="M19.47 9.47 21 11l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L13 11l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z" />
+</svg>

icons/wine-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="M8 22h8" />
+  <path d="M7 10h3m7 0h-1.343" />
+  <path d="M12 15v7" />
+  <path d="M7.307 7.307A12.33 12.33 0 0 0 7 10a5 5 0 0 0 7.391 4.391M8.638 2.981C8.75 2.668 8.872 2.34 9 2h6c1.5 4 2 6 2 8 0 .407-.05.809-.145 1.198" />
+  <line x1="2" y1="2" x2="22" y2="22" />
+</svg>

package.json

@@ -13,47 +13,48 @@
     "lucide-svelte": "pnpm --filter lucide-svelte",
     "lucide-static": "pnpm --filter lucide-static",
     "build:icons": "node ./scripts/buildIcons.mjs --templateSrc ./packages/lucide/scripts/exportTemplate.mjs",
-    "build:outline-icons": "node ./scripts/outlineSvg.mjs",
+    "build:outline-icons": "pnpm --filter outline-svg start",
     "generate:supersprite": "node ./scripts/generateSuperSVG.mjs",
     "optimize": "node ./scripts/optimizeSvgs.mjs",
     "addtags": "node ./scripts/addMissingKeysToTags.mjs",
-    "generate:changelog": "node ./scripts/generateChangelog.mjs"
+    "generate:changelog": "node ./scripts/generateChangelog.mjs",
+    "postinstall": "husky install",
+    "lint": "eslint --ext .ts,.js,.mjs ./{packages/lucide,scripts}"
   },
   "devDependencies": {
     "@atomico/rollup-plugin-sizes": "^1.1.4",
-    "@babel/cli": "^7.18.9",
-    "@babel/core": "^7.18.9",
-    "@babel/node": "^7.18.9",
-    "@babel/plugin-transform-runtime": "^7.18.9",
-    "@babel/preset-env": "^7.18.9",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@rollup/plugin-replace": "^2.4.2",
-    "babel-jest": "^26.6.3",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.19.6",
+    "@babel/node": "^7.20.0",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "babel-jest": "^29.2.2",
     "babel-plugin-add-import-extension": "^1.6.0",
-    "core-js": "^3.24.0",
-    "esbuild": "^0.14.51",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-config-prettier": "^2.10.0",
+    "core-js": "^3.26.0",
+    "esbuild": "^0.15.12",
+    "eslint": "^8.26.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^2.7.0",
-    "husky": "^4.3.8",
-    "jest": "^28.1.3",
-    "lint-staged": "^10.5.4",
-    "minimist": "^1.2.6",
-    "node-fetch": "^2.6.7",
-    "prettier": "1.17.1",
-    "rollup": "^2.77.2",
-    "rollup-plugin-license": "^2.8.1",
-    "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-terser": "^5.3.1",
-    "rollup-plugin-visualizer": "^4.2.2",
-    "@rollup/plugin-typescript": "^8.3.4",
+    "eslint-plugin-prettier": "^4.2.1",
+    "husky": "^8.0.1",
+    "jest": "^29.2.2",
+    "lint-staged": "^13.0.3",
+    "minimist": "^1.2.7",
+    "node-fetch": "^3.2.10",
+    "prettier": "2.7.1",
+    "rollup": "^3.2.4",
+    "rollup-plugin-license": "^3.0.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-visualizer": "^5.8.3",
     "svg-outline-stroke": "^1.3.1",
-    "svgo": "^2.8.0",
-    "svgson": "^4.1.0"
+    "svgo": "^3.0.0",
+    "svgson": "^5.2.1"
   },
   "husky": {
     "hooks": {
@@ -62,5 +63,6 @@
   },
   "lint-staged": {
     "icons/*.svg": "node ./scripts/optimizeStagedSvgs.mjs"
-  }
+  },
+  "packageManager": "pnpm@7.14.0"
 }

packages/lucide-angular/README.md

@@ -6,11 +6,13 @@ Implementation of the lucide icon library for angular applications.
 
 ## Installation
 
-``` sh
+```sh
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
@@ -22,12 +24,12 @@ There are three ways for use this library.
 
 After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
 
-``` html
+```html
 <!-- app.component.html -->
 <div id="lucide-icon"></div>
 ```
 
-``` js
+```js
 // app.component.ts
 
 import { Component, OnInit } from '@angular/core';
@@ -39,7 +41,6 @@ import { Activity } from 'lucide-angular/icons';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent implements OnInit {
   ngOnInit(): void {
     const div = document.getElementById('lucide-icon');
@@ -53,11 +54,11 @@ export class AppComponent implements OnInit {
 }
 ```
 
-### Method 2: User __Tag__ with __name__ property
+### 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
+```js
 // app.module.ts
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -67,31 +68,29 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    LucideAngularModule.pick({ AlarmCheck, Edit })  // add all of icons that is imported.
+    LucideAngularModule.pick({ AlarmCheck, Edit }) // add all of icons that is imported.
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
-``` html
+```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
+### 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
+```js
 // app.module.ts
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
@@ -101,27 +100,21 @@ import { AppComponent } from './app.component';
 import { LucideAngularModule } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ })
-  ],
+  declarations: [AppComponent],
+  imports: [BrowserModule, AppRoutingModule, LucideAngularModule.pick({})],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
-``` xml
+```xml
 <!-- app.component.html -->
 <lucide-icon [img]="ico1" class="myicon"></lucide-icon>
 <lucide-icon [img]="ico2" class="myicon"></lucide-icon>
 ```
 
-``` js
+```js
 // app.component.ts
 import { Component } from '@angular/core';
 import { Airplay, Circle } from 'lucide-angular';
@@ -131,7 +124,6 @@ import { Airplay, Circle } from 'lucide-angular';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-
 export class AppComponent {
   ico1 = Airplay;
   ico2 = Circle;
@@ -144,9 +136,9 @@ export class AppComponent {
 
 In `Method 2`: import all icons in `app.module.ts` by:
 
-``` js
+```js
 ...
-import { icons } from 'lucide-angular/icons';
+import { icons } from 'lucide-angular';
 ....
 LucideAngularModule.pick(icons)
 ....

packages/lucide-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-angular",
   "description": "A Lucide icon library package for Angular applications",
-  "version": "0.84.0",
+  "version": "0.100.0",
   "author": "SMAH1",
   "license": "ISC",
   "homepage": "https://lucide.dev",
@@ -11,6 +11,9 @@
     "url": "https://github.com/lucide-icons/lucide.git",
     "directory": "packages/lucide-angular"
   },
+  "publishConfig": {
+    "directory": "dist"
+  },
   "keywords": [
     "Lucide",
     "Angular",
@@ -26,28 +29,27 @@
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtention=.ts --exportFileName=index.ts",
-    "build:ng": "ng build --prod",
+    "build:ng": "ng build  --configuration production",
     "test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
     "test:watch": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "postinstall": "ngcc",
     "version": "pnpm version --git-tag-version=false"
   },
   "dependencies": {
-    "tslib": "^2.3.1"
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.5",
-    "@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",
-    "@types/jasmine": "~3.10.2",
-    "@types/node": "^16.11.7",
+    "@angular-devkit/build-angular": "~14.2.6",
+    "@angular/cli": "~14.2.6",
+    "@angular/common": "~14.2.7",
+    "@angular/compiler": "~14.2.7",
+    "@angular/compiler-cli": "~14.2.7",
+    "@angular/core": "~14.2.7",
+    "@angular/platform-browser": "~14.2.7",
+    "@angular/platform-browser-dynamic": "~14.2.7",
+    "@types/jasmine": "~4.3.0",
+    "@types/node": "^18.11.4",
     "codelyzer": "^6.0.2",
     "jasmine-core": "~3.10.1",
     "jasmine-spec-reporter": "~7.0.0",
@@ -56,13 +58,13 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
-    "ng-packagr": "^11.2.4",
+    "ng-packagr": "^14.2.1",
     "protractor": "~7.0.0",
     "puppeteer": "^8.0.0",
-    "rxjs": "6.5.3",
-    "ts-node": "~10.4.0",
+    "rxjs": "7.5.7",
+    "ts-node": "~10.9.1",
     "tslint": "~6.1.0",
-    "typescript": "~4.1.5",
-    "zone.js": "^0.11.7"
+    "typescript": "~4.8.4",
+    "zone.js": "^0.11.8"
   }
 }

packages/lucide-angular/tsconfig.lib.prod.json

@@ -5,6 +5,7 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "enableIvy": true,
+    "compilationMode": "partial"
   }
 }

packages/lucide-figma/package.json

@@ -13,7 +13,6 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.14",
     "minimist": "^1.2.6",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"

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

@@ -66,3 +66,24 @@ export const getIcons = () => new Promise<LucideIcons>(async (resolve, reject)=>
     }
   }
 });
+
+type EventCallback = (lucideIcons: LucideIcons) => void
+
+export const iconFetchListener = (callback: EventCallback) => {
+  fetchIcons()
+
+  const handleEvent = (event: MessageEvent) => {
+    if (event.type === 'message' && event?.data?.pluginMessage.type === 'cachedIcons') {
+
+      const lucideIcons = event?.data?.pluginMessage?.cachedIcons
+      callback(lucideIcons)
+    }
+  }
+
+  window.addEventListener('message', handleEvent)
+
+  const removeListener = () => {
+    window.removeEventListener('message', handleEvent)
+  }
+  return removeListener
+}

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

@@ -6,9 +6,11 @@
   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/SearchInput/SearchInput.tsx

@@ -6,9 +6,10 @@ interface SearchInputProps extends React.HTMLProps<HTMLDivElement> {
   value: string,
   iconCount: number,
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
+  placeholder: string
 }
 
-function SearchInput({ value, onChange, iconCount, className, ...props }: SearchInputProps) {
+function SearchInput({ value, onChange, placeholder, className, ...props }: SearchInputProps) {
   return (
     <div
       className="search-input"
@@ -20,7 +21,7 @@ function SearchInput({ value, onChange, iconCount, className, ...props }: Search
         type="search"
         value={value}
         onChange={onChange}
-        placeholder={`Search ${iconCount} icons`}
+        placeholder={placeholder}
         className="input__field"
       />
     </div>

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

@@ -0,0 +1,25 @@
+@keyframes load {
+  to {
+    background-position: 200% 0;
+  }
+}
+
+.skeleton {
+  --block: rgba(0, 0, 0, 0.06);
+  --loader: hsl(0 0% 89%);
+
+  background: linear-gradient(
+    -75deg,
+    transparent 40%,
+    var(--loader),
+    transparent 60%
+  ) 0 0 / 200% 100%,
+    var(--block);
+
+  border-radius: calc(var(--padding) * 0.5);
+  animation: load 2s infinite linear;
+  background-attachment: fixed;
+  width: 40px;
+  height: 40px;
+  border-radius: 2px;
+}

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

@@ -0,0 +1,13 @@
+import './Skeleton.scss'
+
+const Skeleton = () => {
+  return (
+    <>
+      {Array.from({length: 48 }, () => (
+        <div className="skeleton"/>
+      ))}
+    </>
+  )
+}
+
+export default Skeleton

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

@@ -6,7 +6,7 @@ type Views = typeof views
 
 import useSearch, { Icon } from '../hooks/useSearch'
 
-import { getIcons } from '../api/fetchIcons'
+import { getIcons, iconFetchListener, LucideIcons } from '../api/fetchIcons'
 import './interface.scss'
 import Menu from '../components/Menu'
 
@@ -19,21 +19,19 @@ function App() {
 
   const searchResults = useMemo(() => useSearch(icons, tags, query), [icons, query])
 
-  const getLatestIcons = async () => {
-    const lucideIcons = await getIcons()
+  const handleFetchResponse = async (lucideIcons: LucideIcons) => {
+    const icons = Object.entries(lucideIcons.iconNodes)
 
-    setIcons(Object.entries(lucideIcons.iconNodes))
+    setIcons(icons)
     setTags(lucideIcons.tags)
     setVersion(lucideIcons.version)
   }
 
   useEffect(() => {
-    getLatestIcons()
-  }, [])
+    const removeListener = iconFetchListener(handleFetchResponse)
 
-  if(!icons.length) {
-    return null
-  }
+    return removeListener
+  }, [])
 
   const View = views?.[page as keyof Views] ?? views.icons
 

packages/lucide-figma/src/views/Icons.tsx

@@ -2,6 +2,7 @@ import IconButton from '../components/IconButton'
 import SearchInput from '../components/SearchInput'
 import createIconComponent from '../helpers/createIconComponent'
 import { Icon } from '../hooks/useSearch'
+import Skeleton from '../components/Skeleton/Skeleton'
 
 interface PageProps {
   query: string
@@ -24,16 +25,22 @@ const Icons = ({
         value={query}
         iconCount={icons.length}
         onChange={(event)  => setQuery(event.target.value)}
+        placeholder={icons.length ? `Search ${icons.length} icons`: 'Loading icons ..'}
       />
         <main>
           <div className='icon-grid'>
-            {searchResults.map(([name, iconNode] :any) => (
-              <IconButton
-                name={name}
-                key={name}
-                component={createIconComponent(name, iconNode)}
-              />
-            ))}
+            {icons.length ? (
+              searchResults.map(([name, iconNode]: any) => (
+                <IconButton
+                  name={name}
+                  key={name}
+                  component={createIconComponent(name, iconNode)}
+                />
+              ))
+            ) : (
+              <Skeleton />
+            )}
+
           </div>
           <footer>
             <a

packages/lucide-flutter/pubspec.yaml

@@ -1,6 +1,6 @@
 name: lucide_icons
 description: A Lucide icon library package for Flutter applications. Fork of Feather Icons, open for anyone to contribute icons.
-version: 0.86.0
+version: 0.100.0
 homepage: https://lucide.dev
 repository: https://github.com/lucide-icons/lucide
 

packages/lucide-preact/README.md

@@ -8,28 +8,30 @@ Implementation of the lucide icon library for preact applications.
 
 ```sh
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
 ## How to use
 
-It's build with ESmodules so it's completely threeshakable.
+It's build with ESmodules so it's completely tree-shakable.
 Each icon can be imported as a preact component.
 
 ### Example
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-preact';
 // Returns PreactComponent
 
 // Usage
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -37,20 +39,20 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| 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
+```js
 // Usage
 const App = () => {
-  return <Camera fill="red" stroke-linejoin="bevel"/>
+  return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
@@ -60,17 +62,17 @@ const App = () => {
 
 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.
+> :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
+```js
 import * as icons from 'lucide-preact';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

packages/lucide-preact/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-preact",
   "description": "A Lucide icon library package for Preact applications",
-  "version": "0.84.0",
+  "version": "0.100.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -17,16 +17,18 @@
   "module": "dist/esm/lucide-preact.js",
   "unpkg": "dist/umd/lucide-preact.min.js",
   "typings": "dist/lucide-preact.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "sideEffects": false,
   "scripts": {
-    "build": "pnpm clean && pnpm copy:license && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
     "build:es": "babel src -d dist/esm",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "jest",
     "version": "pnpm version --git-tag-version=false"
   },

packages/lucide-preact/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
-import pkg from './package.json';
+import plugins from '../../rollup.plugins.mjs';
+import pkg from './package.json' assert { type: "json" };
 
 const packageName = 'LucidePreact';
 const outputFileName = 'lucide-preact';

packages/lucide-preact/scripts/buildTypes.mjs

@@ -21,6 +21,7 @@ interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
   ref?: string | ((component: any) => any) | RefObject<any>;
   color?: string
   size?: string | number
+  strokeWidth?: string | number
 }
 
 // Generated icons

packages/lucide-react-native/README.md

@@ -6,30 +6,32 @@ Implementation of the lucide icon library for React Native applications.
 
 ## Installation
 
-First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install the package:
+First, ensure that you have`react-native-svg@^12.0.0` or `react-native-svg@^13.0.0` installed. Then, install the package:
 
 ```sh
 yarn add lucide-react-native
+```
 
-# or
+or
 
+```sh
 npm install lucide-react-native
 ```
 
 ## How to use
 
-It's built with ES modules so it's completely threeshakable.
+It's built with ES modules so it's completely tree-shakable.
 Each icon can be imported as a react component.
 
 ### Example
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-react-native';
 
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -37,19 +39,19 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| 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
+```js
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```
 
@@ -59,13 +61,13 @@ It is possible to create a generic icon component to load icons.
 
 > :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
 
-``` js
+```js
 import * as icons from 'lucide-react-native';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

packages/lucide-react-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react-native",
   "description": "A Lucide icon library package for React Native applications",
-  "version": "0.48.0-alpha.5",
+  "version": "0.100.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -19,31 +19,33 @@
   "typings": "dist/lucide-react-native.d.ts",
   "react-native": "dist/esm/lucide-react-native.js",
   "sideEffects": false,
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:types",
     "copy:license": "cp ../../LICENSE ./LICENSE",
     "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "jest",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/react": "^13.4.0",
     "babel-preset-react-app": "^10.0.0",
     "jest": "^26.6.3",
     "prop-types": "^15.7.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-native": "^0.69.0",
-    "react-native-svg": "^12.0.0"
+    "react-native-svg": "^13.0.0"
   },
   "peerDependencies": {
     "prop-types": "^15.7.2",
     "react": "^16.5.1 || ^17.0.0 || ^18.0.0",
-    "react-native": ">=0.50.0",
-    "react-native-svg": "^12.0.0"
+    "react-native": "*",
+    "react-native-svg": "^12.0.0 || ^13.0.0"
   }
 }

packages/lucide-react-native/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
-import pkg from './package.json';
+import plugins from '../../rollup.plugins.mjs';
+import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucideReact';
 const outputFileName = 'lucide-react-native';

packages/lucide-react/README.md

@@ -8,26 +8,28 @@ Implementation of the lucide icon library for react applications.
 
 ```sh
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
 ## How to use
 
-It's built with ES modules so it's completely threeshakable.
+It's built with ES modules so it's completely tree-shakable.
 Each icon can be imported as a react component.
 
 ### Example
 
 You can pass additional props to adjust the icon.
 
-``` js
+```js
 import { Camera } from 'lucide-react';
 
 const App = () => {
-  return <Camera color="red" size={48}/>
+  return <Camera color="red" size={48} />;
 };
 
 export default App;
@@ -35,19 +37,19 @@ export default App;
 
 ### Props
 
-|  name        |   type   |  default
-| ------------ | -------- | --------
-| `size`       | *Number* | 24
-| `color`      | *String* | currentColor
-| `strokeWidth`| *Number* | 2
+| 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
+```js
 const App = () => {
-  return <Camera fill="red"/>
+  return <Camera fill="red" />;
 };
 ```
 
@@ -57,13 +59,13 @@ It is possible to create a generic icon component to load icons.
 
 > :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
 
-``` js
+```js
 import * as icons from 'lucide-react';
 
-const Icon = ({name, color, size}) => {
+const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
 
-  return <LucideIcon color={color} size={size} />
+  return <LucideIcon color={color} size={size} />;
 };
 
 export default Icon;

packages/lucide-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lucide-react",
   "description": "A Lucide icon library package for React applications",
-  "version": "0.84.0",
+  "version": "0.100.0",
   "license": "ISC",
   "homepage": "https://lucide.dev",
   "bugs": "https://github.com/lucide-icons/lucide/issues",
@@ -18,7 +18,9 @@
   "unpkg": "dist/umd/lucide-react.min.js",
   "typings": "dist/lucide-react.d.ts",
   "sideEffects": false,
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
     "copy:license": "cp ../../LICENSE ./LICENSE",
@@ -26,7 +28,7 @@
     "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
     "build:es": "babel src -d dist/esm",
     "build:types": "node ./scripts/buildTypes.mjs",
-    "build:bundles": "rollup -c ./rollup.config.js",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
     "test": "jest",
     "version": "pnpm version --git-tag-version=false"
   },

packages/lucide-react/rollup.config.mjs

@@ -1,5 +1,5 @@
-import plugins from '../../rollup.plugins';
-import pkg from './package.json';
+import plugins from '../../rollup.plugins.mjs';
+import pkg from './package.json' assert { type: 'json' };
 
 const packageName = 'LucideReact';
 const outputFileName = 'lucide-react';

packages/lucide-solid/README.md

@@ -0,0 +1,80 @@
+# Lucide Solid
+
+Implementation of the lucide icon library for solid applications.
+
+> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
+
+## Installation
+
+```sh
+yarn add lucide-solid
+```
+
+or
+
+```sh
+npm install lucide-solid
+```
+
+## How to use
+
+It's build with ESmodules so it's completely tree-shakable.
+Each icon can be imported as a solid component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+```js
+import { Camera } from 'lucide-solid';
+// Returns SolidComponent
+
+// 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" />;
+};
+```
+
+### 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
+
+```tsx
+import * as icons from 'lucide-solid';
+import type { LucideProps } from 'lucide-solid';
+import { splitProps } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+
+const Icon = (props: { name: keyof typeof icons } & LucideProps) => {
+  const [local, others] = splitProps(props, ["name"]);
+
+  return <Dynamic component={icons[local.name]} {...others} />
+};
+
+export default Icon;
+```

packages/lucide-solid/babel.config.js

@@ -0,0 +1,6 @@
+const mainConfig = require('../../babel.config');
+
+module.exports = {
+  presets: ['solid'],
+  env: mainConfig.env,
+};

packages/lucide-solid/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "lucide-solid",
+  "description": "A Lucide icon library package for Solid applications",
+  "version": "0.88.0-beta.3",
+  "license": "ISC",
+  "homepage": "https://lucide.dev",
+  "bugs": "https://github.com/lucide-icons/lucide/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lucide-icons/lucide.git",
+    "directory": "packages/lucide-solid"
+  },
+  "author": "Eric Fennis",
+  "amdName": "lucide-solid",
+  "main": "dist/cjs/lucide-solid.js",
+  "main:umd": "dist/umd/lucide-solid.js",
+  "module": "dist/esm/lucide-solid.js",
+  "unpkg": "dist/umd/lucide-solid.min.js",
+  "typings": "dist/lucide-solid.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:es && pnpm build:types && pnpm build:bundles",
+    "copy:license": "cp ../../LICENSE ./LICENSE",
+    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
+    "build:icons": "node ../../scripts/buildIcons.mjs --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey",
+    "build:es": "babel src -d dist/esm",
+    "build:types": "node ./scripts/buildTypes.mjs",
+    "build:bundles": "rollup -c ./rollup.config.mjs",
+    "test:jest": "jest",
+    "test": "vitest",
+    "version": "pnpm version --git-tag-version=false"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "babel-preset-solid": "^1.5.4",
+    "jest": "^26.6.3",
+    "jsdom": "^20.0.0",
+    "solid-js": "^1.4.7",
+    "solid-testing-library": "^0.3.0",
+    "solid-jest": "^0.2.0",
+    "vite": "^2.6.4",
+    "vite-plugin-solid": "^2.3.0",
+    "vitest": "^0.23.2"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.4.7"
+  }
+}

packages/lucide-solid/rollup.config.mjs

@@ -0,0 +1,47 @@
+import plugins from '../../rollup.plugins.mjs';
+import pkg from './package.json' assert { type: 'json' };
+
+const packageName = 'LucideSolid';
+const outputFileName = 'lucide-solid';
+const outputDir = 'dist';
+const inputs = [`src/lucide-solid.js`];
+const bundles = [
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+    minify: true,
+  },
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'cjs',
+    inputs,
+    outputDir,
+  },
+];
+
+const configs = bundles
+  .map(({ inputs, outputDir, format, minify }) =>
+    inputs.map(input => ({
+      input,
+      plugins: plugins(pkg, minify),
+      external: ['solid-js', 'solid-js/h'],
+      output: {
+        name: packageName,
+        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        format,
+        sourcemap: true,
+        globals: {
+          'solid-js': 'solid-js',
+          'solid-js/h': 'solid-js/h',
+        },
+      },
+    })),
+  )
+  .flat();
+
+export default configs;

packages/lucide-solid/scripts/buildTypes.mjs

@@ -0,0 +1,47 @@
+import path from 'path';
+import {
+  writeFile,
+  readSvgDirectory,
+  resetFile,
+  toPascalCase,
+  appendFile,
+  getCurrentDirPath
+} from '../../../scripts/helpers.mjs';
+
+const currentDir = getCurrentDirPath(import.meta.url)
+const srcDirectory = path.join(currentDir, '../dist');
+
+// Declare type definitions
+const typeDefinitions = `\
+/// <reference types="solid-js" />
+import { JSX } from 'solid-js'
+
+interface LucideProps extends Partial<JSX.IntrinsicElements & JSX.SvgSVGAttributes<SVGSVGElement>> {
+  key?: string | number;
+  ref?: string | ((component: any) => any);
+  color?: string
+  size?: string | number
+  strokeWidth?: string | number
+  class?: string
+}
+
+// Generated icons
+`;
+
+const ICONS_DIR = path.resolve(currentDir, '../../../icons');
+const TYPES_FILE = 'lucide-solid.d.ts';
+
+resetFile(TYPES_FILE, srcDirectory);
+writeFile(typeDefinitions, TYPES_FILE, srcDirectory);
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+svgFiles.forEach(svgFile => {
+  const iconName = path.basename(svgFile, '.svg');
+  const componentName = toPascalCase(iconName);
+
+  const exportTypeString = `export declare const ${componentName}: (props: LucideProps) => JSX.Element;\n`;
+  appendFile(exportTypeString, TYPES_FILE, srcDirectory);
+});
+
+console.log(`Generated ${TYPES_FILE} file with`, svgFiles.length, 'icons');

packages/lucide-solid/scripts/exportTemplate.mjs

@@ -0,0 +1,7 @@
+export default ({ componentName, children }) => `
+import createSolidComponent from '../createSolidComponent';
+
+const ${componentName} = createSolidComponent('${componentName}', ${JSON.stringify(children)});
+
+export default ${componentName};
+`;