Add multiline support

* Refine `truck` icon

* Refine `train` icon

* Rename `train` icon to `tram`

* Add `rail-symbol` icon

* Add `m-square` (metro) icon

* Add `train-track` icon

* Add `cable-car` icon

* Add `coach` icon

* Add `traffic-cone` icon

* Add `traffic-cone` variant

* Improve metadata

* Refine `bus` icon

* Add `traffic-lights` icon

* Revert "Add `traffic-lights` icon"

This reverts commit 22dcfc7aad.

* Refine `train-track` icon

* Rename `train` to `train-high-speed`

* Refine `car` icon

* Add `car-front` variant

* Add `car-taxi` icon

* Add `car-sports` icon

* Add `parking-meter` icon

* Add `tractor` icon

* Refine `bus` icon

* Refine `tractor` icon

* Refine `car-front` icon

* Refine `car-taxi` icon

* Refine `car-sports` icon

* Add `bus-school` icon

* Remove `traffic-cone` variant

* Add `train-high-speed-tunnel` icon

* Refine `coach` icon

* Refine `cable-car` icon

* Refine `car` icon

* Refine `train-high-speed` icon

* Refine `train-high-speed-tunnel` icon

* Update icons/car-front.svg

Co-authored-by: Karsa <contact@karsa.org>

* Update icons/car.svg

Co-authored-by: Karsa <contact@karsa.org>

* Update icons/car-taxi.svg

Co-authored-by: Karsa <contact@karsa.org>

* Refine `coach` icon

* Add `coach` variant

* Rename `tram` to `tram-front`

* Rename `train-high-speed` to `train-front`

* Rename `train-high-speed-tunnel` to `train-front-tunnel`

* Rename `bus-school` to `bus-school-front`

* Rename `coach` to `coach-front`

* Rename `coach` variant to `coach-front` variant

* Rename `car-taxi` to `car-taxi-front`

* Rename `car-sports` to `car-sports-front`

* Add `car-electric-front` icon

* Refine `car-electric-front` icon

* Refine `car` icon

* Add `ship-wheel` icon

* Improve `ship` metadata

* Remove `bus-school-front` icon

* Remove `car-electric-front` icon

* Remove `car-sports-front` icon

* Remove `coach-front` variant

* Rename `coach-front` to `bus-front`

* Improve `train-front-tunnel` metadata

* Refine `car-taxi-front` icon

---------

Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

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

@@ -24,15 +24,15 @@ runs:
     - name: Get pnpm store directory
       id: pnpm-cache
       run: |
-        echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
     - uses: actions/cache@v3
       name: Setup pnpm cache
       with:
-        path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-        key: ${{ runner.os }}-lucide-preact-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
-          ${{ runner.os }}-lucide-preact-pnpm-store-
+          ${{ runner.os }}-pnpm-store-
 
     - name: Install dependencies
       run: pnpm install --filter lucide-preact

.github/actions/check-icons.yml

@@ -24,15 +24,15 @@ runs:
     - name: Get pnpm store directory
       id: pnpm-cache
       run: |
-        echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
     - uses: actions/cache@v3
       name: Setup pnpm cache
       with:
-        path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-        key: ${{ runner.os }}-lucide-preact-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
         restore-keys: |
-          ${{ runner.os }}-lucide-preact-pnpm-store-
+          ${{ runner.os }}-pnpm-store-
 
     - name: Install dependencies
       run: pnpm install --filter .

.github/labeler.yml

@@ -0,0 +1,62 @@
+# For changed dependencies
+📦 dependencies:
+- pnpm-lock.yaml
+
+# For changes in documentation
+📖 documentation:
+- docs/*.md
+- docs/**/*.md
+
+# For changes in the site, but not markdown files
+🌍 site:
+- 'docs/**'
+
+# For changes in the metadata
+🫧 metadata:
+- 'icons/*.json'
+- categories/*
+
+# For changes or added icons
+🎨 icon:
+- 'icons/*.svg'
+
+# For changes in the lucide package
+🧳 lucide package:
+- 'packages/lucide/*'
+
+# For changes in the lucide React package
+⚛️ react package:
+- 'packages/lucide-react/*'
+
+# For changes in the lucide React Native package
+⚛️ react native package:
+- 'packages/lucide-react-native/*'
+
+# For changes in the lucide vue packages
+💎 vue package:
+- 'packages/lucide-vue/*'
+- 'packages/lucide-vue-next/*'
+
+# For changes in the lucide angular package
+🅰️ angular package:
+- 'packages/lucide-angular/*'
+
+# For changes in the lucide preact package
+⚛️ preact package:
+- 'packages/lucide-preact/*'
+
+# For changes in the lucide svelte package
+🧣 svelte package:
+- 'packages/lucide-svelte/*'
+
+# For changes in the lucide solid package
+🪝 solid package:
+- 'packages/lucide-solid/*'
+
+# For changes in the lucide static package
+🪨 static package:
+- 'packages/lucide-static/*'
+
+# For changes in the lucide flutter package
+🏹 flutter package:
+- 'packages/lucide-flutter/*'

.github/workflows/ci.yml

@@ -10,8 +10,9 @@ on:
 jobs:
   create-release:
     if: github.repository == 'lucide-icons/lucide'
-
     runs-on: ubuntu-latest
+    outputs:
+      VERSION: ${{ steps.new-version.outputs.NEW_VERSION }}
 
     steps:
       - uses: actions/checkout@v3
@@ -29,12 +30,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
@@ -47,7 +48,7 @@ jobs:
 
       - name: Get latest tag
         id: latest-tag
-        run: echo "::set-output name=LATEST_TAG::$(git describe --tags `git rev-list --tags --max-count=1`)"
+        run: echo "LATEST_TAG=$(git describe --tags `git rev-list --tags --max-count=1`)" >> $GITHUB_OUTPUT
 
       - name: Install dependencies
         run: pnpm install
@@ -57,17 +58,18 @@ jobs:
 
       - name: Create new version
         id: new-version
-        run: echo "::set-output name=NEW_VERSION::$(.github/workflows/version-up.sh --minor)"
+        run: echo "NEW_VERSION=$(.github/workflows/version-up.sh --minor)" >> $GITHUB_OUTPUT
 
       - name: Create change log
         id: change-log
         run: |
           CHANGE_LOG=$(pnpm run generate:changelog --old-tag=${{ steps.latest-tag.outputs.LATEST_TAG }})
-          CHANGE_LOG="${CHANGE_LOG//'%'/'%25'}"
+          CHANGE_LOG=$(tail -n +5 <<< $CHANGE_LOG)
-          CHANGE_LOG="${CHANGE_LOG//$'\n'/'%0A'}"
-          CHANGE_LOG="${CHANGE_LOG//$'\r'/'%0D'}"
           echo $CHANGE_LOG
-          echo "::set-output name=CHANGE_LOG::$CHANGE_LOG"
+          EOF=$(dd if=/dev/urandom bs=15 count=1 status=none | base64)
+          echo "CHANGE_LOG<<$EOF" >> $GITHUB_OUTPUT
+          echo "$CHANGE_LOG" >> $GITHUB_OUTPUT
+          echo "$EOF" >> $GITHUB_OUTPUT
         env:
           GITHUB_API_KEY: ${{ secrets.GITHUB_TOKEN }}
 
@@ -76,11 +78,17 @@ jobs:
           echo '${{ steps.new-version.outputs.NEW_VERSION }}'
           echo '${{ steps.change-log.outputs.CHANGE_LOG }}'
 
-      - name: Release
+      - name: Create Release
         uses: softprops/action-gh-release@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.CREATE_RELEASE_TOKEN }}
         with:
           tag_name: ${{ steps.new-version.outputs.NEW_VERSION }}
           name: New icons ${{ steps.new-version.outputs.NEW_VERSION }}
           body: ${{ steps.change-log.outputs.CHANGE_LOG }}
+
+  start-release:
+    if: github.repository == 'lucide-icons/lucide'
+    needs: create-release
+    uses: './.github/workflows/release.yml'
+    secrets: inherit
+    with:
+      version: ${{ needs.create-release.outputs.VERSION }}

.github/workflows/labeler.yml

@@ -0,0 +1,12 @@
+name: "Pull Request Labeler"
+on:
+- pull_request_target
+
+jobs:
+  triage:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/labeler@v4

.github/workflows/lucide-angular.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

.github/workflows/lucide-font.yml

@@ -26,15 +26,15 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-lucide-font-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-lucide-font-pnpm-store-
+            ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
         run: pnpm install --filter outline-svg

.github/workflows/lucide-preact.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

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

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

.github/workflows/lucide-react.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

.github/workflows/lucide-solid.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

.github/workflows/lucide-static.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

.github/workflows/lucide-svelte.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

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

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

.github/workflows/lucide-vue.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

.github/workflows/lucide.yml

@@ -25,12 +25,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-

.github/workflows/release.yml

@@ -5,6 +5,13 @@ on:
     tags:
       - 'v*'
 
+  workflow_call:
+    inputs:
+      version:
+        required: true
+        description: Version
+        type: string
+
   workflow_dispatch:
     inputs:
       version:
@@ -12,8 +19,8 @@ on:
         required: true
 
 jobs:
-  pre-build:
+  pre-release:
-    if: github.repository == 'lucide-icons/lucide' && contains('["locness3","ericfennis", "johnletey", "karsa-mistmere"]', github.actor)
+    if: github.repository == 'lucide-icons/lucide' && contains('["ericfennis", "karsa-mistmere"]', github.actor)
     runs-on: ubuntu-latest
     outputs:
       VERSION: ${{ steps.get_version.outputs.VERSION }}
@@ -23,19 +30,32 @@ jobs:
         id: get_version
         run: |
           echo $VERSION_REF
-          echo ::set-output name=VERSION::${VERSION_REF/refs\/tags\/\v}
+          echo "VERSION=${VERSION_REF/refs\/tags\/\v}" >> $GITHUB_OUTPUT
         env:
-          VERSION_REF: ${{ github.event.inputs.version || github.ref }}
+          VERSION_REF: ${{ inputs.version || github.event.inputs.version || github.ref }}
 
-  lucide:
+  release:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
-    needs: pre-build
+    needs: pre-release
+    strategy:
+      matrix:
+        package: [
+          'lucide',
+          'lucide-react',
+          'lucide-react-native',
+          'lucide-vue',
+          'lucide-vue-next',
+          'lucide-angular',
+          'lucide-preact',
+          'lucide-solid',
+          'lucide-svelte',
+        ]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - uses: pnpm/action-setup@v2.0.1
         name: Install pnpm
@@ -47,484 +67,38 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Set Auth Token
-        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
+        run: npm config set //registry.npmjs.org/:_authToken ${{ inputs.NPM_TOKEN || secrets.NPM_TOKEN }}
 
       - name: Set new version
-        run: pnpm --filter lucide version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+        run: pnpm --filter ${{ matrix.package }} version --new-version ${{ needs.pre-release.outputs.VERSION }} --no-git-tag-version
 
       - name: Build
-        run: pnpm --filter lucide build
+        run: pnpm --filter ${{ matrix.package }} build
 
       - name: Test
-        run: pnpm --filter lucide test
+        run: pnpm --filter ${{ matrix.package }} test
 
       - name: Publish
-        run: pnpm --filter lucide publish --no-git-checks
+        run: pnpm --filter ${{ matrix.package }} publish --no-git-checks --ignore-scripts
-
-      - name: Upload package.json
-        uses: actions/upload-artifact@v2
-        with:
-          name: lucide-package-json
-          path: packages/lucide/package.json
-
-  lucide-react:
-    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-react version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
-
-      - name: Build
-        run: pnpm --filter lucide-react build
-
-      - name: Test
-        run: pnpm --filter lucide-react test
-
-      - name: Publish
-        run: pnpm --filter lucide-react publish --no-git-checks
-
-      - name: Upload package.json
-        uses: actions/upload-artifact@v2
-        with:
-          name: lucide-react-package-json
-          path: packages/lucide-react/package.json
-
-  lucide-react-native:
-    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-react-native version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
-
-      - name: Build
-        run: pnpm --filter lucide-react-native build
-
-      - name: Test
-        run: pnpm --filter lucide-react-native test
-
-      - name: Publish
-        run: pnpm --filter lucide-react-native publish --no-git-checks
-
-      - name: Upload package.json
-        uses: actions/upload-artifact@v2
-        with:
-          name: lucide-react-native-package-json
-          path: packages/lucide-react-native/package.json
-
-  lucide-vue:
-    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 new version
-        run: pnpm --filter lucide-vue version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
-
-      - name: Build
-        run: pnpm --filter lucide-vue build
-
-      - name: Test
-        run: pnpm --filter lucide-vue test
-
-      - name: Publish
-        run: pnpm --filter lucide-vue publish --no-git-checks
-
-      - name: Upload package.json
-        uses: actions/upload-artifact@v2
-        with:
-          name: lucide-vue-package-json
-          path: packages/lucide-vue/package.json
-
-  lucide-vue-next:
-    if: github.repository == 'lucide-icons/lucide'
-    runs-on: ubuntu-latest
-    needs: pre-build
-    steps:
-      - uses: actions/checkout@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 new version
-        run: pnpm --filter lucide-vue-next version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
-
-      - name: Build
-        run: pnpm --filter lucide-vue-next build
-
-      - name: Test
-        run: pnpm --filter lucide-vue-next test
-
-      - name: Publish
-        run: pnpm --filter lucide-vue-next publish --no-git-checks
-
-      - name: Upload package.json
-        uses: actions/upload-artifact@v2
-        with:
-          name: lucide-vue-next-package-json
-          path: packages/lucide-vue-next/package.json
-
-  lucide-angular:
-    if: github.repository == 'lucide-icons/lucide'
-    runs-on: ubuntu-latest
-    needs: pre-build
-    steps:
-      - uses: actions/checkout@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-angular version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
-
-      - name: Build
-        run: pnpm --filter lucide-angular build
-
-      - name: Test
-        run: pnpm --filter lucide-angular test
-
-      - name: Publish
-        run: pnpm --filter lucide-angular publish --no-git-checks --ignore-scripts
-
-      - name: Upload package.json
-        uses: actions/upload-artifact@v2
-        with:
-          name: lucide-angular-package-json
-          path: packages/lucide-angular/package.json
-
-  lucide-preact:
-    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-preact version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
-
-      - name: Build
-        run: pnpm --filter lucide-preact build
-
-      - name: Test
-        run: pnpm --filter lucide-preact test
-
-      - name: Publish
-        run: pnpm --filter lucide-preact publish --no-git-checks
-
-      - name: Upload package.json
-        uses: actions/upload-artifact@v2
-        with:
-          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@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-svelte version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
-
-      - name: Build
-        run: pnpm --filter lucide-svelte build
-
-      - name: Test
-        run: pnpm --filter lucide-svelte test
-
-      - name: Publish
-        run: pnpm --filter lucide-svelte publish --no-git-checks
-
-      - name: Upload package.json
-        uses: actions/upload-artifact@v2
-        with:
-          name: lucide-svelte-package-json
-          path: packages/lucide-svelte/package.json
 
   lucide-static:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
-    needs: [pre-build, lucide-font]
+    needs: [pre-release, lucide-font]
     steps:
       - uses: actions/checkout@v3
       - uses: actions/download-artifact@v2
@@ -543,24 +117,24 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Set Auth Token
         run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
 
       - name: Set new version
-        run: pnpm --filter lucide-static version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+        run: pnpm --filter lucide-static version --new-version ${{ needs.pre-release.outputs.VERSION }} --no-git-tag-version
 
       - name: Move Font
         run: cp -r lucide-font packages/lucide-static/font
@@ -571,16 +145,10 @@ jobs:
       - name: Publish
         run: pnpm --filter lucide-static publish --no-git-checks
 
-      - name: Upload package.json
-        uses: actions/upload-artifact@v2
-        with:
-          name: lucide-static-package-json
-          path: packages/lucide-static/package.json
-
   lucide-font:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
-    needs: pre-build
+    needs: pre-release
     container: ericfennis/lucide-font:latest
     steps:
       - uses: actions/checkout@v3
@@ -598,12 +166,12 @@ jobs:
       - name: Get pnpm store directory
         id: pnpm-cache
         run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
 
       - uses: actions/cache@v3
         name: Setup pnpm cache
         with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
@@ -626,130 +194,26 @@ jobs:
           name: lucide-font
           path: lucide-font
 
-  lucide-flutter:
-    if: github.repository == 'lucide-icons/lucide'
-    runs-on: ubuntu-latest
-    needs: [pre-build, lucide-font]
-    container:
-      image: cirrusci/flutter:latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/download-artifact@v2
-      - uses: actions/cache@v2
-        with:
-          path: ~/.pub-cache
-          key: ${{ runner.os }}-pub-${{ hashFiles('~/.pub-cache') }}
-          restore-keys: |
-            ${{ runner.os }}-pub-
-
-      - name: Setup credentials
-        run: |
-          mkdir -p ~/.pub-cache
-          cat <<EOF > ~/.pub-cache/credentials.json
-          {
-            "accessToken": "${{ secrets.GOOGLE_OAUTH_ACCESS_TOKEN }}",
-            "refreshToken": "${{ secrets.GOOGLE_OAUTH_REFRESH_TOKEN }}",
-            "idToken": "${{ secrets.GOOGLE_OAUTH_ID_TOKEN }}",
-            "tokenEndpoint":"https://accounts.google.com/o/oauth2/token",
-            "scopes": [ "openid", "https://www.googleapis.com/auth/userinfo.email" ],
-            "expiration": 1629835569218
-          }
-          EOF
-
-      - name: Get packages
-        run: flutter pub get
-        working-directory: packages/lucide-flutter
-
-      - name: List lucide-font folder
-        run: ls lucide-font
-
-      - name: Copy assets from lucide-font directory
-        run: |
-          mkdir packages/lucide-flutter/assets
-          cp lucide-font/lucide.ttf packages/lucide-flutter/assets/lucide.ttf
-          cp lucide-font/lucide-preview.html packages/lucide-flutter/assets/lucide-preview.html
-
-      - name: Generate exports file
-        run: |
-          dart tool/generate_fonts.dart assets/lucide-preview.html
-          flutter format .
-        working-directory: packages/lucide-flutter
-
-      - name: Test
-        run: flutter test
-        working-directory: packages/lucide-flutter
-
-      - name: Copy License
-        run: cp ../../LICENSE ./LICENSE
-        working-directory: packages/lucide-flutter
-
-      - name: Update yaml
-        run: sed -E 's/(version:)[^\n]*/\1 ${{ needs.pre-build.outputs.VERSION }}/;' pubspec.yaml > pubspec && mv pubspec pubspec.yaml
-        working-directory: packages/lucide-flutter
-
-      - name: Flutter publish
-        run: flutter pub publish -f
-        working-directory: packages/lucide-flutter
-
-      - name: Upload pubspec.yaml
-        uses: actions/upload-artifact@v2
-        with:
-          name: lucide-flutter-pubspec-yaml
-          path: packages/lucide-flutter/pubspec.yaml
-
   post-release:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
