Add workflow icon (#1132)

* Add `workflow` icon

* Update icons/workflow.svg

Co-authored-by: Jakob Guddas <github@jguddas.de>

---------

Co-authored-by: Jakob Guddas <github@jguddas.de>

.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,27 @@ 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: 'latest',
+    sourceType: 'module',
+  },
 };

.github/PULL_REQUEST_TEMPLATE/new-icon.md

@@ -5,11 +5,11 @@ labels: "🎨 <icon"
 ---
 
 <!-- Thanks for submitting an icon! Please make sure you read the icon design guide
-at https://github.com/lucide-icons/lucide/blob/main/docs/ICON_DESIGN_GUIDE.md beforehand,
+at https://github.com/lucide-icons/lucide/blob/main/docs/icon-design-guide.md beforehand,
 and please fill everything below. -->
 
 - **Name of the icon** : <!-- `icon` -->
-- **Tags (alternative names for this icon)** (add them in tags.json) :  
+- **Tags (alternative names for this icon)** (add them in as a separate json file using the same icon name) :
 - **What is the purpose of this icon?** : <!-- Shows that one can click it to... / Is used to denote or label... -->
 - **100% scale preview** : <!-- upload an image -->
-- **Have you considered alternative possibilities** for its naming or design? : 
+- **Have you considered alternative possibilities** for its naming or design? :

.github/actions/build-and-test.yml

@@ -0,0 +1,44 @@
+name: "Build and Test"
+description: "Builds and test a package"
+
+inputs:
+  name:
+    description: “Name of the package”
+    required: true
+
+runs:
+  using: "composite"
+  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 }}-lucide-preact-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-lucide-preact-pnpm-store-
+
+    - name: Install dependencies
+      run: pnpm install --filter lucide-preact
+
+    - name: Build
+      run: pnpm --filter lucide-preact build
+
+    - name: Test
+      run: pnpm --filter lucide-preact test

.github/actions/check-icons.yml

@@ -0,0 +1,41 @@
+name: "Check icons"
+description: "Cross-checks icon and category references in JSON descriptors"
+
+inputs:
+  name:
+    description: “Name of the package”
+    required: true
+
+runs:
+  using: "composite"
+  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 }}-lucide-preact-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-lucide-preact-pnpm-store-
+
+    - name: Install dependencies
+      run: pnpm install --filter .
+
+    - name: Check icons and categories
+      run: pnpm checkIcons

.github/workflows/ci.yml

@@ -5,7 +5,7 @@ on:
     branches:
       - main
     paths:
-      - icons/**
+      - icons/**/*.svg
 
 jobs:
   create-release:
@@ -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,14 @@ on:
   pull_request:
     paths:
       - packages/lucide-angular/**
-  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 +43,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-angular test
-

.github/workflows/lucide-font.yml

@@ -0,0 +1,55 @@
+name: Lucide font checks
+
+on:
+  pull_request:
+    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,14 @@ on:
   pull_request:
     paths:
       - packages/lucide-preact/**
-  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 +43,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-preact test
-

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

@@ -4,16 +4,14 @@ on:
   pull_request:
     paths:
       - packages/lucide-react-native/**
-  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 +43,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-react-native test
-

.github/workflows/lucide-react.yml

@@ -4,16 +4,14 @@ on:
   pull_request:
     paths:
       - packages/lucide-react/**
-  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 +43,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-react test
-

.github/workflows/lucide-solid.yml

@@ -0,0 +1,45 @@
+name: Lucide Solid Checks
+
+on:
+  pull_request:
+    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,14 @@ on:
   pull_request:
     paths:
       - packages/lucide-static/**
-  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 +40,3 @@ jobs:
 
       - name: Build
         run: pnpm --filter lucide-static build
-

.github/workflows/lucide-svelte.yml

@@ -4,16 +4,14 @@ on:
   pull_request:
     paths:
       - packages/lucide-svelte/**
-  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 +43,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-svelte test
-

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

@@ -4,16 +4,14 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue-next/**
-  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 +43,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-vue-next test
-

.github/workflows/lucide-vue.yml

@@ -4,16 +4,14 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue/**
-  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 +43,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide-vue test
-

.github/workflows/lucide.yml

@@ -4,16 +4,14 @@ on:
   pull_request:
     paths:
       - packages/lucide/**
-  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 +43,3 @@ jobs:
 
       - name: Test
         run: pnpm --filter lucide test
-

.github/workflows/pull-request.yml

@@ -0,0 +1,57 @@
+name: Add Changed Icons comment
+
+on:
+  pull_request_target:
+    paths:
+      - 'icons/*.svg'
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  add-changed-icons-comment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+          ref: refs/pull/${{ github.event.pull_request.number }}/merge
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v35
+        with:
+          files: icons/*.svg
+      - name: Generate comment
+        id: generate-comment
+        run: |
+          delimiter="$(openssl rand -hex 8)"
+          echo "body<<$delimiter" >> $GITHUB_OUTPUT
+          for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
+            cat "$file" | # get file content
+            tr '\n' ' ' | # remove line breaks
+            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
+            base64 -w 0 | # encode svg
+            sed "s|.*|<img width=\"400\" title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/$(basename ${file//\.svg/})/&.svg\"/> |"
+          done | tr '\n' ' ' >> $GITHUB_OUTPUT
+          echo >> $GITHUB_OUTPUT
+          echo "$delimiter" >> $GITHUB_OUTPUT
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        id: fc
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: Added or changed icons
+      - name: Create or update comment
+        uses: peter-evans/create-or-update-comment@v2
+        with:
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            ### Added or changed icons
+            <details>
+            <summary>Icon X-rays</summary>
+            ${{ steps.generate-comment.outputs.body }}
+            </details>
+          edit-mode: replace

.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,11 @@ stash
 coverage
 stats
 *.log
+outlined
 packages/**/src/icons/*.js
 packages/**/src/icons/*.ts
+packages/**/src/icons/*.tsx
+packages/**/src/aliases.ts
 packages/**/LICENSE