-    needs:
+    needs: [
-      [
+      pre-release,
-        pre-build,
-        lucide,
-        lucide-react,
-        lucide-react-native,
-        lucide-vue,
-        lucide-vue-next,
-        lucide-angular,
-        lucide-svelte,
-        lucide-preact,
-        lucide-flutter,
       lucide-font,
     ]
 
     steps:
       - 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
-          mv lucide-vue-next-package-json/package.json packages/lucide-vue-next/package.json
-          mv lucide-angular-package-json/package.json packages/lucide-angular/package.json
-          mv lucide-flutter-pubspec-yaml/pubspec.yaml packages/lucide-flutter/pubspec.yaml
-
-      - name: Commit package.jsons
-        run: |
-          git add packages/*/package.json packages/lucide-flutter/pubspec.yaml
-          git -c user.name="Lucide Bot" -c user.email="lucide-bot@users.noreply.github.com" \
-            commit -m ":package: Bump lucide package versions to ${{ needs.pre-build.outputs.VERSION }}" --no-verify --quiet
-          git remote set-url --push origin https://lucide-bot:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY.git
-          git push origin HEAD:main
-
       - name: Zip font and icons
         run: |
-          zip -r lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip lucide-font
+          zip -r lucide-font-${{ needs.pre-release.outputs.VERSION }}.zip lucide-font
-          zip -r lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip icons
+          zip -r lucide-icons-${{ needs.pre-release.outputs.VERSION }}.zip icons
 
       - name: Release zip and fonts
         uses: softprops/action-gh-release@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.CREATE_RELEASE_TOKEN }}
         with:
-          tag_name: v${{ needs.pre-build.outputs.VERSION }}
+          tag_name: ${{ needs.pre-release.outputs.VERSION }}
           files: |
-            lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip
+            lucide-font-${{ needs.pre-release.outputs.VERSION }}.zip
-            lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip
+            lucide-icons-${{ needs.pre-release.outputs.VERSION }}.zip

.gitignore

@@ -17,6 +17,10 @@ packages/**/src/icons/*.js
 packages/**/src/icons/*.ts
 packages/**/src/icons/*.tsx
 packages/**/src/aliases.ts
+packages/**/src/dynamicIconImports.ts
+packages/**/dynamicIconImports.js
+packages/**/dynamicIconImports.d.ts
+packages/**/dynamicIconImports.js.map
 packages/**/LICENSE
 categories.json
 tags.json
@@ -30,6 +34,7 @@ docs/.vitepress/data/iconNodes
 docs/.vitepress/data/iconMetaData.ts
 docs/.vitepress/data/releaseMetaData.json
 docs/.vitepress/data/releaseMetaData
+docs/.vitepress/data/iconDetails
 docs/.vitepress/data/relatedIcons.json
 docs/.vercel
 docs/.nitro

.vscode/svg.code-snippets

@@ -0,0 +1,95 @@
+{
+  "Lucide SVG": {
+    "scope": "xml",
+    "description": "Base SVG with Lucide attributes.",
+    "prefix": [
+      "svg",
+      "lucide"
+    ],
+    "body": [
+      "<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\"",
+      ">",
+      "  $0",
+      "</svg>"
+    ]
+  },
+  "Rectangle": {
+    "scope": "xml",
+    "description": "SVG `rect`angle, with Lucide defaults.",
+    "prefix": [
+      "rect",
+      "<rect"
+    ],
+    "body": "<rect width=\"${1:20}\" height=\"${2:12}\" x=\"${3:2}\" y=\"${4:6}\" rx=\"${5|2,1|}\"/>"
+  },
+  "Square": {
+    "scope": "xml",
+    "description": "SVG square `rect`angle, with Lucide defaults.",
+    "prefix": [
+      "square",
+      "rect",
+      "<rect",
+      "tile"
+    ],
+    "body": "<rect width=\"${1:18}\" height=\"$1\" x=\"${2:3}\" y=\"${3:$2}\" rx=\"${4|2,1|}\" />"
+  },
+  "Circle": {
+    "scope": "xml",
+    "description": "SVG `circle`, with Lucide defaults.",
+    "prefix": [
+      "circle",
+      "<circle"
+    ],
+    "body": "<circle cx=\"${2:12}\" cy=\"${3:$2}\" r=\"${1|10,2,.5|}\" />"
+  },
+  "Ellipse": {
+    "scope": "xml",
+    "description": "SVG `ellipse`.",
+    "prefix": [
+      "ellipse",
+      "<ellipse"
+    ],
+    "body": "<ellipse cx=\"${3:12}\" cy=\"${4:$3}\" rx=\"${1:10}\" ry=\"${2:$1}\" />"
+  },
+  "Path": {
+    "scope": "xml",
+    "description": "SVG custom `path`.",
+    "prefix": [
+      "path",
+      "<path",
+      "polyline",
+      "<polyline",
+      "polygon",
+      "<polygon"
+    ],
+    "body": "<path d=\"${1|M,m|}$0\" />"
+  },
+  "Line": {
+    "scope": "xml",
+    "description": "SVG `path`, preffered to `line` in Lucide.",
+    "prefix": [
+      "line",
+      "<line",
+      "minus"
+    ],
+    "body": "<path d=\"M${3:5} ${4:12}${1|h,v|}${2:14}\" />"
+  },
+  "Dot": {
+    "scope": "xml",
+    "description": "SVG small dot, within the Lucide guidelines.",
+    "prefix": [
+      "dot",
+      "."
+    ],
+    "body": "<path d=\"M ${1:12} ${2:$1}h.01\" />"
+  }
+}

README.md

@@ -166,8 +166,8 @@ For more details, see the [documentation](https://github.com/lucide-icons/lucide
 ### Static (svg sprite, font, icons ..)
 
 Assets:
-[Font Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
+[Font Files](https://github.com/lucide-icons/lucide/releases/latest)
-[SVG Files](https://github.com/lucide-icons/lucide/releases/tag/latest)
+[SVG Files](https://github.com/lucide-icons/lucide/releases/latest)
 [SVG Sprite](https://cdn.jsdelivr.net/npm/lucide-static@latest/sprite.svg)
 
 NPM package
@@ -286,5 +286,5 @@ Thank you to all the people who contributed to Lucide!
 ## Sponsors
 
 <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
-  <img src="./site/public/vercel.svg" alt="Powered by Vercel" width="200" />
+  <img src="/docs/public/vercel.svg" alt="Powered by Vercel" width="200" />
 </a>

categories/transportation.json

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

docs/.vitepress/api/categories/index.get.ts

@@ -0,0 +1,11 @@
+import { eventHandler, setResponseHeader } from 'h3'
+import iconMetaData from '../../data/iconMetaData'
+
+export default eventHandler((event) => {
+  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400')
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*')
+
+  return Object.fromEntries(
+    Object.entries(iconMetaData).map(([name, { categories }]) => [ name, categories ])
+  )
+})

docs/.vitepress/api/icon-nodes/index.get.ts

@@ -8,6 +8,7 @@ export default eventHandler((event) => {
   const withUniqueKeys = query.withUniqueKeys === 'true'
 
   setResponseHeader(event, 'Cache-Control', 'public, max-age=86400')
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*')
 
   if (withUniqueKeys) {
     return iconNodes

docs/.vitepress/api/icons/[iconName].get.ts

@@ -38,6 +38,7 @@ export default eventHandler((event) => {
 
   defaultContentType(event, 'image/svg+xml')
   setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000')
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*')
 
   return svg
 

docs/.vitepress/api/tags/index.get.ts

@@ -3,6 +3,7 @@ import iconMetaData from '../../data/iconMetaData'
 
 export default eventHandler((event) => {
   setResponseHeader(event, 'Cache-Control', 'public, max-age=86400')
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*')
 
   return Object.fromEntries(
     Object.entries(iconMetaData).map(([name, { tags }]) => [ name, tags ])

docs/.vitepress/config.ts

@@ -5,6 +5,7 @@ import { createWriteStream } from 'node:fs'
 import { resolve } from 'node:path'
 import { SitemapStream } from 'sitemap'
 import sidebar from './sidebar';
+import fs from 'fs';
 
 const links = []
 
@@ -35,11 +36,11 @@ export default defineConfig({
           )
         }
       ]
-    }
+    },
   },
   head: [
     [ 'script', {
-      src: 'https://plausible.io/js/script.js',
+      src: 'https://analytics.lucide.dev/js/script.js',
       'data-domain': 'lucide.dev',
       defer: ''
     }],
@@ -130,10 +131,6 @@ export default defineConfig({
       return
     }
 
-    if (pageData.relativePath === 'index.md') {
-      console.log('Home!');
-    }
-
     if (pageData.relativePath.startsWith('icons/')) {
       links.push({
         url: pageData.relativePath.replace(/((^|\/)index)?\.md$/, '$2'),

docs/.vitepress/lib/icons.ts

@@ -8,14 +8,6 @@ const DATE_OF_FORK = '2020-06-08T16:39:52+0100';
 
 const directory = path.join(process.cwd(), "../icons");
 
-export function getAllNames() {
-  const fileNames = fs.readdirSync(directory).filter((file) => path.extname(file) === '.json');
-
-  return fileNames
-    .filter((fileName) => fs.existsSync(directory + '/' + path.basename(fileName, '.json') + '.svg'))
-    .map((fileName) => path.basename(fileName, '.json'));
-}
-
 export interface GetDataOptions {
   withChildKeys?: boolean
 }
@@ -49,7 +41,7 @@ export async function getData(name: string) {
 }
 
 export async function getAllData(): Promise<{ name: string, iconNode: IconNodeWithKeys}[]> {
-  const names = getAllNames();
+  const names = Object.keys(iconNodes);
 
   return Promise.all(names.map((name) => getData(name)));
 }

docs/.vitepress/theme/components/base/Tooltip.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import {onMounted, ref} from 'vue';
+import {useFloating, offset, shift} from '@floating-ui/vue';
+
+const reference = ref(null);
+const tooltip = ref(null);
+const middleware = ref([shift(), offset(8)]);
+const { floatingStyles, update } = useFloating(reference, tooltip, {
+  middleware,
+  transform: false
+});
+
+defineProps<{
+  title: string
+}>()
+
+onMounted(() => {
+  update()
+});
+</script>
+
+<template>
+  <span ref="reference" class="reference">
+    <slot/>
+  </span>
+  <div ref="tooltip" class="tooltip" :style="floatingStyles">
+    {{title}}
+  </div>
+</template>
+
+<style scoped>
+.reference:hover + .tooltip{
+  opacity: 1;
+  transform: scale(1);
+}
+
+.tooltip {
+  display: block;
+  font-size: 12px;
+  line-height: 20px;
+  transform: scale(0.9);
+  font-weight: 400;
+  background: var(--vp-c-brand-dark);
+  color: white;
+  z-index: 10;
+  white-space: nowrap;
+  padding: 2px 8px;
+  border-radius: 4px;
+  box-shadow: var(--vp-shadow-1);
+  opacity: 0;
+  pointer-events: none;
+  transition: cubic-bezier(0.19, 1, 0.22, 1) .2s;
+  transition-property: opacity, transform;
+}
+</style>

docs/.vitepress/theme/components/home/HomeIconCustomizer.vue

@@ -64,7 +64,7 @@ watch(absoluteStrokeWidth, (enabled) => {
           <ResetButton @click="resetStyle"></ResetButton>
         </h2>
         <p class="copy">
-          Lucide has a lot of customization options to match the icons with you UI.
+          Lucide has a lot of customization options to match the icons with your UI.
         </p>
 
         <div class="customizer">

docs/.vitepress/theme/components/icons/CopySVGButton.vue

@@ -3,19 +3,9 @@ import { ref } from 'vue';
 import ButtonMenu from '../base/ButtonMenu.vue'
 import { useIconStyleContext } from '../../composables/useIconStyle';
 import useConfetti from '../../composables/useConfetti';
+import getSVGIcon from '../../utils/getSVGIcon';
+import downloadData from '../../utils/downloadData';
 
-const allowedAttrs = [
-  'xmlns',
-  'width',
-  'height',
-  'viewBox',
-  'fill',
-  'stroke',
-  'stroke-width',
-  'stroke-linecap',
-  'stroke-linejoin',
-  'class',
-]
 const downloadText = 'Download!'
 const copiedText = 'Copied!'
 const confettiText = ref(copiedText)
@@ -28,24 +18,6 @@ const { size } = useIconStyleContext()
 
 const { animate, confetti } = useConfetti()
 
-function getSVGIcon() {
-  const svg = document.querySelector('#previewer svg')
-  if (!svg) return
-
-  const clonedSvg = svg.cloneNode(true) as SVGElement
-
-  // Filter out attributes that are not allowed in SVGs
-  for (const attr of Array.from(clonedSvg.attributes)) {
-    if (!allowedAttrs.includes(attr.name)) {
-      clonedSvg.removeAttribute(attr.name)
-    }
-  }
-
-  const svgString = new XMLSerializer().serializeToString(clonedSvg)
-
-  return svgString
-}
-
 function copySVG() {
   confettiText.value = copiedText
   const svgString = getSVGIcon()
@@ -70,11 +42,7 @@ function downloadSVG() {
   confettiText.value = downloadText
   const svgString = getSVGIcon()
 
-  const link = document.createElement('a');
+  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`)
-  link.download = `${props.name}.svg`;
-  link.href = `data:image/svg+xml;base64,${btoa(svgString)}`
-  link.click();
-
   confetti()
 }
 
@@ -91,12 +59,7 @@ function downloadPNG() {
   image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;
   image.onload = function() {
     ctx.drawImage(image, 0, 0);
-
+    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'))
-    const link = document.createElement('a');
-    link.download = `${props.name}.png`;
-    link.href = canvas.toDataURL('image/png')
-    link.click();
-
     confetti()
   }
 }

docs/.vitepress/theme/components/icons/IconDetailOverlay.vue

@@ -1,30 +1,38 @@
 <script setup lang="ts">
-  import type { IconEntity } from '../../types'
+import type { IconEntity } from '../../types'
-  import { computed, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
-  import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
-  import IconButton from '../base/IconButton.vue';
+import IconButton from '../base/IconButton.vue';
-  import IconContributors from './IconContributors.vue';
+import IconContributors from './IconContributors.vue';
-  import IconPreview from './IconPreview.vue';
+import IconPreview from './IconPreview.vue';
-  import { x, expand } from '../../../data/iconNodes'
+import { x, expand } from '../../../data/iconNodes'
-  import { useRouter } from 'vitepress';
+import { useRouter } from 'vitepress';
-  import IconInfo from './IconInfo.vue';
+import IconInfo from './IconInfo.vue';
-  import Badge from '../base/Badge.vue';
+import Badge from '../base/Badge.vue';
+import { computedAsync } from '@vueuse/core';
 
-  const props = defineProps<{
+const props = defineProps<{
-    icon: IconEntity
+  iconName: string
-  }>()
+}>()
 
-  const emit = defineEmits(['close'])
+const icon = computedAsync<IconEntity | null>(async () => {
-  const isOpen = computed(() => !!props.icon)
+  if (props.iconName) {
-
+    return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
-  function onClose() {
-    emit('close')
   }
+  return null
+}, null)
 
-  const { go } = useRouter()
+const emit = defineEmits(['close'])
+const isOpen = computed(() => !!icon.value)
 
-  const CloseIcon = createLucideIcon('Close', x)
+function onClose() {
-  const Expand = createLucideIcon('Expand', expand)
+  emit('close')
+}
+
+const { go } = useRouter()
+
+const CloseIcon = createLucideIcon('Close', x)
+const Expand = createLucideIcon('Expand', expand)
 </script>
 
 <template>
@@ -109,9 +117,8 @@
 }
 
 .icon-info {
-  padding: 0 24px;
+  padding-left: 24px;
   flex-basis: 100%;
-
 }
 
 .icon-tags {

docs/.vitepress/theme/components/icons/IconGrid.vue

@@ -43,5 +43,6 @@ function setActiveIcon(name: string) {
 
 .icon {
   aspect-ratio: 1/1;
+  position: relative;
 }
 </style>

docs/.vitepress/theme/components/icons/IconInfo.vue

@@ -17,7 +17,7 @@ const { go } = useRouter()
 const { page } = useData()
 
 const tags = computed(() => {
-  if (!props.icon) return []
+  if (!props.icon || !props?.icon?.tags) return []
   return props.icon.tags.join(' • ')
 })
 </script>
@@ -27,9 +27,11 @@ const tags = computed(() => {
     <IconDetailName class="icon-name">
       {{ icon.name }}
     </IconDetailName>
-    <p class="icon-tags">
+    <div class="tags-scroller" v-if="tags.length">
+      <p class="icon-tags horizontal-scroller">
         {{ tags }}
       </p>
+    </div>
     <div class="group">
       <Badge
         v-for="category in icon.categories"
@@ -72,9 +74,61 @@ const tags = computed(() => {
   font-size: 16px;
   color: var(--vp-c-text-2);
   font-weight: 500;
-  margin-top: 0;;
-  margin-bottom: 16px;
   line-height: 28px;
+  white-space: nowrap;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.tags-scroller {
+  position: relative;
+  max-width: 100%;
+  width: 100%;
+  height: 28px;
+  padding: 8px 0 16px;
+  margin-bottom: 16px;
+  margin-top: 8px;
+  align-items: center;
+
+  --gradient-background: var(--tags-gradient-background, var(--vp-c-bg-elv))
+}
+.horizontal-scroller {
+  overflow-x: scroll;
+  /* Hide Scrollbar */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  scrollbar-width: thin; /* can also be normal, or none, to not render scrollbar */
+  scrollbar-color: currentColor transparent; /* foreground background */
+}
+.horizontal-scroller::-webkit-scrollbar {
+  width: 0;
+  display: none
+}
+
+.horizontal-scroller::-webkit-scrollbar-track {
+  background: transparent
+}
+
+.horizontal-scroller::-webkit-scrollbar-thumb {
+  background: transparent;
+  border: none
+}
+
+
+.tags-scroller::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  width: 32px;
+  height: 100%;
+  /* Background Gradient left to right */
+  background: linear-gradient(to right, rgba(255,255,255,0) 0%,var(--gradient-background) 100%);
+  right: 0;
+  pointer-events: none;
 }
 
 .buttons {

docs/.vitepress/theme/components/icons/IconItem.vue

@@ -2,13 +2,17 @@
 import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
 import { useMediaQuery } from '@vueuse/core';
 import { useRouter } from 'vitepress';
+import getSVGIcon from '../../utils/getSVGIcon';
+import useConfetti from '../../composables/useConfetti';
+import Tooltip from '../base/Tooltip.vue';
+
+const downloadText = 'Download!'
+const copiedText = 'Copied!'
 
 export type IconNode = [elementName: string, attrs: Record<string, string>][]
 
 const props = defineProps<{
   name: string;
-  // tags: string[];
-  // categories: string[];
   iconNode: IconNode;
   active: boolean;
   customizable?: boolean;
@@ -20,40 +24,65 @@ const emit = defineEmits(['setActiveIcon'])
 
 const { go } = useRouter()
 const showOverlay = useMediaQuery('(min-width: 860px)');
+const { animate, confetti, confettiText } = useConfetti()
+
 
 const icon = createLucideIcon(props.name, props.iconNode)
 
-function navigateToIcon() {
+async function navigateToIcon(event) {
+
+  if (event.shiftKey) {
+    event.preventDefault()
+    const svgString = getSVGIcon(event.target.firstChild, {
+      class: `lucide lucide-${props.name}`,
+    })
+
+    await navigator.clipboard.writeText(svgString)
+
+    confettiText.value = copiedText
+    confetti()
+    return
+  }
+
   if(props.overlayMode && showOverlay.value) {
+    event.preventDefault()
     window.history.pushState({}, '', `/icons/${props.name}`)
     emit('setActiveIcon', props.name)
   }
   else {
+    event.preventDefault()
     go(`/icons/${props.name}`)
   }
 }
 </script>
 
 <template>
-  <button
+  <Tooltip :title="name">
-    class="icon-button"
+    <a
+      class="icon-button confetti-button vp-raw"
       @click="navigateToIcon"
-    :class="{ 'active' : active }"
+      :class="{ active, animate }"
-    :data-title="name"
       :aria-label="name"
       :href="`/icons/${props.name}`"
+      :data-confetti-text="confettiText"
+      ref="ref"
     >
       <KeepAlive>
         <component
           v-if="!hideIcon"
           :is="icon"
           class="lucide-icon"
-        :class="{ customizable }"
+          :class="{
+            customizable,
+          }"
         />
       </KeepAlive>
-  </button>
+    </a>
+  </Tooltip>
 </template>
 
+<style src="./confetti.css" />
+
 <style scoped>
 .icon-button {
   display: inline-block;
@@ -72,35 +101,13 @@ function navigateToIcon() {
   color: var(--vp-c-text-1);
 }
 
-.icon-button:hover:before {
+.confetti-button:before,
-  opacity: 1;
+.confetti-button:after {
-  transform: translate(-50%, 48px) scale(1);
+  z-index: 100;
 }
 
-.icon-button:before {
+.confetti-button:before {
-  content: attr(data-title);
+  line-height: 80px;
-  display: block;
-  font-size: 12px;
-  line-height: 20px;
-  margin-left: 27px;
-  transform: translate(-50%, 48px) scale(0.9);
-  font-weight: 400;
-  position: absolute;
-  background: var(--vp-c-brand-dark);
-  color: white;
-  z-index: 10;
-  white-space: nowrap;
-  padding: 2px 8px;
-  border-radius: 4px;
-  box-shadow: var(--vp-shadow-1);
-  opacity: 0;
-  pointer-events: none;
-  transition: cubic-bezier(0.19, 1, 0.22, 1) .2s;
-  transition-property: opacity, transform;
-  /* max-width: calc((32px * 2) + 56px); */
-  overflow: hidden;
-  white-space: pre-wrap;
-  word-break: break-word;
 }
 
 .icon-button:active {
@@ -139,6 +146,7 @@ function navigateToIcon() {
 
 .lucide-icon {
   margin: auto;
+  pointer-events: none;
 }
 .lucide-icon.customizable {
   will-change: width, height, stroke-width, stroke;

docs/.vitepress/theme/components/icons/IconsCategoryOverview.vue

@@ -6,6 +6,9 @@ import InputSearch from '../base/InputSearch.vue'
 import useSearchInput from '../../composables/useSearchInput'
 import StickyBar from './StickyBar.vue'
 import IconsCategory from './IconsCategory.vue'
+import { useFetch } from '@vueuse/core'
+import useFetchTags from '../../composables/useFetchTags'
+import useFetchCategories from '../../composables/useFetchCategories'
 
 const props = defineProps<{
   icons: IconEntity[]
@@ -22,7 +25,26 @@ function setActiveIconName(name: string) {
   activeIconName.value = name
 }
 
-const searchResults = useSearch(searchQuery, props.icons, [
+const { execute: fetchTags, data: tags } = useFetchTags()
+const { execute: fetchCategories, data: categoriesMap } = useFetchCategories()
+
+const mappedIcons = computed(() => {
+  if(tags.value == null) {
+    return props.icons
+  }
+  return props.icons.map((icon) => {
+    const iconTags = tags.value[icon.name]
+    const iconCategories = categoriesMap.value?.[icon.name] ?? []
+
+    return {
+      ...icon,
+      tags: iconTags,
+      categories: iconCategories,
+    }
+  })
+})
+
+const searchResults = useSearch(searchQuery, mappedIcons, [
   { name: 'name', weight: 2 },
   { name: 'tags', weight: 1 },
 ])
@@ -37,7 +59,6 @@ const categories = computed(() => {
       return iconCategories?.includes(name)
     })
 
-
     const searchedCategoryIcons = isSearching
       ? categoryIcons.filter(icon => searchResults.value.some((item) => item?.name === icon?.name))
       : categoryIcons;
@@ -51,9 +72,14 @@ const categories = computed(() => {
   .filter(({ icons }) => icons.length)
 })
 
-const activeIcon = computed(() =>
+function onFocusSearchInput() {
-  props.icons?.find((icon) => icon.name === activeIconName.value)
+  if (tags.value == null) {
-)
+    fetchTags()
+  }
+  if (categoriesMap.value == null) {
+    fetchCategories()
+  }
+}
 
 const NoResults = defineAsyncComponent(() =>
   import('./NoResults.vue')
@@ -71,6 +97,7 @@ const IconDetailOverlay = defineAsyncComponent(() =>
       v-model="searchQuery"
       class="input-wrapper"
       ref="searchInput"
+      @focus="onFocusSearchInput"
     />
   </StickyBar>
   <NoResults
@@ -87,7 +114,7 @@ const IconDetailOverlay = defineAsyncComponent(() =>
   />
   <IconDetailOverlay
     v-if="activeIconName != null"
-    :icon="activeIcon"
+    :iconName="activeIconName"
     @close="setActiveIconName('')"
   />
 </template>

docs/.vitepress/theme/components/icons/IconsOverview.vue

@@ -8,6 +8,8 @@ import useSearch from '../../composables/useSearch'
 import EndOfPage from '../base/EndOfPage.vue'
 import useSearchInput from '../../composables/useSearchInput'
 import StickyBar from './StickyBar.vue'
+import useFetchTags from '../../composables/useFetchTags'
+import useFetchCategories from '../../composables/useFetchCategories'
 
 const props = defineProps<{
   icons: IconEntity[]
@@ -22,7 +24,7 @@ const isSmallScreen = useMediaQuery('(min-width: 640px)');
 
 const pageSize = computed(() => {
   if(isExtraLargeScreen.value) {
-    return 16 * 16;
+    return 16 * 20;
   }
   if(isLargeScreen.value) {
     return 16 * 12;
@@ -38,8 +40,28 @@ const pageSize = computed(() => {
   return 10 * 5;
 })
 
+const { execute: fetchTags, data: tags } = useFetchTags()
+const { execute: fetchCategories, data: categories } = useFetchCategories()
+
+const mappedIcons = computed(() => {
+  if(tags.value == null) {
+    return props.icons
+  }
+
+  return props.icons.map((icon) => {
+    const iconTags = tags.value[icon.name]
+    const iconCategories = categories.value?.[icon.name] ?? []
+
+    return {
+      ...icon,
+      tags: iconTags,
+      categories: iconCategories,
+    }
+  })
+})
+
 const { searchInput, searchQuery, searchQueryThrottled } = useSearchInput()
-const searchResults = useSearch(searchQueryThrottled, props.icons, [
+const searchResults = useSearch(searchQueryThrottled, mappedIcons, [
   { name: 'name', weight: 3 },
   { name: 'tags', weight: 2 },
   { name: 'categories', weight: 1 },
@@ -58,12 +80,19 @@ function setActiveIconName(name: string) {
   activeIconName.value = name
 }
 
-const activeIcon = computed(() => props.icons.find((icon) => icon.name === activeIconName.value))
-
 watch(searchQueryThrottled, (searchString) => {
   currentPage.value = 1
 })
 
+function onFocusSearchInput() {
+  if (tags.value == null) {
+    fetchTags()
+  }
+  if (categories.value == null) {
+    fetchCategories()
+  }
+}
+
 const NoResults = defineAsyncComponent(() =>
   import('./NoResults.vue')
 )
@@ -81,6 +110,7 @@ const IconDetailOverlay = defineAsyncComponent(() =>
       v-model="searchQuery"
       ref="searchInput"
       class="input-wrapper"
+      @focus="onFocusSearchInput"
     />
   </StickyBar>
   <NoResults
@@ -97,7 +127,7 @@ const IconDetailOverlay = defineAsyncComponent(() =>
   <EndOfPage @end-of-page="next" class="bottom-page"/>
   <IconDetailOverlay
     v-if="activeIconName != null"
-    :icon="activeIcon"
+    :iconName="activeIconName"
     @close="setActiveIconName('')"
   />
 </template>

docs/.vitepress/theme/components/icons/NoResults.vue

@@ -32,8 +32,8 @@ useEventListener(document, 'mousemove', (mouseEvent) => {
       No icons found for '{{ searchQuery }}'
     </h2>
     <VPButton text="Clear your search and try again" theme="alt" @click="$emit('clear')"/>
-    or
+    <span class="text-divider">or</span>
-    <VPButton text="Check if someone has already requested this icon"
+    <VPButton text="Search on Github issues"
               theme="alt"
               :href="`https://github.com/lucide-icons/lucide/issues?q=is%3Aopen+${searchQuery}`"
               target="_blank"
@@ -74,4 +74,10 @@ useEventListener(document, 'mousemove', (mouseEvent) => {
   margin-bottom: 32px;
   text-align: center;
 }
+
+.text-divider {
+  margin: 12px 0;
+  font-size: 16px;
+  color: var(--vp-c-neutral);
+}
 </style>

docs/.vitepress/theme/components/icons/SidebarIconCustomizer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { shallowRef, type Ref, watch } from 'vue'
+import { shallowRef, type Ref, watch, computed } from 'vue'
 import { useCssVar, syncRef } from '@vueuse/core'
-import { useIconStyleContext } from '../../composables/useIconStyle'
+import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle'
 import RangeSlider from '../base/RangeSlider.vue'
 import InputField from '../base/InputField.vue'
 import ColorPicker from '../base/ColorPicker.vue'
@@ -19,7 +19,7 @@ const colorCssVar = useCssVar(
   '--customize-color',
   props.rootEl?.value ?? documentRef.value,
   {
-    initialValue: 'default'
+    initialValue: `${STYLE_DEFAULTS.color}`
   }
 )
 
@@ -27,7 +27,7 @@ const strokeWidthCssVar = useCssVar(
   '--customize-strokeWidth',
   props.rootEl?.value ?? documentRef.value,
   {
-    initialValue: '2'
+    initialValue: `${STYLE_DEFAULTS.strokeWidth}`
   }
 )
 
@@ -35,7 +35,7 @@ const sizeCssVar = useCssVar(
   '--customize-size',
   props.rootEl?.value ?? documentRef.value,
   {
-    initialValue: '24'
+    initialValue: `${STYLE_DEFAULTS.size}`
   }
 )
 
@@ -44,9 +44,9 @@ syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' })
 syncRef(size, sizeCssVar, { direction: 'ltr' })
 
 function resetStyle () {
-  color.value = 'currentColor'
+  color.value = STYLE_DEFAULTS.color
-  strokeWidth.value = 2
+  strokeWidth.value = STYLE_DEFAULTS.strokeWidth
-  size.value = 24
+  size.value = STYLE_DEFAULTS.size
 }
 
 watch(absoluteStrokeWidth, (enabled) => {
@@ -54,10 +54,18 @@ watch(absoluteStrokeWidth, (enabled) => {
 
   htmlEl.classList.toggle('absolute-stroke-width', enabled)
 })
+
+const customizingActive = computed(() => {
+  return color.value !== STYLE_DEFAULTS.color
+    || strokeWidth.value !== STYLE_DEFAULTS.strokeWidth
+    || size.value !== STYLE_DEFAULTS.size
+})
+
+
 </script>
 
 <template>
-  <div class="customizer-card">
+  <div class="customizer-card" :class="{ customized: customizingActive }">
     <div class="card-header">
       <h2 class="card-title">
         Customizer
@@ -142,6 +150,12 @@ watch(absoluteStrokeWidth, (enabled) => {
   margin-bottom: 24px;
   position: relative;
   z-index: 0;
+  border: 1px solid transparent;
+  transition: border-color .4s ease-in-out;
+}
+
+.customizer-card.customized {
+  border-color: var(--vp-c-brand);
 }
 
 .color-picker {

docs/.vitepress/theme/composables/useConfetti.ts

@@ -2,6 +2,7 @@ import { ref } from "vue";
 
 export default function useConfetti() {
   const animate = ref(false)
+  const confettiText = ref('confetti!')
 
   function confetti() {
     animate.value = true;
@@ -13,6 +14,7 @@ export default function useConfetti() {
 
   return {
     animate,
-    confetti
+    confetti,
+    confettiText
   }
 }

docs/.vitepress/theme/composables/useFetchCategories.ts

@@ -0,0 +1,12 @@
+import { useFetch } from "@vueuse/core"
+
+const useFetchCategories = () => useFetch<Record<string, string[]>>(
+  `${import.meta.env.DEV ? 'http://localhost:3000' : ''}/api/categories`,
+  {
+    immediate:
+      typeof window !== 'undefined'
+      && new URLSearchParams(window.location.search).has('search'),
+  }
+).json()
+
+export default useFetchCategories

docs/.vitepress/theme/composables/useFetchTags.ts

@@ -0,0 +1,12 @@
+import { useFetch } from "@vueuse/core"
+
+const useFetchTags = () => useFetch<Record<string, string[]>>(
+  `${import.meta.env.DEV ? 'http://localhost:3000' : ''}/api/tags`,
+  {
+    immediate:
+      typeof window !== 'undefined'
+      && new URLSearchParams(window.location.search).has('search'),
+  }
+).json()
+
+export default useFetchTags

docs/.vitepress/theme/composables/useIconStyle.ts

@@ -10,8 +10,16 @@ interface IconSizeContext {
   size: Ref<number>
   strokeWidth: Ref<number>
   color: Ref<string>
+  absoluteStrokeWidth: Ref<boolean>
 }
 
+export const STYLE_DEFAULTS = {
+  size: 24,
+  strokeWidth: 2,
+  color: 'currentColor',
+  absoluteStrokeWidth: false,
+};
+
 export const iconStyleContext = {
   size: ref(24),
   strokeWidth: ref(2),

docs/.vitepress/theme/composables/useSearch.ts

@@ -1,20 +1,22 @@
 import Fuse from 'fuse.js';
 import { shallowRef, computed, Ref } from 'vue';
 
-const useSearch = <T>(query: Ref<string>, collection: T[], keys: Fuse.FuseOptionKey<T>[] = []) => {
+const useSearch = <T>(query: Ref<string>, collection: Ref<T[]>, keys: Fuse.FuseOptionKey<T>[] = []) => {
   const index = shallowRef(
-    new Fuse(collection, {
+    new Fuse(collection.value, {
       threshold: 0.2,
       keys,
     })
   )
 
   const results = computed(() => {
+    index.value.setCollection(collection.value);
+
     if (query.value) {
       return index.value.search(query.value).map((result) => result.item);
     }
 
-    return collection;
+    return collection.value;
   });
 
   return results;

docs/.vitepress/theme/composables/useSearchInput.ts

@@ -11,12 +11,16 @@ const useSearchInput = () => {
       || ''
       )
   )
-  const searchQueryThrottled = refThrottled(searchQuery, 200)
+  const searchQueryThrottled = refThrottled(searchQuery, 400)
 
   watch(searchQueryThrottled, (searchString) => {
     const newUrl = new URL(window.location.href);
 
+    if(searchString === '') {
+      newUrl.searchParams.delete('search');
+    } else {
       newUrl.searchParams.set('search', searchString);
+    }
 
     nextTick(() => {
       window.history.replaceState({}, '', newUrl)

docs/.vitepress/theme/utils/downloadData.ts

@@ -0,0 +1,6 @@
+export default function downloadData(filename:string, data:string) {
+  const link = document.createElement('a');
+  link.download = filename;
+  link.href = data
+  link.click();
+}

docs/.vitepress/theme/utils/getSVGIcon.ts

@@ -0,0 +1,34 @@
+const allowedAttrs = [
+  'xmlns',
+  'width',
+  'height',
+  'viewBox',
+  'fill',
+  'stroke',
+  'stroke-width',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'class',
+]
+
+export default function getSVGIcon(element?: HTMLElement, attrs?: Record<string, string>) {
+  const svg = element ?? document.querySelector('#previewer svg')
+  if (!svg) return
+
+  const clonedSvg = svg.cloneNode(true) as SVGElement
+
+  // Filter out attributes that are not allowed in SVGs
+  for (const attr of Array.from(clonedSvg.attributes)) {
+    if (!allowedAttrs.includes(attr.name)) {
+      clonedSvg.removeAttribute(attr.name)
+    }
+  }
+
+  for (const [key, value] of Object.entries(attrs ?? {})) {
+    clonedSvg.setAttribute(key, value)
+  }
+
+  const svgString = new XMLSerializer().serializeToString(clonedSvg)
+
+  return svgString
+}

docs/guide/installation.md

@@ -28,7 +28,7 @@ For more details, see the [documentation](packages/lucide.md).
 
 ## React
 
-Implementation of the lucide icon library for react applications.
+Implementation of the lucide icon library for React applications.
 
 ::: code-group
 
@@ -47,84 +47,138 @@ npm install lucide-react
 :::
 
 For more details, see the [documentation](packages/lucide-react.md).
+For React Native use the `lucide-react-native` package.
 
-## Vue 2
+## Vue
 
-Implementation of the lucide icon library for vue applications.
+Implementation of the lucide icon library for Vue applications.
 
-```bash
+::: code-group
-yarn add lucide-vue
+
+```sh [pnpm]
+pnpm install lucide-vue-next
 ```
 
-or
+```sh [yarn]
-
-```sh
-npm install lucide-vue
-```
-
-For more details, see the [documentation](packages/lucide-vue.md).
-
-## Vue 3
-
-Implementation of the lucide icon library for vue applications.
-
-```bash
 yarn add lucide-vue-next
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-vue-next
 ```
 
+:::
+
 For more details, see the [documentation](packages/lucide-vue-next.md).
+For Vue 2 use the `lucide-vue` package.
 
 ## Svelte
 
-Implementation of the lucide icon library for vue applications.
+Implementation of the lucide icon library for Svelte applications.
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-svelte
+```
+
+```sh [yarn]
 yarn add lucide-svelte
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-svelte
 ```
 
+:::
+
 For more details, see the [documentation](packages/lucide-svelte.md).
 
+## Solid
+
+Implementation of the lucide icon library for Solid applications.
+
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-solid
+```
+
+```sh [yarn]
+yarn add lucide-solid
+```
+
+```sh [npm]
+npm install lucide-solid
+```
+
+:::
+
+For more details, see the [documentation](packages/lucide-solid.md).
+
 ## Angular
 
-```bash
+Implementation of the lucide icon library for Angular applications.
+
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-angular
+```
+
+```sh [yarn]
 yarn add lucide-angular
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-angular
 ```
 
+:::
+
 For more details, see the [documentation](packages/lucide-angular.md).
 
 ## Preact
 
 Implementation of the lucide icon library for preact applications.
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-preact
+```
+
+```sh [yarn]
 yarn add lucide-preact
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-preact
 ```
 
-For more details, see the [documentation](packages/lucide-preact.md).
+:::
+
+## Static usage
+
+Implementation of the lucide icon library for multiple usages that like to use: SVG files icons, SVG Sprite, Icon Fonts and static SVG strings export in Common JS modules (for NodeJS).
+
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-static
+```
+
+```sh [yarn]
+yarn add lucide-static
+```
+
+```sh [npm]
+npm install lucide-static
+```
+
+:::
+
+For more details, see the [documentation](packages/lucide-static.md).
 
 ## Figma
 
@@ -134,16 +188,6 @@ Visit [Figma community page](https://www.figma.com/community/plugin/939567362549
 
 ![Setting Page Size](https://www.figma.com/community/plugin/939567362549682242/thumbnail 'Figma Lucide Cover')
 
-## Laravel
-
-Implementation of Lucide icon's using `blade-icons` for Laravel based projects.
-
-```bash
-composer require mallardduck/blade-lucide-icons
-```
-
-For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
-
 ## Flutter
 
 Implementation of Lucide icon library for Flutter applications.

docs/guide/packages/lucide-angular.md

@@ -4,16 +4,22 @@ Implementation of the lucide icon library for Angular applications.
 
 ## Installation
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-angular
+```
+
+```sh [yarn]
 yarn add lucide-angular
 ```
 
-or
+```sh [npm]
-
-```bash
 npm install lucide-angular
 ```
 
+:::
+
 ## How to use
 
 ### Step 1: Import `LucideAngularModule`
@@ -98,7 +104,9 @@ To add custom icons, you will first need to convert them to an [svgson format](h
 
 ## 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.
+::: danger
+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';

docs/guide/packages/lucide-preact.md

@@ -8,28 +8,34 @@ Implementation of the lucide icon library for preact applications.
 
 ## Installation
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-preact
+```
+
+```sh [yarn]
 yarn add lucide-preact
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-preact
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
+It's build with ES Modules so it's completely tree-shakable.
-Each icon can be imported as a preact component.
+
+Each icon can be imported as a Preact component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```js
+```jsx
 import { Camera } from 'lucide-preact';
-// Returns PreactComponent
 
 // Usage
 const App = () => {
@@ -39,7 +45,7 @@ const App = () => {
 export default App;
 ```
 
-### Props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -48,29 +54,31 @@ export default App;
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
 
-### Custom props / svg attributes
+### Applying props
 
-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.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-```js
+```jsx
 // Usage
 const App = () => {
   return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
-> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
+> SVG attributes in Preact aren't transformed, so if you want to change for example the `stroke-linejoin` you need to pass it in kebabcase. Basically how the SVG spec want you to write it. See this topic in the [Preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
-```js
+```jsx
-import * as icons from 'lucide-preact';
+import { icons } from 'lucide-preact';
 
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
@@ -80,3 +88,15 @@ const Icon = ({ name, color, size }) => {
 
 export default Icon;
 ```
+
+#### Using the Icon Component
+
+```jsx
+import Icon from './Icon';
+
+const App = () => {
+  return <Icon name="home" />;
+};
+
+export default App;
+```

docs/guide/packages/lucide-react-native.md

@@ -6,28 +6,32 @@ Implementation of the lucide icon library for React Native applications
 
 First, ensure that you have `react-native-svg@^12.0.0` installed. Then, install the package:
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-react-native
+```
+
+```sh [yarn]
 yarn add lucide-react-native
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-react-native
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
+Each icon can be imported as a React component.
-Each icon can be imported as a react component.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```js
+```jsx
 import { Camera } from 'lucide-react-native';
-// Returns ReactComponent
 
 // Usage
 const App = () => {
@@ -37,7 +41,7 @@ const App = () => {
 export default App;
 ```
 
-### Props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -46,27 +50,29 @@ export default App;
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
 
-### Custom props
+### Applying props
 
-You can also pass custom props that will be added in the svg as attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component.
 
-```js
+```jsx
 // Usage
 const App = () => {
   return <Camera fill="red" />;
 };
 ```
 
-### One generic icon component
+## 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.
+::: warning
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
-```js
+```jsx
-import * as icons from 'lucide-react';
+import { icons } from 'lucide-react';
 
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
@@ -76,3 +82,15 @@ const Icon = ({ name, color, size }) => {
 
 export default Icon;
 ```
+
+#### Using the Icon Component
+
+```jsx
+import Icon from './Icon';
+
+const App = () => {
+  return <Icon name="home" />;
+};
+
+export default App;
+```

docs/guide/packages/lucide-react.md

@@ -4,28 +4,34 @@ Implementation of the lucide icon library for react applications
 
 ## Installation
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-react
+```
+
+```sh [yarn]
 yarn add lucide-react
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-react
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
+It's build with ES Modules so it's completely tree-shakable.
-Each icon can be imported as a react component.
+
+Each icon can be imported as a React component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```js
+```jsx
 import { Camera } from 'lucide-react';
-// Returns ReactComponent
 
 // Usage
 const App = () => {
@@ -35,7 +41,7 @@ const App = () => {
 export default App;
 ```
 
-### Props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -44,27 +50,31 @@ export default App;
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
 
-### Custom props
+### Applying props
 
-You can also pass custom props that will be added in the svg as attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-```js
+```jsx
 // Usage
 const App = () => {
-  return <Camera fill="red" />;
+  return <Camera size={48} fill="red" />;
 };
 ```
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
 
-#### Icon Component Example
+This is not the case for the latest NextJS, because it uses server side rendering. The icons will be streamed to the client when needed. For NextJS with Dynamic Imports, see [dynamic imports](#nextjs-example) section for more information.
+:::
 
-```js
+### Icon Component Example
-import * as icons from 'lucide-react';
+
+```jsx
+import { icons } from 'lucide-react';
 
 const Icon = ({ name, color, size }) => {
   const LucideIcon = icons[name];
@@ -74,3 +84,72 @@ const Icon = ({ name, color, size }) => {
 
 export default Icon;
 ```
+
+#### Using the Icon Component
+
+```jsx
+import Icon from './Icon';
+
+const App = () => {
+  return <Icon name="Home" />;
+};
+
+export default App;
+```
+
+#### With Dynamic Imports
+
+> :warning: This is experimental and only works with bundlers that support dynamic imports.
+
+Lucide react exports a dynamic import map `dynamicIconImports`. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database.
+
+When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size.
+
+The keys of the dynamic import map are the lucide original icon names (kebab case).
+
+Example with React suspense:
+
+```tsx
+import React, { lazy, Suspense } from 'react';
+import { dynamicIconImports, LucideProps } from 'lucide-react';
+
+const fallback = <div style={{ background: '#ddd', width: 24, height: 24 }}/>
+
+interface IconProps extends Omit<LucideProps, 'ref'> {
+  name: keyof typeof dynamicIconImports;
+}
+
+const Icon = ({ name, ...props }: IconProps) => {
+  const LucideIcon = lazy(dynamicIconImports[name]);
+
+  return (
+    <Suspense fallback={fallback}>
+      <LucideIcon {...props} />
+    </Suspense>
+  );
+}
+
+export default Icon
+```
+
+##### NextJS Example
+
+In NextJS [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to load the icon component dynamically.
+
+```tsx
+import dynamic from 'next/dynamic'
+import { LucideProps } from 'lucide-react';
+import dynamicIconImports from 'lucide-react/dynamicIconImports';
+
+interface IconProps extends LucideProps {
+  name: keyof typeof dynamicIconImports;
+}
+
+const Icon = ({ name, ...props }: IconProps) => {
+  const LucideIcon = dynamic(dynamicIconImports[name])
+
+  return <LucideIcon {...props} />;
+};
+
+export default Icon;
+```

docs/guide/packages/lucide-solid.md

@@ -4,28 +4,34 @@ Implementation of the lucide icon library for solid applications.
 
 ## Installation
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-solid
+```
+
+```sh [yarn]
 yarn add lucide-solid
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-solid
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
+It's build with ES Modules so it's completely tree-shakable.
-Each icon can be imported as a solid component.
+
+Each icon can be imported as a Solid component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```js
+```jsx
 import { Camera } from 'lucide-solid';
-// Returns SolidComponent
 
 // Usage
 const App = () => {
@@ -35,7 +41,7 @@ const App = () => {
 export default App;
 ```
 
-### Props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -44,32 +50,37 @@ export default App;
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
 
-### Custom props / svg attributes
+### Applying props
 
-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.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-```js
+```jsx
 // Usage
 const App = () => {
   return <Camera fill="red" stroke-linejoin="bevel" />;
 };
 ```
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
 ```tsx
-import * as icons from 'lucide-solid';
+import { icons, type LucideProps } 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) => {
+interface IconProps extends LucideProps {
+  name: keyof typeof icons;
+}
+
+const Icon = (props: IconProps) => {
   const [local, others] = splitProps(props, ["name"]);
 
   return <Dynamic component={icons[local.name]} {...others} />
@@ -77,3 +88,15 @@ const Icon = (props: { name: keyof typeof icons } & LucideProps) => {
 
 export default Icon;
 ```
+
+#### Using the Icon Component
+
+```tsx
+import Icon from './Icon';
+
+const App = () => {
+  return <Icon name="home" />;
+};
+
+export default App;
+```

docs/guide/packages/lucide-static.md

@@ -11,22 +11,30 @@ This package include the following lucide implementations:
 
 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.
 
-> ⚠️ 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)
+::: warning
+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 tree-shaking to make sure only the icons you use are bundled with your app. Tree-shaking 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
 
 ## Package Managers
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-static
+```
+
+```sh [yarn]
 yarn add lucide-static
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-static
 ```
 
+:::
+
 ### CDN
 
 ```html

docs/guide/packages/lucide-svelte.md

@@ -4,25 +4,33 @@ Implementation of the lucide icon library for svelte applications.
 
 ## Installation
 
-```bash
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-svelte
+```
+
+```sh [yarn]
 yarn add lucide-svelte
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-svelte
 ```
 
+:::
+
 ## How to use
 
-All the icons are Svelte components, that ouputs Svg elements. So each icon can be imported and used as a component. This also helps with the use of threeshaking so you only import the icons you use.
+It's build with ES Modules so it's completely tree-shakable.
+
+Each icon can be imported as a Svelte component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
 Default usage:
 
-```html
+```svelte
 <script>
   import { Skull } from 'lucide-svelte';
 </script>
@@ -30,9 +38,9 @@ Default usage:
 <Skull />
 ```
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```html
+```svelte
 <script>
   import { Camera } from 'lucide-svelte';
 </script>
@@ -40,7 +48,7 @@ You can pass additional props to adjust the icon.
 <Camera color="#ff3e98" />
 ```
 
-### Available props
+## Props
 
 | name                  | type      | default      |
 | --------------------- | --------- | ------------ |
@@ -48,14 +56,12 @@ You can pass additional props to adjust the icon.
 | `color`               | *string*  | currentColor |
 | `strokeWidth`         | *number*  | 2            |
 | `absoluteStrokeWidth` | *boolean* | false        |
-| `*<SVGProps>`         | *string*  | -            |
 
+### Applying props
 
-\* 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)
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-### Example of custom props
+```svelte
-
-```html
 <script>
   import { Phone } from 'lucide-svelte';
 </script>
@@ -65,15 +71,17 @@ You can pass additional props to adjust the icon.
 
 This results a filled phone icon.
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you bundle your application,the build size will grow strongly. Because it will import all the icons.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
-```html
+```svelte
 <script>
   import * as icons from 'lucide-svelte';
   export let name;
@@ -82,12 +90,13 @@ It is possible to create one generic icon component to load icons.
 <svelte:component this="{icons[name]}" {...$$props} />
 ```
 
-##### Then you can use it like this
+#### Using the Icon Component
 
-```html
+```svelte
 <script>
   import LucideIcon from './LucideIcon';
 </script>
 
 <LucideIcon name="Menu" />
 ```
+

docs/guide/packages/lucide-vue-next.md

@@ -2,32 +2,41 @@
 
 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](lucide-vue)
+## Vue 3 or Vue 2
+
+::: tip
+This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue ->](lucide-vue)
+:::
 
 ## Installation
 
-**With yarn**
+::: code-group
 
-```bash
+```sh [pnpm]
+pnpm install lucide-vue-next
+```
+
+```sh [yarn]
 yarn add lucide-vue-next
 ```
 
-**With npm**
+```sh [npm]
-
-```bash
 npm install lucide-vue-next
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
+It's build with ES Modules so it's completely tree-shakable.
-Each icon can be imported as a vue component.
+
+Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
 You can pass additional props to adjust the icon.
 
-``` html
+```vue
 <template>
   <Camera
     color="red"
@@ -40,7 +49,7 @@ import { Camera } from 'lucide-vue-next';
 </script>
 ```
 
-### Props
+## Props
 
 |  name                   |   type    |  default     |
 | ----------------------- | --------- | ------------ |
@@ -50,34 +59,27 @@ import { Camera } from 'lucide-vue-next';
 | `absolute-stroke-width` | *boolean* | false        |
 | `default-class`         | *string*  | lucide-icon  |
 
-### Custom props
+### Applying props
 
-You can also pass custom props that will be added in the svg as attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-``` html
+```vue
 <template>
   <Camera fill="red" />
 </template>
 ```
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
-
-``` html
-<template>
-  <component
-    :is="icon"
-    :size="size"
-    :color="color"
-    :stroke-width="strokeWidth" :default-class="defaultClass"
-  />
-</template>
 
+```vue
 <script setup>
 import { computed } from 'vue';
 import * as icons from "lucide-vue-next";
@@ -95,15 +97,25 @@ const props = defineProps({
 
 const icon = computed(() => icons[props.name]);
 </script>
+
+<template>
+  <component
+    :is="icon"
+    :size="size"
+    :color="color"
+    :stroke-width="strokeWidth" :default-class="defaultClass"
+  />
+</template>
 ```
 
-##### Then you can use it like this
+### Using the Icon Component
 
-``` html
+All other props listed above also work on the `Icon` Component.
+
+```vue
 <template>
   <div id="app">
     <Icon name="Airplay" />
   </div>
 </template>
 ```
-All other props listed above also work on the `Icon` Component.

docs/guide/packages/lucide-vue.md

@@ -2,36 +2,46 @@
 
 Implementation of the lucide icon library for Vue applications.
 
-> ⚠️ This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](lucide-vue-next)
+## Vue 2 or Vue 3
+
+::: tip
+This version of lucide is for Vue 2, For Vue 3 go to [lucide-vue-next ->](lucide-vue-next)
+:::
 
 ## Installation
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide-vue
+```
+
+```sh [yarn]
 yarn add lucide-vue
 ```
 
-or
+```sh [npm]
-
-```sh
 npm install lucide-vue
 ```
 
+:::
+
 ## How to use
 
-It's build with ESmodules so it's completely tree-shakable.
+It's build with ES Modules so it's completely tree-shakable.
-Each icon can be imported as a vue component.
+
+Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
 
 ### Example
 
-You can pass additional props to adjust the icon.
+Additional props can be passed to adjust the icon:
 
-```html
+```vue
 <template>
   <Camera color="red" :size="32" />
 </template>
 
 <script>
-  // Returns Vue component
   import { Camera } from 'lucide-vue';
 
   export default {
@@ -41,7 +51,7 @@ You can pass additional props to adjust the icon.
 </script>
 ```
 
-### Props
+## Props
 
 |  name                   |   type    |  default     |
 | ----------------------- | --------- | ------------ |
@@ -51,25 +61,27 @@ You can pass additional props to adjust the icon.
 | `absolute-stroke-width` | *boolean* | false        |
 | `default-class`         | *string*  | lucide-icon  |
 
-### Custom props
+### Applying props
 
-You can also pass custom props that will be added in the svg as attributes.
+To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
 
-```html
+```vue
 <template>
   <Camera fill="red" />
 </template>
 ```
 
-### One generic icon component
+## One generic icon component
 
-It is possible to create one generic icon component to load icons.
+It is possible to create one generic icon component to load icons. It's not recommended.
 
-> ⚠️ Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly.
+::: danger
+Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
+:::
 
-#### Icon Component Example
+### Icon Component Example
 
-```html
+```vue
 <template>
   <component :is="icon" />
 </template>
@@ -93,9 +105,9 @@ It is possible to create one generic icon component to load icons.
 </script>
 ```
 
-##### Then you can use it like this
+#### Using the Icon Component
 
-```html
+```vue
 <template>
   <div id="app">
     <Icon name="Airplay" />

docs/guide/packages/lucide.md

@@ -6,15 +6,21 @@ Implementation of the lucide icon library for web applications.
 
 ### Package Managers
 
-```sh
+::: code-group
+
+```sh [pnpm]
+pnpm install lucide
+```
+
+```sh [yarn]
+yarn add lucide
+```
+
+```sh [npm]
 npm install lucide
 ```
 
-or
+:::
-
-```sh
-yarn add lucide
-```
 
 ### CDN
 
@@ -35,9 +41,9 @@ Here is a complete example with unpkg
 ```html
 <!DOCTYPE html>
 <body>
-  <i icon-name="volume-2" class="my-class"></i>
+  <i data-lucide="volume-2" class="my-class"></i>
-  <i icon-name="x"></i>
+  <i data-lucide="x"></i>
-  <i icon-name="menu"></i>
+  <i data-lucide="menu"></i>
 
   <script src="https://unpkg.com/lucide@latest"></script>
   <script>
@@ -49,11 +55,11 @@ Here is a complete example with unpkg
 ### With ESModules
 
 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.
+The `createIcons` function will search for HTMLElements with the attribute `data-lucide` and replace it with the svg from the given icon name.
 
 ```html
 <!-- Your HTML file -->
-<i icon-name="menu"></i>
+<i data-lucide="menu"></i>
 ```
 
 ```js
@@ -74,7 +80,9 @@ createIcons({
 });
 ```
 
-#### Additional Options
+## Advanced Usage
+
+### Additional Options
 
 In the `createIcons` function you can pass some extra parameters to adjust the `nameAttr` or add custom attributes like for example classes.
 
@@ -89,11 +97,11 @@ createIcons({
     'stroke-width': 1,
     stroke: '#333'
   },
-  nameAttr: 'icon-name' // attribute for the icon name.
+  nameAttr: 'data-lucide' // attribute for the icon name.
 });
 ```
 
-#### Treeshake the library, only use the icons you use
+### Treeshake the library, only use the icons you use
 
 ```js
 import { createIcons, Menu, ArrowRight, Globe } from 'lucide';
@@ -107,7 +115,7 @@ createIcons({
 });
 ```
 
-#### Custom Element binding
+### Custom Element binding
 
 ```js
 import { createElement, Menu } from 'lucide';

docs/icons/[name].md

@@ -41,47 +41,47 @@ const codeExample = computed(() => data.codeExamples?.map(
   <div :class="$style.iconPreviews">
     <IconPreview
       id="previewer"
-      :name="$params.name"
+      :name="params.name"
-      :iconNode="$params.iconNode"
+      :iconNode="params.iconNode"
       :class="$style.preview"
     />
     <IconPreviewSmall
-      :name="$params.name"
+      :name="params.name"
-      :iconNode="$params.iconNode"
+      :iconNode="params.iconNode"
        :class="$style.smallPreview"
     />
   </div>
   <div >
     <div :class="$style.info">
-      <IconInfo :icon="$params" />
+      <IconInfo :icon="params" />
       <div :class="$style.meta">
         <div
-          v-if="$params.createdRelease?.version"
+          v-if="params.createdRelease?.version"
           :class="$style.version"
         >
           <Label>Created:</Label>
           <Badge
-            :href="`https://github.com/lucide-icons/lucide/releases/tag/v${$params.createdRelease.version}`"
+            :href="`https://github.com/lucide-icons/lucide/releases/tag/v${params.createdRelease.version}`"
             target="_blank"
             rel="noreferrer noopener"
           >
-            v{{$params.createdRelease.version}}
+            v{{params.createdRelease.version}}
           </Badge>
         </div>
         <div
-          v-if="$params.changedRelease?.version"
+          v-if="params.changedRelease?.version"
           :class="$style.version"
         >
           <Label>Last changed:</Label>
           <Badge
-            :href="`https://github.com/lucide-icons/lucide/releases/tag/v${$params.changedRelease.version}`"
+            :href="`https://github.com/lucide-icons/lucide/releases/tag/v${params.changedRelease.version}`"
             target="_blank"
             rel="noreferrer noopener"
           >
-            v{{$params.changedRelease.version}}
+            v{{params.changedRelease.version}}
           </Badge>
         </div>
-        <IconContributors :icon="$params" :class="$style.contributors"/>
+        <IconContributors :icon="params" :class="$style.contributors"/>
       </div>
     </div>
     <CodeGroup
@@ -97,7 +97,7 @@ const codeExample = computed(() => data.codeExamples?.map(
   </div>
 </div>
 
-<RelatedIcons :icons="$params.relatedIcons" />
+<RelatedIcons :icons="params.relatedIcons" />
 
 <style module>
   .preview {
@@ -117,6 +117,10 @@ const codeExample = computed(() => data.codeExamples?.map(
     margin-top: 24px;
   }
 
+  .info {
+    --tags-gradient-background: var(--vp-c-bg);
+  }
+
   .version, .contributors {
     display: flex;
     flex-wrap: wrap;

docs/icons/[name].paths.ts

@@ -1,18 +1,18 @@
-import { getAllData } from "../.vitepress/lib/icons";
 import relatedIcons from '../.vitepress/data/relatedIcons.json'
 import iconNodes from '../.vitepress/data/iconNodes'
+import * as iconDetails from '../.vitepress/data/iconDetails'
+import { IconEntity } from "../.vitepress/theme/types";
 
 export default {
   paths: async () => {
-    const icons = await getAllData()
+    return (Object.values(iconDetails) as unknown as IconEntity[]).map((iconEntity) => {
-    return icons.map((iconEntity) => {
 
       const params = {
         ...iconEntity,
         relatedIcons: relatedIcons[iconEntity.name].map((name: string) => ({
           name,
           iconNode: iconNodes[name],
-        })),
+        }))
       }
 
       return {

docs/icons/icons.data.ts

@@ -1,9 +1,9 @@
-import { getAllData } from '../.vitepress/lib/icons'
+import iconNodes from '../.vitepress/data/iconNodes'
 
 export default {
   async load() {
     return {
-      icons: await getAllData(),
+      icons: Object.entries(iconNodes).map(([name, iconNode]) => ({ name, iconNode })),
     }
   }
 }

docs/package.json

@@ -13,6 +13,7 @@
     "prebuild:metaJson": "node ../scripts/writeIconMetaIndex.mjs",
     "prebuild:releaseJson": "node ../scripts/writeReleaseMetadata.mjs",
     "prebuild:relatedIcons": "node ../scripts/writeIconRelatedIcons.mjs",
+    "prebuild:iconDetails": "node ../scripts/writeIconDetails.mjs",
     "postbuild:vercelJson": "node ../scripts/writeVercelOutput.mjs",
     "dev": "npx nitropack dev",
     "build:api": "npx nitropack build",
@@ -29,6 +30,7 @@
     "vitepress": "1.0.0-beta.1"
   },
   "dependencies": {
+    "@floating-ui/vue": "^1.0.1",
     "@headlessui/vue": "^1.7.13",
     "@vueuse/components": "^10.1.0",
     "@vueuse/core": "^10.1.0",
@@ -42,7 +44,7 @@
     "lucide-vue-next": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "semver": "^7.5.0",
+    "semver": "^7.5.2",
     "shiki": "^0.14.2",
     "shiki-processor": "^0.1.3",
     "simple-git": "^3.18.0",

docs/vercel.json

@@ -29,7 +29,7 @@
       "has": [
         {
           "type": "query",
-          "key": "page"
+          "key": "search"
         }
       ],
       "destination": "/icons",

icons/alert-triangle.json

@@ -10,10 +10,12 @@
     "warning",
     "alert",
     "danger",
-    "exclamation mark"
+    "exclamation mark",
+    "linter"
   ],
   "categories": [
     "notifications",
-    "shapes"
+    "shapes",
+    "development"
   ]
 }

icons/alert-triangle.svg

@@ -10,6 +10,6 @@
   stroke-linejoin="round"
 >
   <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
-  <line x1="12" x2="12" y1="9" y2="13" />
+  <path d="M12 9v4" />
-  <line x1="12" x2="12.01" y1="17" y2="17" />
+  <path d="M12 17h.01" />
 </svg>

icons/antenna.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "signal",
+    "connection",
+    "connectivity",
+    "tv",
+    "television",
+    "broadcast",
+    "live",
+    "frequency",
+    "tune",
+    "scan",
+    "channels",
+    "aerial",
+    "receiver",
+    "transmission",
+    "transducer",
+    "terrestrial",
+    "satellite",
+    "cable"
+  ],
+  "categories": [
+    "devices",
+    "multimedia",
+    "communication"
+  ]
+}

icons/antenna.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="M2 12 7 2" />
+  <path d="m7 12 5-10" />
+  <path d="m12 12 5-10" />
+  <path d="m17 12 5-10" />
+  <path d="M4.5 7h15" />
+  <path d="M12 16v6" />
+</svg>

icons/area-chart.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "nstokoe"
+  ],
+  "tags": [
+    "statistics",
+    "diagram",
+    "graph",
+    "area"
+  ],
+  "categories": [
+    "charts"
+  ]
+}

icons/area-chart.svg

@@ -9,5 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
+  <path d="M3 3v18h18" />
+  <path d="M7 12v5h12V8l-5 5-4-4Z" />
 </svg>

icons/arrow-big-down-dash.json

@@ -5,11 +5,17 @@
     "karsa-mistmere"
   ],
   "tags": [
-    "key",
+    "backwards",
+    "reverse",
+    "slow",
+    "direction",
+    "south",
     "download"
   ],
   "categories": [
     "arrows",
+    "navigation",
+    "gaming",
     "files"
   ]
 }

icons/arrow-big-down.json

@@ -6,9 +6,14 @@
     "danielbayley"
   ],
   "tags": [
-    "key"
+    "backwards",
+    "reverse",
+    "direction",
+    "south"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation",
+    "gaming"
   ]
 }

icons/arrow-big-left-dash.json

@@ -5,10 +5,16 @@
     "karsa-mistmere"
   ],
   "tags": [
-    "key",
+    "previous",
-    "back"
+    "back",
+    "direction",
+    "west",
+    "turn",
+    "corner"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation",
+    "gaming"
   ]
 }

icons/arrow-big-left.json

@@ -7,10 +7,15 @@
     "danielbayley"
   ],
   "tags": [
-    "key",
+    "previous",
-    "back"
+    "back",
+    "direction",
+    "west",
+    "indicate turn"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation",
+    "gaming"
   ]
 }

icons/arrow-big-right-dash.json

@@ -5,10 +5,16 @@
     "karsa-mistmere"
   ],
   "tags": [
-    "key",
+    "next",
-    "forward"
+    "forward",
+    "direction",
+    "east",
+    "turn",
+    "corner"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation",
+    "gaming"
   ]
 }

icons/arrow-big-right.json

@@ -7,10 +7,15 @@
     "danielbayley"
   ],
   "tags": [
-    "key",
+    "next",
-    "forward"
+    "forward",
+    "direction",
+    "east",
+    "indicate turn"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation",
+    "gaming"
   ]
 }

icons/arrow-big-up-dash.json

@@ -5,16 +5,23 @@
     "karsa-mistmere"
   ],
   "tags": [
-    "keyboard",
-    "key",
-    "forward",
     "caps lock",
     "capitals",
+    "keyboard",
+    "button",
     "mac",
-    "button"
+    "forward",
+    "direction",
+    "north",
+    "faster",
+    "speed",
+    "boost"
   ],
   "categories": [
     "arrows",
-    "development"
+    "navigation",
+    "text",
+    "development",
+    "gaming"
   ]
 }

icons/arrow-big-up.json

@@ -6,15 +6,21 @@
     "danielbayley"
   ],
   "tags": [
-    "keyboard",
-    "key",
-    "forward",
     "shift",
+    "keyboard",
+    "button",
     "mac",
-    "button"
+    "capitalize",
+    "capitalise",
+    "forward",
+    "direction",
+    "north"
   ],
   "categories": [
     "arrows",
-    "development"
+    "navigation",
+    "text",
+    "development",
+    "gaming"
   ]
 }

icons/arrow-down-0-1.json

@@ -4,7 +4,6 @@
     "karsa-mistmere"
   ],
   "tags": [
-    "arrow",
     "filter",
     "sort",
     "ascending",

icons/arrow-down-1-0.json

@@ -4,7 +4,6 @@
     "karsa-mistmere"
   ],
   "tags": [
-    "arrow",
     "filter",
     "sort",
     "descending",

icons/arrow-down-a-z.json

@@ -4,7 +4,6 @@
     "karsa-mistmere"
   ],
   "tags": [
-    "arrow",
     "filter",
     "sort",
     "ascending",

icons/arrow-down-circle.json

@@ -5,10 +5,17 @@
     "ericfennis"
   ],
   "tags": [
-    "direction"
+    "backwards",
+    "reverse",
+    "direction",
+    "south",
+    "sign",
+    "button"
   ],
   "categories": [
     "arrows",
-    "shapes"
+    "navigation",
+    "shapes",
+    "gaming"
   ]
 }

icons/arrow-down-circle.svg

@@ -10,6 +10,6 @@
   stroke-linejoin="round"
 >
   <circle cx="12" cy="12" r="10" />
-  <polyline points="8 12 12 16 16 12" />
+  <path d="M12 8v8" />
-  <line x1="12" x2="12" y1="8" y2="16" />
+  <path d="m8 12 4 4 4-4" />
 </svg>

icons/arrow-down-from-line.json

@@ -5,7 +5,10 @@
     "ericfennis"
   ],
   "tags": [
+    "backwards",
+    "reverse",
     "direction",
+    "south",
     "download",
     "expand",
     "fold",
@@ -13,6 +16,7 @@
   ],
   "categories": [
     "arrows",
+    "navigation",
     "files"
   ]
 }

icons/arrow-down-from-line.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="12" x2="12" y1="21" y2="7" />
-  <polyline points="6 15 12 21 18 15" />
   <path d="M19 3H5" />
+  <path d="M12 21V7" />
+  <path d="m6 15 6 6 6-6" />
 </svg>

icons/arrow-down-left-from-circle.json

@@ -4,9 +4,14 @@
     "danielbayley"
   ],
   "tags": [
-    "direction"
+    "outwards",
+    "direction",
+    "south-west",
+    "diagonal"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation",
+    "maps"
   ]
 }

icons/arrow-down-left-from-circle.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="8,22 2,22 2,16 " />
+  <path d="M2 12a10 10 0 1 1 10 10" />
-  <line x1="2" y1="22" x2="12" y2="12" />
+  <path d="m2 22 10-10" />
-  <path d="M2,12C2,6.5,6.5,2,12,2s10,4.5,10,10s-4.5,10-10,10" />
+  <path d="M8 22H2v-6" />
 </svg>

icons/arrow-down-left-square.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "direction",
+    "south-west",
+    "diagonal",
+    "sign",
+    "turn",
+    "keyboard",
+    "button"
+  ],
+  "categories": [
+    "arrows",
+    "navigation",
+    "shapes",
+    "gaming"
+  ]
+}

icons/arrow-down-left-square.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"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="m16 8-8 8" />
+  <path d="M16 16H8V8" />
+</svg>

icons/arrow-down-left.json

@@ -5,9 +5,12 @@
     "ericfennis"
   ],
   "tags": [
-    "direction"
+    "direction",
+    "south-west",
+    "diagonal"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation"
   ]
 }

icons/arrow-down-left.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="17" x2="7" y1="7" y2="17" />
+  <path d="M17 7 7 17" />
-  <polyline points="17 17 7 17 7 7" />
+  <path d="M17 17H7V7" />
 </svg>

icons/arrow-down-narrow-wide.json

@@ -4,7 +4,6 @@
     "karsa-mistmere"
   ],
   "tags": [
-    "arrow",
     "filter",
     "sort",
     "ascending"

icons/arrow-down-right-from-circle.json

@@ -4,9 +4,14 @@
     "danielbayley"
   ],
   "tags": [
-    "direction"
+    "outwards",
+    "direction",
+    "south-east",
+    "diagonal"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation",
+    "maps"
   ]
 }

icons/arrow-down-right-from-circle.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <polyline points="22,16 22,22 16,22 " />
+  <path d="M12 22a10 10 0 1 1 10-10" />
-  <line x1="22" y1="22" x2="12" y2="12" />
+  <path d="M22 22 12 12" />
-  <path d="M12,22C6.5,22,2,17.5,2,12S6.5,2,12,2s10,4.5,10,10" />
+  <path d="M22 16v6h-6" />
 </svg>

icons/arrow-down-right-square.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "danielbayley"
+  ],
+  "tags": [
+    "direction",
+    "south-east",
+    "diagonal",
+    "sign",
+    "turn",
+    "keyboard",
+    "button"
+  ],
+  "categories": [
+    "arrows",
+    "navigation",
+    "shapes",
+    "gaming"
+  ]
+}

icons/arrow-down-right-square.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"
+>
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <path d="m8 8 8 8" />
+  <path d="M16 8v8H8" />
+</svg>

icons/arrow-down-right.json

@@ -5,9 +5,12 @@
     "ericfennis"
   ],
   "tags": [
-    "direction"
+    "direction",
+    "south-east",
+    "diagonal"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation"
   ]
 }

icons/arrow-down-right.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="7" x2="17" y1="7" y2="17" />
+  <path d="m7 7 10 10" />
-  <polyline points="17 7 17 17 7 17" />
+  <path d="M17 7v10H7" />
 </svg>

icons/arrow-down-square.json

@@ -6,10 +6,18 @@
     "ericfennis"
   ],
   "tags": [
-    "direction"
+    "backwards",
+    "reverse",
+    "direction",
+    "south",
+    "sign",
+    "keyboard",
+    "button"
   ],
   "categories": [
     "arrows",
-    "shapes"
+    "navigation",
+    "shapes",
+    "gaming"
   ]
 }

icons/arrow-down-square.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+  <rect width="18" height="18" x="3" y="3" rx="2" />
-  <polyline points="8 12 12 16 16 12" />
+  <path d="M12 8v8" />
-  <line x1="12" x2="12" y1="8" y2="16" />
+  <path d="m8 12 4 4 4-4" />
 </svg>

icons/arrow-down-to-dot.json

@@ -6,10 +6,15 @@
   ],
   "tags": [
     "direction",
+    "south",
+    "waypoint",
+    "location",
     "step",
     "into"
   ],
   "categories": [
-    "arrows"
+    "arrows",
+    "navigation",
+    "maps"
   ]
 }

icons/arrow-down-to-dot.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <line x1="12" x2="12" y1="2" y2="16" />
+  <path d="M12 2v14" />
-  <polyline points="19,9 12,16 5,9" />
+  <path d="m19 9-7 7-7-7" />
   <circle cx="12" cy="21" r="1" />
 </svg>