+categories.json
+tags.json

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint-staged
+pnpm checkIcons

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "cSpell.words": [
+    "devs",
+    "preact",
+    "Preact"
+  ]
+}

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
@@ -25,28 +25,21 @@ Guidelines for pull requests:
 
 Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide.
 
-Read it here: [ICON_GUIDELINES](docs/ICON_DESIGN_GUIDE.md).
+Read it here: [ICON_GUIDELINES](/docs/icon-design-guide.md).
 
-### Templates
+### Editor guides
 
-Here you can find templates and instructions on how to implement the guidelines with different programs.
+Here you can find instructions on how to implement the guidelines with different vector graphics editors:
 
-#### Adobe Illustrator
+#### [Adobe Illustrator Guide](/docs/illustrator-guide.md)
 
-`Template`: You can find a template for Adobe Illustrator under `/docs/templates/illustrator-template.ai`.
-`Instructions`: You can find the [Illustrator Guide](/docs/ILLUSTRATOR_GUIDE.md) and how to work with the template in `/docs/ILLUSTRATOR_GUIDE.md`.
+You can also [download an Adobe Illustrator template](/docs/templates/illustrator-template.ai).
 
-#### Inkscape
+#### [Inkscape Guide](/docs/inkscape-guide.md)
 
-`Template`: None
-`Instructions`: You can find the [Inkscape Guide](/docs/INKSCAPE_GUIDE.md) and how to set up Inkscape under `/docs/INKSCAPE_GUIDE.md`.
+#### [Figma Guide](/docs/figma-guide.md)
 
-#### Figma
-
-`Template`: None
-`Instructions`: You can find the [Figma Guide](/docs/FIGMA_GUIDE.md) and how to set up Figma under `/docs/FIGMA_GUIDE.md`.
-
-#### Submitting Multiple Icons
+### Submitting Multiple Icons
 
 If you want submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keep the thread clean and scoped.
 So don't submit multiple icons in one PR that have noting to do with each other.
@@ -65,14 +58,14 @@ 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)
-For packagemanagement you will need [yarn v1](https://yarnpkg.com/getting-started/install).
+You will need minimum version of [Nodejs 16.4+](https://nodejs.org)
+For package management you will need [PNPM](https://pnpm.io/installation).
 For flutter package development, you need [Flutter 1.17+](https://docs.flutter.dev/get-started/install).
 
 After cloning the project you need to run:
 
 ```sh
-yarn # Install dependencies, including the workspace packages
+pnpm install # Install dependencies, including the workspace packages
 ```
 
 ### Packages -> PNPM Workspaces
@@ -80,6 +73,7 @@ yarn # Install dependencies, including the workspace packages
 To distribute different packages we use PNPM workspaces. Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces).
 
 The configured directory for workspaces is the [packages](./packages) directory, located in the root directory. There you will find all the current packages from lucide.
+There are more workspaces defined, see [`pnpm-workspace.yaml`](./pnpm-workspace.yaml).
 
 > Note: One package is not managed by pnpm:  **lucide-flutter**, this package is written in Dart and used pub for publishing.
 

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,34 @@ 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)
+  - [Eleventy](#eleventy)
+- [Contributing](#contributing)
+- [Community](#community)
+- [License](#license)
+- [Credits](#credits)
+- [Sponsors](#sponsors)
 
 ## Usage
 
@@ -55,9 +59,11 @@ Implementation of the lucide icon library for web applications.
 
 ```sh
 npm install lucide
+```
 
-#or
+or
 
+```sh
 yarn add lucide
 ```
 
@@ -69,9 +75,11 @@ Implementation of the lucide icon library for react applications.
 
 ```sh
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
@@ -83,13 +91,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 +107,11 @@ Implementation of the lucide icon library for vue applications.
 
 ```sh
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
@@ -111,9 +123,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 +137,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 +153,11 @@ Implementation of the lucide icon library for preact applications.
 
 ```sh
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
@@ -156,9 +174,11 @@ NPM package
 
 ```sh
 yarn add lucide-static
+```
 
-# or
+or
 
+```sh
 npm install lucide-static
 ```
 
@@ -190,6 +210,58 @@ 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).
+
+### Eleventy
+
+Using this plugin, Eleventy projects can incorporate Lucide icons. it makes it simple to use Lucide icons into your themes via shortcodes, improving your website's overall usability and visual appeal.
+
+```sh
+npm install @grimlink/eleventy-plugin-lucide-icons
+```
+
+For more details, see the [documentation](https://github.com/GrimLink/eleventy-plugin-lucide-icons/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 +288,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>
-

babel.config.js

@@ -1,20 +0,0 @@
-module.exports = {
-  presets: ['@babel/env'],
-  // babelrcRoots: ['.', './packages/*'],
-  env: {
-    test: {
-      presets: ['@babel/env'],
-      plugins: ['@babel/plugin-transform-runtime'],
-    },
-    dev: {
-      plugins: [
-        [
-          'transform-inline-environment-variables',
-          {
-            include: ['NODE_ENV'],
-          },
-        ],
-      ],
-    },
-  },
-};

categories.json

@@ -1,19 +0,0 @@
-{
-  "arrows": [],
-  "brands": [],
-  "code": [],
-  "connectivity": ["airplay"],
-  "cursors": [],
-  "development": [],
-  "devices": ["alarm-clock"],
-  "file-system": [],
-  "layout": [],
-  "maths": ["activity"],
-  "multimedia": [],
-  "notifications": ["alert-circle", "alert-octagon", "alert-triangle"],
-  "nature": [],
-  "shopping": [],
-  "shapes": [],
-  "sports": [],
-  "text-edit": ["align-center","align-right","align-left","align-justify" ]
-}

categories/accessibility.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Accessibility",
+  "icon": "accessibility"
+}

categories/account.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Accounts & access",
+  "icon": "user"
+}

categories/animals.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Animals",
+  "icon": "dog"
+}

categories/arrows.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Arrows",
+  "icon": "arrow-left-right"
+}

categories/brands.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Brands",
+  "icon": "facebook"
+}

categories/buildings.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Buildings",
+  "icon": "building"
+}

categories/charts.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Charts",
+  "icon": "pie-chart"
+}

categories/communication.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Communication",
+  "icon": "message-circle"
+}

categories/connectivity.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Connectivity",
+  "icon": "wifi"
+}

categories/currency.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Currency",
+  "icon": "dollar-sign"
+}

categories/cursors.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Cursors",
+  "icon": "mouse-pointer-2"
+}

categories/design.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Design",
+  "icon": "palette"
+}

categories/development.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Coding & development",
+  "icon": "code-2"
+}

categories/devices.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Devices",
+  "icon": "smartphone"
+}

categories/emoji.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Emoji",
+  "icon": "smile"
+}

categories/files.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "File icons",
+  "icon": "layout"
+}

categories/food-beverage.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Food & beverage",
+  "icon": "coffee"
+}

categories/furniture.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Furniture",
+  "icon": "rocking-chair"
+}

categories/gaming.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Gaming",
+  "icon": "gamepad-2"
+}

categories/home.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Home",
+  "icon": "home"
+}

categories/layout.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Layout",
+  "icon": "layout"
+}

categories/mail.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Mail",
+  "icon": "mail"
+}

categories/maps.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Maps",
+  "icon": "map"
+}

categories/maths.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Maths",
+  "icon": "divide"
+}

categories/medical.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Medical",
+  "icon": "heart"
+}

categories/money.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Money",
+  "icon": "piggy-bank"
+}

categories/multimedia.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Multimedia",
+  "icon": "play-circle"
+}

categories/nature.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Nature",
+  "icon": "sprout"
+}

categories/navigation.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Navigation",
+  "icon": "compass"
+}

categories/notifications.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Notifications",
+  "icon": "alert-triangle"
+}

categories/people.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "People",
+  "icon": "person-standing"
+}

categories/photography.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Photography",
+  "icon": "camera"
+}

categories/science.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Science",
+  "icon": "flask-conical"
+}

categories/seasons.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Seasons",
+  "icon": "leaf"
+}

categories/security.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Security",
+  "icon": "shield"
+}

categories/shapes.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Shapes",
+  "icon": "triangle"
+}

categories/shopping.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Shopping",
+  "icon": "shopping-bag"
+}

categories/social.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Social",
+  "icon": "thumbs-up"
+}

categories/sports.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Sports",
+  "icon": "type"
+}

categories/sustainability.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Sustainability",
+  "icon": "recycle"
+}

categories/text.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Text formatting",
+  "icon": "type"
+}

categories/time.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Time & calendar",
+  "icon": "calendar"
+}

categories/tools.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Tools",
+  "icon": "hammer"
+}

categories/transportation.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Transportation",
+  "icon": "train"
+}

categories/travel.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Travel",
+  "icon": "backpack"
+}

categories/weather.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "../category.schema.json",
+  "title": "Weather",
+  "icon": "cloud-sun"
+}

category.schema.json

@@ -0,0 +1,34 @@
+{
+  "$id": "https://lucide.dev/category.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$vocabulary": {
+    "https://json-schema.org/draft/2020-12/vocab/core": true,
+    "https://json-schema.org/draft/2020-12/vocab/applicator": true,
+    "https://json-schema.org/draft/2020-12/vocab/unevaluated": true,
+    "https://json-schema.org/draft/2020-12/vocab/validation": true,
+    "https://json-schema.org/draft/2020-12/vocab/meta-data": true,
+    "https://json-schema.org/draft/2020-12/vocab/format-annotation": true,
+    "https://json-schema.org/draft/2020-12/vocab/content": true
+  },
+  "title": "Lucide Icons category schema",
+  "type": "object",
+  "properties": {
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "icon": {
+      "type": "string"
+    },
+    "weight": {
+      "type": "integer"
+    }
+  },
+  "required": [
+    "title",
+    "icon"
+  ],
+  "description": "A JSON Schema for categories defined by Lucide Icons."
+}

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/figma-guide.md

@@ -16,7 +16,7 @@ To do this, create a frame of 24x24 pixels.
 
 In this newly created frame, you will create your icon. If you want, you can change the name of your frame to the name of the icon you are going to create. Then it will be exported as `FRAME-NAME.svg`.
 
-## Create your icon
+## Create Your icon
 To design your icon in the style of Feather Icons, you need to adjust a few settings in Figma.
 
 Draw in your new frame with the pen tool. You can open it with the window at the top, or with the shortcut `P`. Once you click in your frame, you can adjust the settings for the pen tool in the design-window on the right.
@@ -26,19 +26,26 @@ Set the following:
    1. Corner radius: 2px
 2. Stroke
    1. Stroke width: 2px
-   2. Stroke alignment: center 
+   2. Stroke alignment: center
 
 ![Figma Stroke Options](images/figma-stroke-options.png)
 
-## Export Your Icon
+## Export Or Copy Your Icon
 Once you have completed your icon, you can export it.
 
 1. Select the frame
 2. Open the *Export* tab on the right
 3. Set the file type as SVG
 4. Press export
-   
+
+Or you can also copy its source as SVG.
+
+1. Select the frame
+2. Right click it
+3. Click on *Copy/Paste as*
+4. Click on *Copy as SVG*
+
 That's it. You just made your first icon. Congratulations!
 
 ## Figma Tips
-1. The [Icon Design Guidelines](ICON_DESIGN_GUIDE.md) dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: `⌥` Option (MacOS) or `Alt` (Windows).
+1. The [Icon Design Guidelines](icon-design-guide.md) dictate that you keep 2px spacing between detached elements. In Figma, you can easily check this with: `⌥` Option (MacOS) or `Alt` (Windows).

docs/icon-design-guide.md

@@ -55,6 +55,8 @@ Here are rules that should be followed to keep quality and consistency when maki
 
 Before an icon is added to the library, we like to have readable and optimized svg code.
 
+Never use [`<use>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use). While it may sometimes seem like a good way to optimize file size, there's no way to ensure that the referenced element IDs will be unique once the SVGs are embedded in HTML documents.
+
 ### Global Attributes
 
 For each icon these attributes are applied, corresponding to the above rules.
@@ -80,3 +82,21 @@ For each icon these attributes are applied, corresponding to the above rules.
 Code of paths can get really big.
 To reduce file size we like to minify the code.
 We recommend to use the [SVGOMG](https://jakearchibald.github.io/svgomg/) to minify paths.
+
+### JSON metadata descriptor
+
+Each icon added must also come with a matching JSON file listing tags and categories for the icon.
+Please use the following template:
+
+```json
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "foo",
+    "bar"
+  ],
+  "categories": [
+    "devices"
+  ]
+}
+```

docs/illustrator-guide.md

@@ -10,15 +10,15 @@ This Guide explains how to properly use the Adobe Illustrator Template for Lucid
 
 ## General Workflow
 
-The Illustrator template is created following guidelines from the [Icon Design Guide](ICON_DESIGN_GUIDE.md).
+The Illustrator template is created following guidelines from the [Icon Design Guide](icon-design-guide.md).
 
 **Workflow:**
 
-1. Open the Document which can be found under __*/docs/templates/illustrator_template.ai*__ .
+1. Download and open the [Illustrator template](https://github.com/lucide-icons/lucide/blob/main/docs/templates/illustrator_template.ai).
 
 2. You can now remove the content from the example logo layer ("Draw") and start creating.
 
-3. Verify that you follow the [Icon Design Guidelines](ICON_DESIGN_GUIDE.md).
+3. Verify that you follow the [Icon Design Guidelines](icon-design-guide.md).
 
 4. Before you export the file as an SVG make sure to check that you followed the guidelines and remove all unecessary layers (especially "Padding" and "Grid").
 
@@ -26,6 +26,6 @@ The Illustrator template is created following guidelines from the [Icon Design G
 
 ![SVG export options in Illustrator](images/illustrator-svg-options.png?raw=true "Setting Page Size")
 
-After that, double check that the [code conventions and SVG global attributes](https://github.com/lucide-icons/lucide/blob/main/docs/ICON_DESIGN_GUIDE.md#code-conventions) are correct.
+After that, double check that the [code conventions and SVG global attributes](icon-design-guide.md#code-conventions) are correct.
 
 7. Minify paths with [SVGOMG](https://jakearchibald.github.io/svgomg/).

docs/index.md

@@ -6,18 +6,17 @@ nextPage:
 ---
 
 # Introduction
+Lucide is an open source icon library for displaying icons and symbols in digital and non-digital projects. It consists of 850+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
 
-An open source icon library for displaying icons and symbols in digital and non digital projects. It is containing over 500+ Vector (svg) files. To use these icons, lucide provides several official packages to make it easier to use these icons in projects.
+Lucide contains icons with different variants and states. With that, designers and developers can choose the right icon for themselves. If a desired icon doesn't exist yet, you're free to open a design request. The Lucide community contributors will help to provide new icons.
 
-Lucide contains icons with different variants and states. With that designers and developers can choose the right icon for them selves. If icons don't exist you're free to open design request. The Lucide community will help.
+With more icons, we simply have more icons to work with in our projects. Also with rising of new applications with specific features, lucide has the goal to provide the complete set for your project.
 
-With help of the community, contributors are providing the library of new icons. With more icons, we simply have more icons to work with in your project. Also with rising of new applications with specific features lucide has the goal the provide the complete set for you project.
+When designing new icons, the community is working with a set of design rules. This is to maintain some standards for the icons: recognizable, consistency in style, and readable on all sizes. The community loves creativity in new icons but recognizable design conventions are important.
 
-When designing new icons, the community is working with a set of design rules. This is to keep icons: recognizable, consistency in style, and readable on all sizes. The community likes to have creativity in new icons but conventional design is important to have recognizable icons.
+Beside design, code is also important. Assets like icons in, for example, web projects can increase the bandwidth usage significantly. With the growing internet, lucide has the responsibility to keep their assets as small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you will only ship the icons you used, helps you to keep the software distribution size to a minimum.
 
-Beside design, code is also important. Assets like icons in for example web projects can increase the transferred bytes significantly. With the growing internet, lucide has the responsibility to keep their assets small as possible. To achieve this, lucide uses SVG compression and specific code architecture for tree-shaking abilities. With tree-shaking used you will only ship the icons you used, helps you to keep the software small as possible when distributed.
-
-Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte),[Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
+Lucide provides several official packages for: [Web (Vanilla)](https://lucide.dev/docs/lucide), [React](https://lucide.dev/docs/lucide-react), [React Native](https://lucide.dev/docs/lucide-react-native), [Vue](https://lucide.dev/docs/lucide-vue), [Vue 3](https://lucide.dev/docs/lucide-vue-next), [Svelte](https://lucide.dev/docs/lucide-svelte), [Solid](https://lucide.dev/docs/lucide-solid), [Preact](https://lucide.dev/docs/lucide-preact), [Angular](https://lucide.dev/docs/lucide-angular), [NodeJS](https://lucide.dev/docs/lucide-static#nodejs) and [Flutter](https://lucide.dev/docs/lucide-flutter).
 
 Any questions about lucide? Ask the community. Active on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).
 

docs/installation.md

@@ -10,13 +10,15 @@ Implementation of the lucide icon library for web applications.
 
 ```bash
 npm install lucide
+```
 
-#or
+or
 
+```sh
 yarn add lucide
 ```
 
-For more details, see the [documentation](packages/lucide).
+For more details, see the [documentation](packages/lucide.md).
 
 ## React
 
@@ -24,13 +26,15 @@ Implementation of the lucide icon library for react applications.
 
 ```bash
 yarn add lucide-react
+```
 
-# or
+or
 
+```sh
 npm install lucide-react
 ```
 
-For more details, see the [documentation](packages/lucide-react).
+For more details, see the [documentation](packages/lucide-react.md).
 
 ## Vue 2
 
@@ -38,13 +42,15 @@ Implementation of the lucide icon library for vue applications.
 
 ```bash
 yarn add lucide-vue
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue
 ```
 
-For more details, see the [documentation](packages/lucide-vue).
+For more details, see the [documentation](packages/lucide-vue.md).
 
 ## Vue 3
 
@@ -52,13 +58,15 @@ Implementation of the lucide icon library for vue applications.
 
 ```bash
 yarn add lucide-vue-next
+```
 
-# or
+or
 
+```sh
 npm install lucide-vue-next
 ```
 
-For more details, see the [documentation](packages/lucide-vue-next).
+For more details, see the [documentation](packages/lucide-vue-next.md).
 
 ## Svelte
 
@@ -66,25 +74,29 @@ Implementation of the lucide icon library for vue applications.
 
 ```bash
 yarn add lucide-svelte
+```
 
-# or
+or
 
+```sh
 npm install lucide-svelte
 ```
 
-For more details, see the [documentation](packages/lucide-svelte).
+For more details, see the [documentation](packages/lucide-svelte.md).
 
 ## Angular
 
 ```bash
 yarn add lucide-angular
+```
 
-# or
+or
 
+```sh
 npm install lucide-angular
 ```
 
-For more details, see the [documentation](packages/lucide-angular).
+For more details, see the [documentation](packages/lucide-angular.md).
 
 ## Preact
 
@@ -92,13 +104,15 @@ Implementation of the lucide icon library for preact applications.
 
 ```bash
 yarn add lucide-preact
+```
 
-# or
+or
 
+```sh
 npm install lucide-preact
 ```
 
-For more details, see the [documentation](packages/lucide-preact).
+For more details, see the [documentation](packages/lucide-preact.md).
 
 ## Figma
 
@@ -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

@@ -1,164 +1,109 @@
 # Lucide Angular
 
-Implementation of the lucide icon library for angular applications.
+Implementation of the lucide icon library for Angular applications.
 
 ## Installation
 
-``` sh
+```bash
 yarn add lucide-angular
+```
 
-# or
+or
 
+```bash
 npm install lucide-angular
 ```
 
 ## How to use
 
-There are three ways for use this library.
+### Step 1: Import `LucideAngularModule`
 
-### Method 1: createElement
+In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use:
 
-After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
-
-``` html
-<!-- app.component.html -->
-<div id="lucide-icon"></div>
-```
-
-``` js
-// app.component.ts
-
-import { Component, OnInit } from '@angular/core';
-import { createElement } from 'lucide-angular';
-import { Activity } from 'lucide-angular/icons';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-
-export class AppComponent implements OnInit {
-  ngOnInit(): void {
-    const div = document.getElementById('lucide-icon');
-    const elm = createElement(Activity);
-    elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
-
-    if (div) {
-      div.appendChild(elm);
-    }
-  }
-}
-```
-
-### Method 2: User __Tag__ with __name__ property
-
-After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
-
-``` js
-// app.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
+```js
+import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
   imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ AlarmCheck, Edit })  // add all of icons that is imported.
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+    LucideAngularModule.pick({File, Home, Menu, UserCheck})
+  ]
 })
-
 export class AppModule { }
 ```
 
-``` html
-<!-- app.component.html -->
-<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
-<lucide-icon name="edit" class="myicon"></lucide-icon>
+### Step 2: Use the icons in templates
+
+Within your templates you may now use one of the following component tags to insert an icon:
+
+```html
+<lucide-angular name="file" class="my-icon"></lucide-angular>
+<lucide-icon name="home" class="my-icon"></lucide-icon>
+<i-lucide name="menu" class="my-icon"></i-lucide>
+<span-lucide name="user-check" class="my-icon"></span-lucide>
 ```
 
-### Method 3: User __Tag__ with __img__ property
+### Props
 
-After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
+You can pass additional props to adjust the icon appearance.
 
-``` js
-// app.module.ts
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+| name                  | type      | default      |
+| --------------------- | --------- | ------------ |
+| `size`                | *number*  | 24           |
+| `color`               | *string*  | currentColor |
+| `strokeWidth`         | *number*  | 2            |
+| `absoluteStrokeWidth` | *boolean* | false        |
 
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { LucideAngularModule } from 'lucide-angular';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    LucideAngularModule.pick({ })
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-
-export class AppModule { }
+```html
+<i-lucide name="home" [size]="48" color="red" [strokeWidth]="1"></i-lucide>
 ```
 
-``` xml
-<!-- app.component.html -->
-<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
-<lucide-icon [img]="ico2" class="myicon"></lucide-icon>
-```
+### Global configuration
 
-``` js
-// app.component.ts
-import { Component } from '@angular/core';
-import { Airplay, Circle } from 'lucide-angular';
+You can inject the `LucideIconConfig` service in your root component to globally configure the default property values as defined above.
 
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
+### Styling using a custom CSS class
 
-export class AppComponent {
-  ico1 = Airplay;
-  ico2 = Circle;
+Any extra HTML attribute is ignored, but the `class` attribute
+is passed onto the internal SVG image element and it can be used to style it:
+
+```css
+svg.my-icon {
+    width: 12px;
+    height: 12px;
+    stroke-width: 3;
 }
 ```
 
-## Notes
+## Injecting multiple icon providers
 
-### Import all icons
+You may provide additional icons using the `LUCIDE_ICONS` injection token,
+which accepts multiple providers of the interface `LucideIconsProviderInterface`
+with the utility class `LucideIconsProvider` available for easier usage:
 
-In `Method 2`: import all icons in `app.module.ts` by:
+```js
+import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
+import { MyIcon } from './icons/my-icon';
 
-``` js
+const myIcons = {MyIcon};
 
-import { icons } from 'lucide-angular/icons';
+@NgModule({
+  providers: [
+    {provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)},
+  ]
+})
+export class AppModule { }
+```
 
-LucideAngularModule.pick(icons)
+To add custom icons, you will first need to convert them to an [svgson format](https://github.com/elrumordelaluz/svgson).
+
+## Loading all icons
+
+> :warning: You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.
+
+```js
+import { icons } from 'lucide-angular';
 
 ...
+
+LucideAngularModule.pick(icons)
 ```
-
-### Tags
-
-You can use the following tags instead of `lucide-icon`:
-
-- lucide-angular
-- i-lucide
-- span-lucide
-
-All of the above are the same

docs/packages/lucide-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,21 @@ 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            |
+| `absoluteStrokeWidth` | *boolean* | false        |
 
 ### 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 +65,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
@@ -37,11 +39,12 @@ 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            |
+| `absoluteStrokeWidth` | *boolean* | false        |
 
 ### Custom props
 

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,21 @@ 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            |
+| `absoluteStrokeWidth` | *boolean* | false        |
 
 ### 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 +59,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-solid.md

@@ -0,0 +1,79 @@
+# Lucide Solid
+
+Implementation of the lucide icon library for solid applications.
+
+## 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            |
+| `absoluteStrokeWidth` | *boolean* | false        |
+
+### 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;
+```

docs/packages/lucide-static.md

@@ -2,16 +2,16 @@
 
 This package include the following lucide implementations:
 
-- All svg files
-- Javascript library containing strings of svgs.
+- All SVG files
+- SVG sprite
 - Icon fonts
-- Svg sprite
+- JavaScript library containing strings of SVGs.
 
 ## Why lucide-static?
 
-This package is suitable for very specific use cases for example if you want to use icon fonts, svg sprites, normal svgs or Common.js Svg strings in your javascript project.
+This package is suitable for specific use cases, for example if you want to use icon fonts, SVG sprites, normal SVGs or Common.js SVG strings in your javascript project.
 
-> ⚠️ It is not recommended to use this package for svg sprites or icon fonts for web pages/applications, for prototyping it is ok. We recommend to bundlers for web applications to make sure you only bundle the used icons from this icon library (Treeshaking). Otherwise it will load all the icons, making you webpage loading slower. Threeshaking is only available in the packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
+> ⚠️ While they can be useful for prototyping, it is not recommended to use the SVG sprites or icon fonts provided by this package in production web apps as all the available icons are included in the app, hence increasing loading time and data usage. We recommend to use a bundler and treeshaking to make sure only the icons you use are bundled with your app. Threeshaking is only available in these packages: [lucide](lucide), [lucide-react](lucide-react), [lucide-vue](lucide-vue), [lucide-vue-next](lucide-vue-next), [lucide-angular](lucide-angular), [lucide-preact](lucide-preact)
 
 ## Installation
 
@@ -19,59 +19,61 @@ 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
-<!-- Svg File -->
-<img src="https://unpkg.com/lucide-static@latest/icons/home.svg">
+```html
+<!-- SVG file for a single icon -->
+<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" />
 
-<!-- Icon Font -->
+<!-- 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>
 ```
 
 ## Usage
 
-Checkout the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).
+Check out the [codesandbox examples](https://codesandbox.io/s/using-the-svg-sprite-lz1kk).
 
 ### SVG Files
 
-#### Svg file as image
+#### SVG file as image
 
 To use it in for example html:
 
-``` html
-<!-- Svg File -->
-<img src="~lucide-static/icons/home.svg">
+```html
+<!-- SVG file for a single icon -->
+<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);
 }
 ```
 
 Make sure you have the correct webpack loaders to make this work. [url-loader](https://v4.webpack.js.org/loaders/url-loader/)
 
-#### Svg file Inline
+#### SVG file as string
 
-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/).
+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
+// return string of an SVG
 ```
 
 ### SVG Sprite
@@ -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,17 +106,17 @@ 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;
 }
 ```
 
-and update the svg as follows
+and update the SVG as follows
 
 ```svg
 <svg
@@ -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,14 @@ 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            |
+| `absoluteStrokeWidth` | *boolean* | false        |
+| `*<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 +57,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 +73,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,26 +35,20 @@ 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>
 ```
 
 ### 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 |
+| `stroke-width`          | *number*  | 2            |
+| `absolute-stroke-width` | *boolean* | false        |
+| `default-class`         | *string*  | lucide-icon  |
 
 ### Custom props
 
@@ -76,25 +70,30 @@ 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 +106,4 @@ export default {
   </div>
 </template>
 ```
+All other props listed above also work on the `Icon` Component.

docs/packages/lucide-vue.md

@@ -8,55 +8,54 @@ 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 |
+| `stroke-width`          | *number*  | 2            |
+| `absolute-stroke-width` | *boolean* | false        |
+| `default-class`         | *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 +69,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
+  }
 });
 ```
 

icon.schema.json

@@ -0,0 +1,33 @@
+{
+  "$id": "https://lucide.dev/icons.schema.json",
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$vocabulary": {
+    "https://json-schema.org/draft/2020-12/vocab/core": true,
+    "https://json-schema.org/draft/2020-12/vocab/applicator": true,
+    "https://json-schema.org/draft/2020-12/vocab/unevaluated": true,
+    "https://json-schema.org/draft/2020-12/vocab/validation": true,
+    "https://json-schema.org/draft/2020-12/vocab/meta-data": true,
+    "https://json-schema.org/draft/2020-12/vocab/format-annotation": true,
+    "https://json-schema.org/draft/2020-12/vocab/content": true
+  },
+  "title": "Lucide Icons icon schema",
+  "type": "object",
+  "properties": {
+    "tags": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "minItems": 1,
+      "uniqueItems": true
+    },
+    "categories": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "uniqueItems": true
+    }
+  },
+  "description": "A JSON Schema for icons defined by Lucide Icons."
+}

icons/accessibility.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "disability",
+    "disabled",
+    "dda",
+    "wheelchair"
+  ],
+  "categories": [
+    "accessibility",
+    "medical"
+  ]
+}

icons/accessibility.svg

@@ -10,8 +10,8 @@
   stroke-linejoin="round"
 >
   <circle cx="16" cy="4" r="1" />
-  <path d="m18 19 1-7-5.87.94" />
-  <path d="m5 8 3-3 5.5 3-2.21 3.1" />
-  <path d="M4.24 14.48c-.19.58-.27 1.2-.23 1.84a5 5 0 0 0 5.31 4.67c.65-.04 1.25-.2 1.8-.46" />
-  <path d="M13.76 17.52c.19-.58.27-1.2.23-1.84a5 5 0 0 0-5.31-4.67c-.65.04-1.25.2-1.8.46" />
+  <path d="m18 19 1-7-6 1" />
+  <path d="m5 8 3-3 5.5 3-2.36 3.5" />
+  <path d="M4.24 14.5a5 5 0 0 0 6.88 6" />
+  <path d="M13.76 17.5a5 5 0 0 0-6.88-6" />
 </svg>

icons/activity.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "pulse",
+    "health",
+    "action",
+    "motion"
+  ],
+  "categories": [
+    "medical",
+    "account",
+    "social"
+  ]
+}

icons/air-vent.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "air conditioner",
+    "ac",
+    "central air",
+    "cooling",
+    "climate-control"
+  ],
+  "categories": [
+    "home"
+  ]
+}

icons/airplay.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "stream",
+    "cast",
+    "mirroring"
+  ],
+  "categories": [
+    "multimedia",
+    "connectivity",
+    "devices",
+    "brands"
+  ]
+}

icons/alarm-check.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "done",
+    "todo",
+    "tick",
+    "complete",
+    "task"
+  ],
+  "categories": [
+    "devices",
+    "notifications",
+    "time"
+  ]
+}

icons/alarm-check.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M12 21a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
+  <circle cx="12" cy="13" r="8" />
   <path d="M5 3 2 6" />
   <path d="m22 6-3-3" />
-  <path d="m6 19-2 2" />
-  <path d="m18 19 2 2" />
+  <path d="M6.38 18.7 4 21" />
+  <path d="M17.64 18.67 20 21" />
   <path d="m9 13 2 2 4-4" />
 </svg>

icons/alarm-clock-off.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "../icon.schema.json",
+  "tags": [
+    "morning",
+    "turn-off"
+  ],
+  "categories": [
+    "devices",
+    "notifications",
+    "time"
+  ]
+}