fix(icons): changed backpack icon (#2406)

* Updated icons/backpack.svg

* Updated icons/backpack.json

.cspell/custom-words.txt

@@ -0,0 +1,17 @@
+# Custom words
+fullscreen
+gamepad
+gantt
+kanban
+pilcrow
+squircle
+strikethrough
+touchpad
+ungroup
+pilcrow
+toc
+
+# Brands
+codepen
+codesandbox
+dribbble

.eslintignore

@@ -6,6 +6,5 @@ tests
 node_modules
 .eslintrc.js
 docs/images
-docs/guide/basics/examples
+docs/**/examples/
-docs/guide/advanced/examples
 packages/lucide-react/dynamicIconImports.js

.eslintrc.js

@@ -1,4 +1,4 @@
-const DEFAULT_ATTRS = require('./scripts/render/default-attrs.json');
+const DEFAULT_ATTRS = require('./tools/build-icons/render/default-attrs.json');
 
 module.exports = {
   root: true,
@@ -15,7 +15,9 @@ module.exports = {
     'no-use-before-define': 'off',
     'import/no-extraneous-dependencies': [
       'error',
-      { devDependencies: ['**/*.test.js', '**/*.spec.js', './scripts/**'] },
+      {
+        devDependencies: ['**/*.test.js', '**/*.spec.js', '**/scripts/**'],
+      },
     ],
     'import/extensions': [
       'error',
@@ -42,12 +44,15 @@ module.exports = {
         '@html-eslint/no-duplicate-attrs': 'error',
         '@html-eslint/no-inline-styles': 'error',
         '@html-eslint/require-attrs': [
-           'error',
+          'error',
-             ...Object.entries(DEFAULT_ATTRS)
+          ...Object.entries(DEFAULT_ATTRS).map(([attr, value]) => ({
-               .map(([attr, value]) => ({ tag: 'svg', attr, value: String(value) }))
+            tag: 'svg',
+            attr,
+            value: String(value),
+          })),
         ],
         '@html-eslint/indent': ['error', 2],
-        "@html-eslint/no-multiple-empty-lines": ["error", { "max": 0 }],
+        '@html-eslint/no-multiple-empty-lines': ['error', { max: 0 }],
         '@html-eslint/no-extra-spacing-attrs': [
           'error',
           {
@@ -64,7 +69,7 @@ module.exports = {
         '@html-eslint/element-newline': 'error',
         '@html-eslint/no-trailing-spaces': 'error',
         '@html-eslint/quotes': 'error',
-      }
+      },
     },
   ],
 };

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -35,6 +35,16 @@ body:
       placeholder: e.g. 0.289.1
     validations:
       required: true
+  - type: checkboxes
+    id: can-reproduce-in-latest-version
+    attributes:
+      label: Can you reproduce this in the latest version?
+      description: i.e. after running `npm install lucide-react@latest`
+      options:
+        - label: 'Yes'
+        - label: 'No'
+    validations:
+      required: false
   - type: checkboxes
     id: browsers
     attributes:
@@ -59,6 +69,9 @@ body:
         - label: Windows
         - label: Linux
         - label: macOS
+        - label: ChromeOS
+        - label: iOS
+        - label: Android
         - label: Other/not relevant
   - type: textarea
     id: description

.github/ISSUE_TEMPLATE/03_bug_report_site.yml

@@ -30,6 +30,9 @@ body:
         - label: Windows
         - label: Linux
         - label: macOS
+        - label: ChromeOS
+        - label: iOS
+        - label: Android
         - label: Other/not relevant
   - type: textarea
     id: description

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

@@ -1,5 +1,5 @@
-name: "Build and Test"
+name: 'Build and Test'
-description: "Builds and test a package"
+description: 'Builds and test a package'
 
 inputs:
   name:
@@ -7,7 +7,7 @@ inputs:
     required: true
 
 runs:
-  using: "composite"
+  using: 'composite'
   steps:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4

.github/actions/check-icons.yml

@@ -1,5 +1,5 @@
-name: "Check icons"
+name: 'Check icons'
-description: "Cross-checks icon and category references in JSON descriptors"
+description: 'Cross-checks icon and category references in JSON descriptors'
 
 inputs:
   name:
@@ -7,7 +7,7 @@ inputs:
     required: true
 
 runs:
-  using: "composite"
+  using: 'composite'
   steps:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4

.github/labeler.yml

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

.github/pull_request_template.md

@@ -47,7 +47,7 @@
 - [ ] I've made sure that the icons look sharp on low DPI displays.
 - [ ] I've made sure that the icons look consistent with the icon set in size, optical volume and density.
 - [ ] I've made sure that the icons are visually centered.
-- [ ] I've correctly optimized all icons to two points of precision.
+- [ ] I've correctly optimized all icons to three points of precision.
 
 ## Before Submitting <!-- For every PR! -->
 <!-- All of these requirements must be fulfilled. -->

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

@@ -1,11 +1,13 @@
 name: Close stale issues and PR
 on:
   schedule:
-    - cron: "45 1 * * *"
+    - cron: '45 1 * * *'
 
 jobs:
   stale:
     runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
     steps:
       - uses: actions/stale@v9
         with:
@@ -14,4 +16,5 @@ jobs:
           close-pr-message: This PR was closed because it has been stalled for 5 days with no activity.
           close-pr-label: 🧶 stale
           days-before-stale: 30
+          days-before-issue-stale: -1
           days-before-close: -1

.github/workflows/labeler.yml

@@ -1,6 +1,6 @@
-name: "Pull Request Labeler"
+name: 'Pull Request Labeler'
 on:
-- pull_request_target
+  - pull_request_target
 
 jobs:
   triage:
@@ -9,4 +9,4 @@ jobs:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/labeler@v5
+      - uses: actions/labeler@v5

.github/workflows/lucide-angular.yml

@@ -8,7 +8,7 @@ on:
       - pnpm-lock.yaml
 
 jobs:
-  lucide-angular:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -26,5 +26,20 @@ jobs:
       - name: Build
         run: pnpm --filter lucide-angular build
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3.8.1
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Test
         run: pnpm --filter lucide-angular test

.github/workflows/lucide-font.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Create font in ./lucide-font
         run: pnpm build:font
 
-      - name: "Upload to Artifacts"
+      - name: 'Upload to Artifacts'
         uses: actions/upload-artifact@v3
         with:
           name: lucide-font

.github/workflows/lucide-preact.yml

@@ -24,8 +24,5 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build
-        run: pnpm --filter lucide-preact build
-
       - name: Test
         run: pnpm --filter lucide-preact test

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

@@ -24,8 +24,5 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Build
-        run: pnpm --filter lucide-react-native build
-
       - name: Test
         run: pnpm --filter lucide-react-native test

.github/workflows/lucide-react.yml

@@ -10,7 +10,7 @@ on:
       - pnpm-lock.yaml
 
 jobs:
-  lucide-react:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -28,5 +28,20 @@ jobs:
       - name: Build
         run: pnpm --filter lucide-react build
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3.8.1
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Test
         run: pnpm --filter lucide-react test

.github/workflows/lucide-solid.yml

@@ -9,7 +9,7 @@ on:
       - pnpm-lock.yaml
 
 jobs:
-  lucide-solid:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -27,5 +27,20 @@ jobs:
       - name: Build
         run: pnpm --filter lucide-solid build
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3.8.1
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Test
         run: pnpm --filter lucide-solid test

.github/workflows/lucide-svelte.yml

@@ -9,7 +9,7 @@ on:
       - pnpm-lock.yaml
 
 jobs:
-  lucide-svelte:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -27,5 +27,20 @@ jobs:
       - name: Build
         run: pnpm --filter lucide-svelte build
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3.8.1
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Test
         run: pnpm --filter lucide-svelte test

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

@@ -9,7 +9,7 @@ on:
       - pnpm-lock.yaml
 
 jobs:
-  lucide-vue-next:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -27,5 +27,20 @@ jobs:
       - name: Build
         run: pnpm --filter lucide-vue-next build
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3.8.1
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Test
         run: pnpm --filter lucide-vue-next test

.github/workflows/lucide-vue.yml

@@ -9,7 +9,7 @@ on:
       - pnpm-lock.yaml
 
 jobs:
-  lucide-vue:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -27,5 +27,20 @@ jobs:
       - name: Build
         run: pnpm --filter lucide-vue build
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3.8.1
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Test
         run: pnpm --filter lucide-vue test

.github/workflows/lucide.yml

@@ -9,7 +9,7 @@ on:
       - pnpm-lock.yaml
 
 jobs:
-  lucide:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -27,5 +27,20 @@ jobs:
       - name: Build
         run: pnpm --filter lucide build
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v3.8.1
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Test
         run: pnpm --filter lucide test

.github/workflows/pull-request.yml

@@ -3,7 +3,7 @@ name: Add Changed Icons comment
 on:
   pull_request_target:
     paths:
-      - 'icons/*.svg'
+      - 'icons/*'
     branches:
       - main
       - fix-icon-preview
@@ -68,6 +68,16 @@ jobs:
           # input: +++ b/icons/accessibility.json%0A@@ -2,0 +3 @@%0A+  "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
           # output: ::$ANNOTATION_SEVERITY file=icons/accessibility.json,line=2,endLine=3,title=$ANNOTATION_TITLE::$ANNOTATION_DESCRIPTION%0A%0A+  "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
 
+  lint-aliases:
+    name: Check Uniqueness of Aliases
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+      - name: Check Uniqueness of Aliases
+        run: "! cat <(printf \"%s\\n\" icons/*.json | while read -r name; do basename \"$name\" .json; done) <(jq -cr 'select(.aliases) | .aliases[] | if type==\"string\" then . else .name end' icons/*.json) | sort | uniq -c | grep -ve '^\\s*1 '"
+
   generate-changed-icons-comment:
     runs-on: ubuntu-latest
     permissions:
@@ -94,6 +104,10 @@ jobs:
           comment-author: 'github-actions[bot]'
           body-includes: Added or changed icons
 
+      - uses: actions/setup-node@v4
+      - name: Install svgson for code preview (safer and faster than installing all deps)
+        run: npm install svgson
+
       - name: Generate comment markup
         run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> comment-markup.md
         id: comment-markup

.github/workflows/release.yml

@@ -41,17 +41,18 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        package: [
+        package:
-          'lucide',
+          [
-          'lucide-react',
+            'lucide',
-          'lucide-react-native',
+            'lucide-react',
-          'lucide-vue',
+            'lucide-react-native',
-          'lucide-vue-next',
+            'lucide-vue',
-          'lucide-angular',
+            'lucide-vue-next',
-          'lucide-preact',
+            'lucide-angular',
-          'lucide-solid',
+            'lucide-preact',
-          'lucide-svelte',
+            'lucide-solid',
-        ]
+            'lucide-svelte',
+          ]
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
@@ -136,7 +137,7 @@ jobs:
       - name: Create font in ./lucide-font
         run: pnpm build:font
 
-      - name: "Upload to Artifacts"
+      - name: 'Upload to Artifacts'
         uses: actions/upload-artifact@v3
         with:
           name: lucide-font
@@ -145,10 +146,7 @@ jobs:
   post-release:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
-    needs: [
+    needs: [pre-release, lucide-font]
-      pre-release,
-      lucide-font,
-    ]
 
     steps:
       - uses: actions/checkout@v4

.gitignore

@@ -34,6 +34,7 @@ docs/.vitepress/data/iconNodes
 docs/.vitepress/data/iconMetaData.ts
 docs/.vitepress/data/releaseMetaData.json
 docs/.vitepress/data/releaseMetaData
+docs/.vitepress/data/categoriesData.json
 docs/.vitepress/data/iconDetails
 docs/.vitepress/data/relatedIcons.json
 docs/.vercel

.prettierignore

@@ -1,5 +1,12 @@
 pnpm-lock.yaml
 
+# docs examples
+docs/**/examples/
+docs/.vitepress/.temp
+docs/.vitepress/cache
+docs/.vitepress/data
+docs/.nitro
+
 # lucide-angular
 packages/lucide-angular/.angular/cache
 

.vscode/launch.json

@@ -12,4 +12,4 @@
       "webRoot": "${workspaceFolder}"
     }
   ]
-}
+}

.vscode/settings.json

@@ -1,13 +1,6 @@
 {
-  "cSpell.words": [
+  "cSpell.words": ["devs", "preact", "Preact"],
-    "devs",
-    "preact",
-    "Preact"
-  ],
   "eslint.enable": true,
-  "eslint.validate": [
+  "eslint.validate": ["javascript", "svg"],
-    "javascript",
-    "svg"
-  ],
   "svg.preview.background": "transparent"
 }

.vscode/svg.code-snippets

@@ -49,7 +49,7 @@
       "circle",
       "<circle"
     ],
-    "body": "<circle cx=\"${2:12}\" cy=\"${3:$2}\" r=\"${1|10,2,.5|}\" />"
+    "body": "<circle cx=\"${2:12}\" cy=\"${3:$2}\" r=\"${1|10,2,.5\" fill=\"currentColor|}\" />"
   },
   "Ellipse": {
     "scope": "xml",

CONTRIBUTING.md

@@ -39,6 +39,8 @@ You can also [download an Adobe Illustrator template](https://github.com/lucide-
 
 #### [Figma Guide](https://lucide.dev/docs/figma-guide)
 
+#### [Affinity Designer Guide](https://lucide.dev/guide/design/affinity-designer-guide)
+
 ### Submitting Multiple Icons
 
 If you want submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keep the thread clean and scoped.

README.md

@@ -1,4 +1,11 @@
-<p align=center><img width="480" src="https://lucide.dev/lucide-logo-repo.svg" alt="Lucide Logo"></p>
+<p align="center">
+  <a href="https://github.com/lucide-icons/lucide#gh-light-mode-only">
+    <img src="https://lucide.dev/lucide-logo-repo.svg#gh-light-mode-only" alt="Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons." width="480">
+  </a>
+  <a href="https://github.com/lucide-icons/lucide#gh-dark-mode-only">
+    <img src="https://lucide.dev/lucide-logo-repo-dark.svg#gh-dark-mode-only" alt="Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons." width="480">
+  </a>
+</p>
 <p align="center">
   <a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide" alt="license"></a>
   <a href="https://www.npmjs.com/package/lucide"><img src="https://img.shields.io/npm/v/lucide" alt="npm package"></a>
@@ -274,9 +281,12 @@ Thank you to all the people who contributed to Lucide!
 
 ## Sponsors
 
-
 <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
   <img src="docs/public/vercel.svg" alt="Powered by Vercel" width="200" />
 </a>
 
 <a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="docs/public/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
+
+### Awesome backer 🍺
+
+<a href="https://www.scipress.io?utm_source=lucide"><img src="docs/public/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>

categories/accessibility.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Accessibility",
   "icon": "accessibility"
-}
+}

categories/account.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Accounts & access",
   "icon": "user"
-}
+}

categories/animals.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Animals",
   "icon": "dog"
-}
+}

categories/arrows.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Arrows",
   "icon": "arrow-left-right"
-}
+}

categories/brands.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Brands",
   "icon": "facebook"
-}
+}

categories/buildings.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Buildings",
   "icon": "building"
-}
+}

categories/charts.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Charts",
   "icon": "pie-chart"
-}
+}

categories/communication.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Communication",
   "icon": "message-circle"
-}
+}

categories/connectivity.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Connectivity",
   "icon": "wifi"
-}
+}

categories/currency.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Currency",
   "icon": "dollar-sign"
-}
+}

categories/cursors.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Cursors",
   "icon": "mouse-pointer-2"
-}
+}

categories/design.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Design",
   "icon": "palette"
-}
+}

categories/development.json

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

categories/devices.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Devices",
   "icon": "smartphone"
-}
+}

categories/emoji.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Emoji",
   "icon": "smile"
-}
+}

categories/files.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "File icons",
   "icon": "panels-top-left"
-}
+}

categories/food-beverage.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Food & beverage",
   "icon": "coffee"
-}
+}

categories/furniture.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Furniture",
   "icon": "rocking-chair"
-}
+}

categories/gaming.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Gaming",
   "icon": "gamepad-2"
-}
+}

categories/home.json

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

categories/layout.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Layout",
   "icon": "panels-top-left"
-}
+}

categories/mail.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Mail",
   "icon": "mail"
-}
+}

categories/maps.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Maps",
   "icon": "map"
-}
+}

categories/maths.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Maths",
   "icon": "divide"
-}
+}

categories/medical.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Medical",
   "icon": "heart"
-}
+}

categories/money.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Money",
   "icon": "piggy-bank"
-}
+}

categories/multimedia.json

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

categories/nature.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Nature",
   "icon": "sprout"
-}
+}

categories/navigation.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Navigation",
   "icon": "compass"
-}
+}

categories/notifications.json

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

categories/people.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "People",
   "icon": "person-standing"
-}
+}

categories/photography.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Photography",
   "icon": "camera"
-}
+}

categories/science.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Science",
   "icon": "flask-conical"
-}
+}

categories/seasons.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Seasons",
   "icon": "leaf"
-}
+}

categories/security.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Security",
   "icon": "shield"
-}
+}

categories/shapes.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Shapes",
   "icon": "triangle"
-}
+}

categories/shopping.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Shopping",
   "icon": "shopping-bag"
-}
+}

categories/social.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Social",
   "icon": "thumbs-up"
-}
+}

categories/sports.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Sports",
   "icon": "type"
-}
+}

categories/sustainability.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Sustainability",
   "icon": "recycle"
-}
+}

categories/time.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Time & calendar",
   "icon": "calendar"
-}
+}

categories/tools.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Tools",
   "icon": "hammer"
-}
+}

categories/transportation.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Transportation",
   "icon": "train-front"
-}
+}

categories/travel.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Travel",
   "icon": "backpack"
-}
+}

categories/weather.json

@@ -2,4 +2,4 @@
   "$schema": "../category.schema.json",
   "title": "Weather",
   "icon": "cloud-sun"
-}
+}

cspell.json

@@ -0,0 +1,10 @@
+{
+  "dictionaries": ["en-us", "custom-words"],
+  "dictionaryDefinitions": [
+    {
+      "name": "custom-words",
+      "path": "./.cspell/custom-words.txt",
+      "addWords": true
+    }
+  ]
+}

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

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

docs/.vitepress/api/figma/data.ts

@@ -0,0 +1,40 @@
+import iconNodes from '../../data/iconNodes/index.ts';
+import { IconNodeWithKeys } from '../../theme/types';
+import iconMetaData from '../../data/iconMetaData';
+import releaseMeta from '../../data/releaseMetaData.json';
+import categories from '../../data/categoriesData.json';
+
+const dataResponse = {
+  icons: Object.entries(iconNodes).reduce((acc, [name, iconNode]) => {
+    const newIconNode = (iconNode as IconNodeWithKeys).map(([name, { key, ...attrs }]) => {
+      return [name, attrs];
+    });
+
+    acc[name] = {
+      iconNode: newIconNode,
+      aliases: (iconMetaData[name]?.aliases ?? []).map((alias) =>
+        typeof alias === 'string' ? alias : alias.name,
+      ),
+      tags: iconMetaData[name].tags ?? [],
+      categories: iconMetaData[name].categories ?? [],
+      ...releaseMeta[name],
+    };
+
+    return acc;
+  }, {}),
+  aliases: Object.entries(iconNodes).reduce((acc, [name]) => {
+    for (const alias of iconMetaData[name]?.aliases ?? []) {
+      acc[typeof alias === 'string' ? alias : alias.name] = name;
+    }
+
+    return acc;
+  }, {}),
+  categories,
+};
+
+export default eventHandler((event) => {
+  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+
+  return dataResponse;
+});

docs/.vitepress/api/gh-icon/[...data].get.ts

@@ -13,7 +13,10 @@ export default eventHandler((event) => {
   const data = pathData.at(-1).slice(0, -4);
   const [name] = pathData;
 
-  const src = Buffer.from(data, 'base64').toString('utf8');
+  const src = Buffer.from(data, 'base64')
+    .toString('utf8')
+    .replaceAll('\n', '')
+    .replace(/<svg[^>]*>|<\/svg>/g, '');
 
   const children = [];
 
@@ -30,20 +33,29 @@ export default eventHandler((event) => {
 
     const LucideIcon = createLucideIcon(backdropName, iconNode);
     const svg = renderToStaticMarkup(createElement(LucideIcon));
-    const backdropString = svg.replace(/<svg[^>]*>|<\/svg>/g, '');
+    const backdropString = svg.replaceAll('\n', '').replace(/<svg[^>]*>|<\/svg>/g, '');
 
     children.push(
       createElement(Backdrop, {
         backdropString,
         src,
         color: name in iconNodes ? 'red' : '#777',
-      })
+      }),
     );
+    if (name in iconNodes) {
+      children.push(
+        createElement(Backdrop, {
+          backdropString: src,
+          src: backdropString,
+          color: 'lime',
+        }),
+      );
+    }
   }
 
   const svg = Buffer.from(
     // We can't use jsx here, is not supported here by nitro.
-    renderToString(createElement(SvgPreview, { src, showGrid: true }, children))
+    renderToString(createElement(SvgPreview, { src, showGrid: true }, children)),
   ).toString('utf8');
 
   defaultContentType(event, 'image/svg+xml');

docs/.vitepress/api/gh-icon/dpi/[...data].get.ts

@@ -28,7 +28,7 @@ export default eventHandler(async (event) => {
   stroke-width="2"
   stroke-linecap="round"
   stroke-linejoin="round"
-`
+`,
     );
 
   const resvg = new Resvg(svg, { background: '#000' });

docs/.vitepress/api/gh-icon/stroke-width/[...data].get.ts

@@ -1,12 +1,12 @@
-import { eventHandler, setResponseHeader, defaultContentType } from 'h3'
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
-import { renderToString } from 'react-dom/server'
+import { renderToString } from 'react-dom/server';
-import { createElement } from 'react'
+import { createElement } from 'react';
 import SvgPreview from '../../../lib/SvgPreview/index.tsx';
-import createLucideIcon, { IconNode } from 'lucide-react/src/createLucideIcon'
+import createLucideIcon, { IconNode } from 'lucide-react/src/createLucideIcon';
 import { parseSync } from 'svgson';
 
 export default eventHandler((event) => {
-  const { params } = event.context
+  const { params } = event.context;
 
   const [strokeWidth, svgData] = params.data.split('/');
   const data = svgData.slice(0, -4);
@@ -16,8 +16,8 @@ export default eventHandler((event) => {
   const Icon = createLucideIcon(
     'icon',
     parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`).children.map(
-      ({ name, attributes }) => [name, attributes]
+      ({ name, attributes }) => [name, attributes],
-    ) as IconNode
+    ) as IconNode,
   );
 
   const svg = Buffer.from(
@@ -33,12 +33,12 @@ export default eventHandler((event) => {
         @media screen and (prefers-color-scheme: dark) {
           svg { stroke: #fff; fill: transparent !important; }
         }
-      </style>`
+      </style>`,
-      )
+      ),
   ).toString('utf8');
 
-  defaultContentType(event, 'image/svg+xml')
+  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000')
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
 
-  return svg
+  return svg;
-})
+});

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

@@ -1,30 +1,30 @@
-import { eventHandler, getQuery, setResponseHeader } from 'h3'
+import { eventHandler, getQuery, setResponseHeader } from 'h3';
-import iconNodes from '../../data/iconNodes'
+import iconNodes from '../../data/iconNodes';
-import { IconNodeWithKeys } from '../../theme/types'
+import { IconNodeWithKeys } from '../../theme/types';
 
 export default eventHandler((event) => {
-  const query = getQuery(event)
+  const query = getQuery(event);
 
-  const withUniqueKeys = query.withUniqueKeys === 'true'
+  const withUniqueKeys = query.withUniqueKeys === 'true';
 
-  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400')
+  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*')
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
 
   if (withUniqueKeys) {
-    return iconNodes
+    return iconNodes;
   }
 
   return Object.entries(iconNodes).reduce((acc, [name, iconNode]) => {
     if (withUniqueKeys) {
-      return [name, iconNode]
+      return [name, iconNode];
     }
 
-    const newIconNode = (iconNode as IconNodeWithKeys).map(([name, { key, ...attrs}]) => {
+    const newIconNode = (iconNode as IconNodeWithKeys).map(([name, { key, ...attrs }]) => {
-      return [name, attrs]
+      return [name, attrs];
-    })
+    });
 
-    acc[name] = newIconNode
+    acc[name] = newIconNode;
 
-    return acc
+    return acc;
-  }, {})
+  }, {});
-})
+});

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

@@ -1,29 +1,29 @@
-import { eventHandler, getQuery, setResponseHeader, createError } from 'h3'
+import { eventHandler, getQuery, setResponseHeader, createError } from 'h3';
-import iconNodes from '../../data/iconNodes'
+import iconNodes from '../../data/iconNodes';
-import createLucideIcon from 'lucide-react/src/createLucideIcon'
+import createLucideIcon from 'lucide-react/src/createLucideIcon';
-import { renderToString } from 'react-dom/server'
+import { renderToString } from 'react-dom/server';
-import { createElement } from 'react'
+import { createElement } from 'react';
 
 export default eventHandler((event) => {
-  const { params } = event.context
+  const { params } = event.context;
 
-  const iconNode = iconNodes[params.iconName]
+  const iconNode = iconNodes[params.iconName];
 
   if (iconNode == null) {
     const error = createError({
       statusCode: 404,
       message: `Icon "${params.iconName}" not found`,
-    })
+    });
 
-    return sendError(event, error)
+    return sendError(event, error);
   }
 
-  const width = getQuery(event).width || undefined
+  const width = getQuery(event).width || undefined;
-  const height = getQuery(event).height || undefined
+  const height = getQuery(event).height || undefined;
-  const color = getQuery(event).color || undefined
+  const color = getQuery(event).color || undefined;
-  const strokeWidth = getQuery(event).strokeWidth || undefined
+  const strokeWidth = getQuery(event).strokeWidth || undefined;
 
-  const LucideIcon = createLucideIcon(params.iconName, iconNode)
+  const LucideIcon = createLucideIcon(params.iconName, iconNode);
 
   const svg = Buffer.from(
     renderToString(
@@ -32,14 +32,13 @@ export default eventHandler((event) => {
         height,
         color: color ? `#${color}` : undefined,
         strokeWidth,
-      }
+      }),
-    ))
+    ),
   ).toString('utf8');
 
-  defaultContentType(event, 'image/svg+xml')
+  defaultContentType(event, 'image/svg+xml');
-  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000')
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
-  setResponseHeader(event, 'Access-Control-Allow-Origin', '*')
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
 
-  return svg
+  return svg;
-
+});
-})

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

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

docs/.vitepress/api/test.ts

@@ -1,3 +1,3 @@
 export default eventHandler(() => {
-  return { nitro: 'Is Awesome! asda' }
+  return { nitro: 'Is Awesome! asda' };
-})
+});

docs/.vitepress/config.ts

@@ -1,10 +1,10 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
-import { defineConfig } from 'vitepress'
+import { defineConfig } from 'vitepress';
 import sidebar from './sidebar';
 
-const title = "Lucide";
+const title = 'Lucide';
-const socialTitle = "Lucide Icons";
+const socialTitle = 'Lucide Icons';
-const description = "Beautiful & consistent icon toolkit made by the community."
+const description = 'Beautiful & consistent icon toolkit made by the community.';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -19,86 +19,135 @@ export default defineConfig({
         {
           find: /^.*\/VPIconAlignLeft\.vue$/,
           replacement: fileURLToPath(
-            new URL('./theme/components/overrides/VPIconAlignLeft.vue', import.meta.url)
+            new URL('./theme/components/overrides/VPIconAlignLeft.vue', import.meta.url),
-          )
+          ),
         },
         {
           find: /^.*\/VPFooter\.vue$/,
           replacement: fileURLToPath(
-            new URL('./theme/components/overrides/VPFooter.vue', import.meta.url)
+            new URL('./theme/components/overrides/VPFooter.vue', import.meta.url),
-          )
+          ),
-        }
+        },
-      ]
+        {
+          find: '~/.vitepress',
+          replacement: fileURLToPath(new URL('./', import.meta.url)),
+        },
+      ],
     },
   },
   head: [
-    [ 'script', {
+    [
-      src: 'https://analytics.lucide.dev/js/script.js',
+      'script',
-      'data-domain': 'lucide.dev',
+      {
-      defer: ''
+        src: 'https://analytics.lucide.dev/js/script.js',
-    }],
+        'data-domain': 'lucide.dev',
-    [ 'meta', {
+        defer: '',
-      property:"og:locale",
+      },
-      content:"en_US"
+    ],
-    }],
+    [
-    [ 'meta', {
+      'meta',
-      property:"og:type",
+      {
-      content:"website"
+        property: 'og:locale',
-    }],
+        content: 'en_US',
-    [ 'meta', {
+      },
-      property:"og:site_name",
+    ],
-      content: title,
+    [
-    }],
+      'meta',
-    [ 'meta', {
+      {
-      property:"og:title",
+        property: 'og:type',
-      content: socialTitle,
+        content: 'website',
-    }],
+      },
-    [ 'meta', {
+    ],
-      property:"og:description",
+    [
-      content: description
+      'meta',
-    }],
+      {
-    [ 'meta', {
+        property: 'og:site_name',
-      property:"og:url",
+        content: title,
-      content:"https://lucide.dev"
+      },
-    }],
+    ],
-    [ 'meta', {
+    [
-      property:"og:image",
+      'meta',
-      content: "https://lucide.dev/og.png"
+      {
-    }],
+        property: 'og:title',
-    [ 'meta', {
+        content: socialTitle,
-      property:"og:image:width",
+      },
-      content:"1200"
+    ],
-    }],
+    [
-    [ 'meta', {
+      'meta',
-      property:"og:image:height",
+      {
-      content:"630"
+        property: 'og:description',
-    }],
+        content: description,
-    [ 'meta', {
+      },
-      property:"og:image:type",
+    ],
-      content:"image/png"
+    [
-    }],
+      'meta',
-    [ 'meta', {
+      {
-      property:"twitter:card",
+        property: 'og:url',
-      content:"summary_large_image"
+        content: 'https://lucide.dev',
-    }],
+      },
-    [ 'meta', {
+    ],
-      property:"twitter:title",
+    [
-      content: socialTitle,
+      'meta',
-    }],
+      {
-    [ 'meta', {
+        property: 'og:image',
-      property:"twitter:description",
+        content: 'https://lucide.dev/og.png',
-      content: description
+      },
-    }],
+    ],
-    [ 'meta', {
+    [
-      property:"twitter:image",
+      'meta',
-      content:"https://lucide.dev/og.png"
+      {
-    }],
+        property: 'og:image:width',
+        content: '1200',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'og:image:height',
+        content: '630',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'og:image:type',
+        content: 'image/png',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'twitter:card',
+        content: 'summary_large_image',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'twitter:title',
+        content: socialTitle,
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'twitter:description',
+        content: description,
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'twitter:image',
+        content: 'https://lucide.dev/og.png',
+      },
+    ],
   ],
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     logo: {
       light: '/logo.light.svg',
-      dark: '/logo.dark.svg'
+      dark: '/logo.dark.svg',
     },
     nav: [
       { text: 'Icons', link: '/icons/' },
@@ -110,21 +159,21 @@ export default defineConfig({
     sidebar,
     socialLinks: [
       { icon: 'github', link: 'https://github.com/lucide-icons/lucide' },
-      { icon: 'discord', link: 'https://discord.gg/EH6nSts' }
+      { icon: 'discord', link: 'https://discord.gg/EH6nSts' },
     ],
     footer: {
       message: 'Released under the ISC License.',
-      copyright: `Copyright © ${new Date().getFullYear()} Lucide Contributors`
+      copyright: `Copyright © ${new Date().getFullYear()} Lucide Contributors`,
     },
     editLink: {
-      pattern: 'https://github.com/lucide-icons/lucide/edit/main/docs/:path'
+      pattern: 'https://github.com/lucide-icons/lucide/edit/main/docs/:path',
     },
     carbonAds: {
       code: 'CWYIC53U',
-      placement: 'lucidedev'
+      placement: 'lucidedev',
-    }
+    },
   },
   sitemap: {
-    hostname: 'https://lucide.dev/'
+    hostname: 'https://lucide.dev/',
-  }
+  },
-})
+});

docs/.vitepress/data/categoriesData.json

@@ -0,0 +1,186 @@
+[
+  {
+    "name": "accessibility",
+    "title": "Accessibility"
+  },
+  {
+    "name": "account",
+    "title": "Accounts & access"
+  },
+  {
+    "name": "animals",
+    "title": "Animals"
+  },
+  {
+    "name": "arrows",
+    "title": "Arrows"
+  },
+  {
+    "name": "brands",
+    "title": "Brands"
+  },
+  {
+    "name": "buildings",
+    "title": "Buildings"
+  },
+  {
+    "name": "charts",
+    "title": "Charts"
+  },
+  {
+    "name": "communication",
+    "title": "Communication"
+  },
+  {
+    "name": "connectivity",
+    "title": "Connectivity"
+  },
+  {
+    "name": "currency",
+    "title": "Currency"
+  },
+  {
+    "name": "cursors",
+    "title": "Cursors"
+  },
+  {
+    "name": "design",
+    "title": "Design"
+  },
+  {
+    "name": "development",
+    "title": "Coding & development"
+  },
+  {
+    "name": "devices",
+    "title": "Devices"
+  },
+  {
+    "name": "emoji",
+    "title": "Emoji"
+  },
+  {
+    "name": "files",
+    "title": "File icons"
+  },
+  {
+    "name": "food-beverage",
+    "title": "Food & beverage"
+  },
+  {
+    "name": "furniture",
+    "title": "Furniture"
+  },
+  {
+    "name": "gaming",
+    "title": "Gaming"
+  },
+  {
+    "name": "home",
+    "title": "Home"
+  },
+  {
+    "name": "layout",
+    "title": "Layout"
+  },
+  {
+    "name": "mail",
+    "title": "Mail"
+  },
+  {
+    "name": "maps",
+    "title": "Maps"
+  },
+  {
+    "name": "maths",
+    "title": "Maths"
+  },
+  {
+    "name": "medical",
+    "title": "Medical"
+  },
+  {
+    "name": "money",
+    "title": "Money"
+  },
+  {
+    "name": "multimedia",
+    "title": "Multimedia"
+  },
+  {
+    "name": "nature",
+    "title": "Nature"
+  },
+  {
+    "name": "navigation",
+    "title": "Navigation"
+  },
+  {
+    "name": "notifications",
+    "title": "Notifications"
+  },
+  {
+    "name": "people",
+    "title": "People"
+  },
+  {
+    "name": "photography",
+    "title": "Photography"
+  },
+  {
+    "name": "science",
+    "title": "Science"
+  },
+  {
+    "name": "seasons",
+    "title": "Seasons"
+  },
+  {
+    "name": "security",
+    "title": "Security"
+  },
+  {
+    "name": "shapes",
+    "title": "Shapes"
+  },
+  {
+    "name": "shopping",
+    "title": "Shopping"
+  },
+  {
+    "name": "social",
+    "title": "Social"
+  },
+  {
+    "name": "sports",
+    "title": "Sports"
+  },
+  {
+    "name": "sustainability",
+    "title": "Sustainability"
+  },
+  {
+    "name": "text",
+    "title": "Text formatting"
+  },
+  {
+    "name": "time",
+    "title": "Time & calendar"
+  },
+  {
+    "name": "tools",
+    "title": "Tools"
+  },
+  {
+    "name": "transportation",
+    "title": "Transportation"
+  },
+  {
+    "name": "travel",
+    "title": "Travel"
+  },
+  {
+    "name": "weather",
+    "title": "Weather"
+  }
+]

docs/.vitepress/data/packageData.json

@@ -3,87 +3,160 @@
     "order": 0,
     "icon": "js",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide", "href": "https://www.npmjs.com/package/lucide" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide", "href": "https://www.npmjs.com/package/lucide" }
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide",
+        "href": "https://www.npmjs.com/package/lucide"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide",
+        "href": "https://www.npmjs.com/package/lucide"
+      }
     ]
   },
   "lucide-react": {
     "order": 1,
     "icon": "react",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-react", "href": "https://www.npmjs.com/package/lucide-react" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-react", "href": "https://www.npmjs.com/package/lucide-react" }
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide-react",
+        "href": "https://www.npmjs.com/package/lucide-react"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide-react",
+        "href": "https://www.npmjs.com/package/lucide-react"
+      }
     ]
   },
   "lucide-vue": {
     "order": 2,
     "icon": "vue",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-vue", "href": "https://www.npmjs.com/package/lucide-vue" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-vue", "href": "https://www.npmjs.com/package/lucide-vue" }
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide-vue",
+        "href": "https://www.npmjs.com/package/lucide-vue"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide-vue",
+        "href": "https://www.npmjs.com/package/lucide-vue"
+      }
     ]
   },
   "lucide-vue-next": {
     "order": 3,
     "icon": "vue-next",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-vue-next", "href": "https://www.npmjs.com/package/lucide-vue-next" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-vue-next", "href": "https://www.npmjs.com/package/lucide-vue-next" }
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide-vue-next",
+        "href": "https://www.npmjs.com/package/lucide-vue-next"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide-vue-next",
+        "href": "https://www.npmjs.com/package/lucide-vue-next"
+      }
     ]
   },
   "lucide-svelte": {
     "order": 4,
     "icon": "svelte",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-svelte", "href": "https://www.npmjs.com/package/lucide-svelte" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-svelte", "href": "https://www.npmjs.com/package/lucide-svelte" }
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide-svelte",
+        "href": "https://www.npmjs.com/package/lucide-svelte"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide-svelte",
+        "href": "https://www.npmjs.com/package/lucide-svelte"
+      }
     ]
   },
   "lucide-solid": {
     "order": 4,
     "icon": "solid",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-solid", "href": "https://www.npmjs.com/package/lucide-solid" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-solid", "href": "https://www.npmjs.com/package/lucide-solid" }
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide-solid",
+        "href": "https://www.npmjs.com/package/lucide-solid"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide-solid",
+        "href": "https://www.npmjs.com/package/lucide-solid"
+      }
     ]
   },
   "lucide-preact": {
     "order": 5,
     "icon": "preact",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-preact", "href": "https://www.npmjs.com/package/lucide-preact" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-preact", "href": "https://www.npmjs.com/package/lucide-preact" }
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide-preact",
+        "href": "https://www.npmjs.com/package/lucide-preact"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide-preact",
+        "href": "https://www.npmjs.com/package/lucide-preact"
+      }
     ]
   },
   "lucide-react-native": {
     "order": 6,
     "icon": "react-native",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-react-native", "href": "https://www.npmjs.com/package/lucide-react-native" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-react-native", "href": "https://www.npmjs.com/package/lucide-react-native" }
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide-react-native",
+        "href": "https://www.npmjs.com/package/lucide-react-native"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide-react-native",
+        "href": "https://www.npmjs.com/package/lucide-react-native"
+      }
     ]
   },
   "lucide-angular": {
     "order": 7,
     "icon": "angular",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-angular", "href": "https://www.npmjs.com/package/lucide-angular" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-angular", "href": "https://www.npmjs.com/package/lucide-angular" }
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/lucide-angular",
+        "href": "https://www.npmjs.com/package/lucide-angular"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/lucide-angular",
+        "href": "https://www.npmjs.com/package/lucide-angular"
+      }
     ]
   },
   "lucide-static": {
     "order": 8,
     "icon": "svg",
     "shields": [
-      { "alt": "npm", "src": "https://img.shields.io/npm/v/lucide-static", "href": "https://www.npmjs.com/package/lucide-static" },
+      {
-      { "alt": "npm", "src": "https://img.shields.io/npm/dw/lucide-static", "href": "https://www.npmjs.com/package/lucide-static" }
+        "alt": "npm",
-    ]
+        "src": "https://img.shields.io/npm/v/lucide-static",
-  },
+        "href": "https://www.npmjs.com/package/lucide-static"
-  "lucide-flutter": {
+      },
-    "order": 9,
+      {
-    "icon": "flutter",
+        "alt": "npm",
-    "shields": [
+        "src": "https://img.shields.io/npm/dw/lucide-static",
-      { "alt": "flutter", "src": "https://img.shields.io/pub/v/lucide_icons", "href": "https://img.shields.io/pub/v/lucide_icons" }
+        "href": "https://www.npmjs.com/package/lucide-static"
+      }
     ]
   }
 }

docs/.vitepress/data/teamData.json

@@ -0,0 +1,48 @@
+[
+  {
+    "name": "Eric Fennis",
+    "title": "Creator of Lucide & Software engineer @nedap",
+    "image": "https://github.com/ericfennis.png?size=192",
+    "sponsor": "https://github.com/sponsors/ericfennis",
+    "socialLinks": [
+      {
+        "icon": "github",
+        "link": "https://github.com/ericfennis"
+      },
+      {
+        "icon": "x",
+        "link": "https://github.com/ericfennis"
+      }
+    ]
+  },
+  {
+    "name": "Karsa Rigó",
+    "title": "Maintainer of Lucide & Software engineer @sztaki",
+    "image": "https://github.com/karsa-mistmere.png?size=192",
+    "socialLinks": [
+      {
+        "icon": "github",
+        "link": "https://github.com/karsa-mistmere"
+      },
+      {
+        "icon": "linkedin",
+        "link": "https://www.linkedin.com/in/karsamistmere"
+      }
+    ]
+  },
+  {
+    "name": "Jakob Guddas",
+    "title": "Maintainer of Lucide & Software engineer @LEGO",
+    "image": "https://github.com/jguddas.png?size=192",
+    "socialLinks": [
+      {
+        "icon": "github",
+        "link": "https://github.com/jguddas"
+      },
+      {
+        "icon": "linkedin",
+        "link": "https://www.linkedin.com/in/jguddas"
+      }
+    ]
+  }
+]

docs/.vitepress/lib/SvgPreview/Backdrop.tsx

@@ -7,51 +7,80 @@ interface BackdropProps {
 }
 
 const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.Element => {
+  const id = React.useId();
   return (
     <>
       <defs xmlns="http://www.w3.org/2000/svg">
         <pattern
-          id="pattern"
+          id={`pattern-${id}`}
           width=".1"
           height=".1"
           patternUnits="userSpaceOnUse"
           patternTransform="rotate(45 50 50)"
         >
-          <line stroke={color} strokeWidth={0.1} y2={1} />
+          <line
-          <line stroke={color} strokeWidth={0.1} y2={1} />
+            stroke={color}
+            strokeWidth={0.1}
+            y2={1}
+          />
+          <line
+            stroke={color}
+            strokeWidth={0.1}
+            y2={1}
+          />
         </pattern>
       </defs>
-      <mask id="svg-preview-backdrop-mask-outline" maskUnits="userSpaceOnUse">
+      <mask
-        <g stroke="#fff" dangerouslySetInnerHTML={{ __html: backdropString }} />
+        id={`svg-preview-backdrop-mask-${id}`}
-        <g dangerouslySetInnerHTML={{ __html: src }} strokeWidth={2.05} />
+        maskUnits="userSpaceOnUse"
+      >
+        <g
+          stroke="#fff"
+          dangerouslySetInnerHTML={{ __html: backdropString }}
+        />
+        <g dangerouslySetInnerHTML={{ __html: src }} />
       </mask>
-      <mask id="svg-preview-backdrop-mask-fill" maskUnits="userSpaceOnUse">
+      <mask
-        <g stroke="#fff" dangerouslySetInnerHTML={{ __html: backdropString }} />
+        id={`svg-preview-backdrop-mask-outline-${id}`}
-        <g dangerouslySetInnerHTML={{ __html: src }} strokeWidth={2.05} />
+        maskUnits="userSpaceOnUse"
-        <g strokeWidth={1.75} dangerouslySetInnerHTML={{ __html: backdropString }} />
+      >
+        <rect
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+          fill="#fff"
+          stroke="none"
+        />
+        <g
+          strokeWidth={1.75}
+          dangerouslySetInnerHTML={{ __html: backdropString }}
+        />
       </mask>
-      <g strokeWidth={2.25} stroke="url(#pattern)" mask={'url(#svg-preview-backdrop-mask-outline)'}>
+      <g mask={`url(#svg-preview-backdrop-mask-${id})`}>
-        <rect x="0" y="0" width="24" height="24" fill="url(#pattern)" opacity={0.5} stroke="none" />
+        <rect
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+          opacity={0.5}
+          fill={`url(#pattern-${id})`}
+          stroke="none"
+        />
+        <g
+          stroke={color}
+          strokeWidth={2.25}
+          opacity={0.75}
+          dangerouslySetInnerHTML={{ __html: src }}
+        />
+        <g
+          stroke={color}
+          strokeWidth={2.25}
+          opacity={0.75}
+          mask={`url(#svg-preview-backdrop-mask-outline-${id})`}
+          dangerouslySetInnerHTML={{ __html: backdropString }}
+        />
       </g>
-      <rect
-        x="0"
-        y="0"
-        width="24"
-        height="24"
-        fill="url(#pattern)"
-        stroke="none"
-        mask={'url(#svg-preview-backdrop-mask-fill)'}
-      />
-      <rect
-        x="0"
-        y="0"
-        width="24"
-        height="24"
-        fill={color}
-        opacity={0.5}
-        stroke="none"
-        mask={'url(#svg-preview-backdrop-mask-fill)'}
-      />
     </>
   );
 };

docs/.vitepress/lib/SvgPreview/index.tsx

@@ -10,7 +10,11 @@ const Grid = ({
   strokeWidth: number;
   radius: number;
 } & PathProps<'stroke', 'strokeWidth'>) => (
-  <g className="svg-preview-grid-group" strokeLinecap="butt" {...props}>
+  <g
+    className="svg-preview-grid-group"
+    strokeLinecap="butt"
+    {...props}
+  >
     <rect
       className="svg-preview-grid-rect"
       width={24 - props.strokeWidth}
@@ -21,11 +25,29 @@ const Grid = ({
       fill={fill}
     />
     <path
+      strokeDasharray={'0 0.1 ' + '0.1 0.15 '.repeat(11) + '0 0.15'}
+      strokeWidth={0.1}
       d={
         props.d ||
         new Array(Math.floor(24 - 1))
           .fill(null)
-          .flatMap((_, i) => [
+          .map((_, i) => i)
+          .filter((i) => i % 3 !== 2)
+          .flatMap((i) => [
+            `M${props.strokeWidth} ${i + 1}h${24 - props.strokeWidth * 2}`,
+            `M${i + 1} ${props.strokeWidth}v${24 - props.strokeWidth * 2}`,
+          ])
+          .join('')
+      }
+    />
+    <path
+      d={
+        props.d ||
+        new Array(Math.floor(24 - 1))
+          .fill(null)
+          .map((_, i) => i)
+          .filter((i) => i % 3 === 2)
+          .flatMap((i) => [
             `M${props.strokeWidth} ${i + 1}h${24 - props.strokeWidth * 2}`,
             `M${i + 1} ${props.strokeWidth}v${24 - props.strokeWidth * 2}`,
           ])
@@ -44,15 +66,21 @@ const Shadow = ({
   paths: Path[];
 } & PathProps<'stroke' | 'strokeWidth' | 'strokeOpacity', 'd'>) => {
   const groupedPaths = Object.entries(
-    paths.reduce((groups, val) => {
+    paths.reduce(
-      const key = val.c.id;
+      (groups, val) => {
-      groups[key] = [...(groups[key] || []), val];
+        const key = val.c.id;
-      return groups;
+        groups[key] = [...(groups[key] || []), val];
-    }, {} as Record<number, Path[]>)
+        return groups;
+      },
+      {} as Record<number, Path[]>,
+    ),
   );
   return (
     <>
-      <g className="svg-preview-shadow-mask-group" {...props}>
+      <g
+        className="svg-preview-shadow-mask-group"
+        {...props}
+      >
         {groupedPaths.map(([id, paths]) => (
           <mask
             id={`svg-preview-shadow-mask-${id}`}
@@ -61,7 +89,15 @@ const Shadow = ({
             strokeWidth={props.strokeWidth}
             stroke="#000"
           >
-            <rect x={0} y={0} width={24} height={24} fill="#fff" stroke="none" rx={radius} />
+            <rect
+              x={0}
+              y={0}
+              width={24}
+              height={24}
+              fill="#fff"
+              stroke="none"
+              rx={radius}
+            />
             <path
               d={paths
                 .flatMap(({ prev, next }) => [
@@ -74,9 +110,16 @@ const Shadow = ({
           </mask>
         ))}
       </g>
-      <g className="svg-preview-shadow-group" {...props}>
+      <g
+        className="svg-preview-shadow-group"
+        {...props}
+      >
         {paths.map(({ d, c: { id } }, i) => (
-          <path key={i} mask={`url(#svg-preview-shadow-mask-${id})`} d={d} />
+          <path
+            key={i}
+            mask={`url(#svg-preview-shadow-mask-${id})`}
+            d={d}
+          />
         ))}
         <path
           d={paths
@@ -94,9 +137,16 @@ const ColoredPath = ({
   paths,
   ...props
 }: { paths: Path[]; colors: string[] } & PathProps<never, 'd' | 'stroke'>) => (
-  <g className="svg-preview-colored-path-group" {...props}>
+  <g
+    className="svg-preview-colored-path-group"
+    {...props}
+  >
     {paths.map(({ d, c }, i) => (
-      <path key={i} d={d} stroke={colors[(c.name === 'path' ? i : c.id) % colors.length]} />
+      <path
+        key={i}
+        d={d}
+        stroke={colors[(c.name === 'path' ? i : c.id) % colors.length]}
+      />
     ))}
   </g>
 );
@@ -138,7 +188,15 @@ const ControlPath = ({
                 key={i}
                 maskUnits="userSpaceOnUse"
               >
-                <rect x="0" y="0" width="24" height="24" fill="#fff" stroke="none" rx={radius} />
+                <rect
+                  x="0"
+                  y="0"
+                  width="24"
+                  height="24"
+                  fill="#fff"
+                  stroke="none"
+                  rx={radius}
+                />
                 <path d={`M${prev.x} ${prev.y}h.01`} />
                 <path d={`M${next.x} ${next.y}h.01`} />
               </mask>
@@ -146,7 +204,10 @@ const ControlPath = ({
           );
         })}
       </g>
-      <g className="svg-preview-control-path-group" {...props}>
+      <g
+        className="svg-preview-control-path-group"
+        {...props}
+      >
         {controlPaths.map(({ d, showMarker }, i) => (
           <path
             key={i}
@@ -155,18 +216,33 @@ const ControlPath = ({
           />
         ))}
       </g>
-      <g className="svg-preview-control-path-marker-group" {...props}>
+      <g
+        className="svg-preview-control-path-marker-group"
+        {...props}
+      >
         <path
           d={controlPaths
             .flatMap(({ prev, next, showMarker }) =>
-              showMarker ? [`M${prev.x} ${prev.y}h.01`, `M${next.x} ${next.y}h.01`] : []
+              showMarker ? [`M${prev.x} ${prev.y}h.01`, `M${next.x} ${next.y}h.01`] : [],
             )
             .join('')}
         />
         {controlPaths.map(({ d, prev, next, startMarker, endMarker }, i) => (
           <React.Fragment key={i}>
-            {startMarker && <circle cx={prev.x} cy={prev.y} r={pointSize / 2} />}
+            {startMarker && (
-            {endMarker && <circle cx={next.x} cy={next.y} r={pointSize / 2} />}
+              <circle
+                cx={prev.x}
+                cy={prev.y}
+                r={pointSize / 2}
+              />
+            )}
+            {endMarker && (
+              <circle
+                cx={next.x}
+                cy={next.y}
+                r={pointSize / 2}
+              />
+            )}
           </React.Fragment>
         ))}
       </g>
@@ -182,15 +258,16 @@ const Radii = ({
   any
 >) => {
   return (
-    <g className="svg-preview-radii-group" {...props}>
+    <g
+      className="svg-preview-radii-group"
+      {...props}
+    >
       {paths.map(
         ({ c, prev, next, circle }, i) =>
           circle && (
             <React.Fragment key={i}>
-              {c.name !== "circle" && (
+              {c.name !== 'circle' && (
-                <path
+                <path d={`M${prev.x} ${prev.y} ${circle.x} ${circle.y} ${next.x} ${next.y}`} />
-                  d={`M${prev.x} ${prev.y} ${circle.x} ${circle.y} ${next.x} ${next.y}`}
-                />
               )}
               <circle
                 cy={circle.y}
@@ -200,7 +277,7 @@ const Radii = ({
                 stroke={
                   (Math.round(circle.x * 100) / 100) % 1 !== 0 ||
                   (Math.round(circle.y * 100) / 100) % 1 !== 0
-                    ? "red"
+                    ? 'red'
                     : undefined
                 }
               />
@@ -208,11 +285,7 @@ const Radii = ({
                 cy={circle.y}
                 cx={circle.x}
                 r={circle.r}
-                stroke={
+                stroke={(Math.round(circle.r * 1000) / 1000) % 1 !== 0 ? 'red' : undefined}
-                  (Math.round(circle.r * 1000) / 1000) % 1 !== 0
-                    ? "red"
-                    : undefined
-                }
               />
             </React.Fragment>
           ),
@@ -228,15 +301,29 @@ const Handles = ({
   'strokeWidth' | 'stroke' | 'strokeDasharray' | 'strokeOpacity',
   any
 >) => {
-  console.log(paths);
   return (
-    <g className="svg-preview-handles-group" {...props}>
+    <g
+      className="svg-preview-handles-group"
+      {...props}
+    >
       {paths.map(({ c, prev, next, cp1, cp2 }) => (
         <>
           {cp1 && <path d={`M${prev.x} ${prev.y} ${cp1.x} ${cp1.y}`} />}
-          {cp1 && <circle cy={cp1.y} cx={cp1.x} r={0.25} />}
+          {cp1 && (
+            <circle
+              cy={cp1.y}
+              cx={cp1.x}
+              r={0.25}
+            />
+          )}
           {cp2 && <path d={`M${next.x} ${next.y} ${cp2.x} ${cp2.y}`} />}
-          {cp2 && <circle cy={cp2.y} cx={cp2.x} r={0.25} />}
+          {cp2 && (
+            <circle
+              cy={cp2.y}
+              cx={cp2.x}
+              r={0.25}
+            />
+          )}
         </>
       ))}
     </g>
@@ -280,9 +367,27 @@ const SvgPreview = React.forwardRef<
       {...props}
     >
       <style>{darkModeCss}</style>
-      {showGrid && <Grid strokeWidth={0.1} stroke="#777" strokeOpacity={0.3} radius={1} />}
+      {showGrid && (
-      <Shadow paths={paths} strokeWidth={4} stroke="#777" radius={1} strokeOpacity={0.15} />
+        <Grid
-      <Handles paths={paths} strokeWidth={0.12} stroke="#777" strokeOpacity={0.6} />
+          strokeWidth={0.1}
+          stroke="#777"
+          strokeOpacity={0.3}
+          radius={1}
+        />
+      )}
+      <Shadow
+        paths={paths}
+        strokeWidth={4}
+        stroke="#777"
+        radius={1}
+        strokeOpacity={0.15}
+      />
+      <Handles
+        paths={paths}
+        strokeWidth={0.12}
+        stroke="#777"
+        strokeOpacity={0.6}
+      />
       <ColoredPath
         paths={paths}
         colors={[
@@ -307,8 +412,19 @@ const SvgPreview = React.forwardRef<
         stroke="#777"
         strokeOpacity={0.3}
       />
-      <ControlPath radius={1} paths={paths} pointSize={1} stroke="#fff" strokeWidth={0.125} />
+      <ControlPath
-      <Handles paths={paths} strokeWidth={0.12} stroke="#FFF" strokeOpacity={0.3} />
+        radius={1}
+        paths={paths}
+        pointSize={1}
+        stroke="#fff"
+        strokeWidth={0.125}
+      />
+      <Handles
+        paths={paths}
+        strokeWidth={0.12}
+        stroke="#FFF"
+        strokeOpacity={0.3}
+      />
       {children}
     </svg>
   );

docs/.vitepress/lib/SvgPreview/types.ts

@@ -16,7 +16,7 @@ export type Path = {
 
 export type PathProps<
   RequiredProps extends keyof SVGProps<SVGPathElement | SVGRectElement | SVGCircleElement>,
-  NeverProps extends keyof SVGProps<SVGPathElement | SVGRectElement | SVGCircleElement>
+  NeverProps extends keyof SVGProps<SVGPathElement | SVGRectElement | SVGCircleElement>,
 > = Required<Pick<React.SVGProps<SVGElement & SVGRectElement & SVGCircleElement>, RequiredProps>> &
   Omit<
     React.SVGProps<SVGPathElement & SVGRectElement & SVGCircleElement>,

docs/.vitepress/lib/SvgPreview/utils.ts

@@ -51,7 +51,7 @@ export const getCommands = (src: string) =>
   getNodes(src)
     .map(convertToPathNode)
     .flatMap(({ d, name }, idx) =>
-      new SVGPathData(d).toAbs().commands.map((c, cIdx) => ({ ...c, id: idx, idx: cIdx, name }))
+      new SVGPathData(d).toAbs().commands.map((c, cIdx) => ({ ...c, id: idx, idx: cIdx, name })),
     );
 
 export const getPaths = (src: string) => {
@@ -60,10 +60,10 @@ export const getPaths = (src: string) => {
   let prev: Point | undefined = undefined;
   let start: Point | undefined = undefined;
   const addPath = (
-    c: typeof commands[number],
+    c: (typeof commands)[number],
     next: Point,
     d?: string,
-    extras?: { circle?: Path['circle']; cp1?: Path['cp1']; cp2?: Path['cp2'] }
+    extras?: { circle?: Path['circle']; cp1?: Path['cp1']; cp2?: Path['cp2'] },
   ) => {
     assert(prev);
     paths.push({
@@ -153,7 +153,7 @@ export const getPaths = (src: string) => {
           {
             cp1: { x: prev.x - reflectedCp1.x, y: prev.y - reflectedCp1.y },
             cp2: { x: c.x2, y: c.y2 },
-          }
+          },
         );
         break;
       }
@@ -169,7 +169,7 @@ export const getPaths = (src: string) => {
         assert(prev);
         const backTrackCP = (
           index: number,
-          currentPoint: { x: number; y: number }
+          currentPoint: { x: number; y: number },
         ): { x: number; y: number } => {
           const previousCommand = commands[index - 1];
           if (!previousCommand) {
@@ -211,7 +211,7 @@ export const getPaths = (src: string) => {
           {
             cp1: { x: prevCP.x, y: prevCP.y },
             cp2: { x: prevCP.x, y: prevCP.y },
-          }
+          },
         );
         break;
       }
@@ -226,13 +226,13 @@ export const getPaths = (src: string) => {
           c.lArcFlag,
           c.sweepFlag,
           c.x,
-          c.y
+          c.y,
         );
         addPath(
           c,
           c,
           `M ${prev.x} ${prev.y} A${c.rX} ${c.rY} ${c.xRot} ${c.lArcFlag} ${c.sweepFlag} ${c.x} ${c.y}`,
-          { circle: c.rX === c.rY ? { ...center, r: c.rX } : undefined }
+          { circle: c.rX === c.rY ? { ...center, r: c.rX } : undefined },
         );
         break;
       }
@@ -253,7 +253,7 @@ export const arcEllipseCenter = (
   fa: number,
   fs: number,
   x2: number,
-  y2: number
+  y2: number,
 ) => {
   const phi = (a * Math.PI) / 180;
 
@@ -280,7 +280,7 @@ export const arcEllipseCenter = (
     sign *
     Math.sqrt(
       Math.max(rx * rx * ry * ry - rx * rx * y1p * y1p - ry * ry * x1p * x1p, 0) /
-        (rx * rx * y1p * y1p + ry * ry * x1p * x1p)
+        (rx * rx * y1p * y1p + ry * ry * x1p * x1p),
     );
 
   const V2 = [(rx * y1p) / ry, (-ry * x1p) / rx];

docs/.vitepress/lib/categories.ts

@@ -1,28 +1,34 @@
-import fs from "fs";
+import fs from 'fs';
-import path from "path";
+import path from 'path';
-import {Category, IconEntity} from "../theme/types";
+import { Category, IconEntity } from '../theme/types';
 
-const directory = path.join(process.cwd(), "../categories");
+const directory = path.join(process.cwd(), '../categories');
 
 export function getAllCategoryFiles(): Category[] {
   const fileNames = fs.readdirSync(directory).filter((file) => path.extname(file) === '.json');
 
   return fileNames.map((fileName) => {
-    const name = path.basename(fileName, '.json')
+    const name = path.basename(fileName, '.json');
-    const fileContent = fs.readFileSync(path.join(directory, fileName), 'utf8')
+    const fileContent = fs.readFileSync(path.join(directory, fileName), 'utf8');
 
-    const parsedFileContent = JSON.parse(fileContent)
+    const parsedFileContent = JSON.parse(fileContent);
 
     return {
       name,
       title: parsedFileContent.title,
-    }
+    };
   });
 }
 
-export function mapCategoryIconCount(categories: Category[], icons: { categories: IconEntity['categories'] }[]) {
+export function mapCategoryIconCount(
+  categories: Category[],
+  icons: { categories: IconEntity['categories'] }[],
+) {
   return categories.map((category) => ({
     ...category,
-    iconCount: icons.reduce((acc, curr) => (curr.categories.includes(category.name) ? ++acc : acc), 0)
+    iconCount: icons.reduce(
-  }))
+      (acc, curr) => (curr.categories.includes(category.name) ? ++acc : acc),
+      0,
+    ),
+  }));
 }

docs/.vitepress/lib/codeExamples/createCodeExamples.ts

@@ -1,33 +1,33 @@
-import {
+import { bundledLanguages, type ThemeRegistration } from 'shikiji';
-  bundledLanguages,
+import { getHighlighter } from 'shikiji';
-  type ThemeRegistration
-} from 'shikiji'
-import {
-  getHighlighter,
-} from 'shikiji'
-
 
 type CodeExampleType = {
-  title: string,
+  title: string;
-  language: string,
+  language: string;
-  code: string,
+  code: string;
-}[]
+}[];
 
 const getIconCodes = (): CodeExampleType => {
   return [
     {
-      language: 'html',
+      language: 'js',
-      title: 'HTML',
+      title: 'Vanilla',
-      code: `<i data-lucide="Name"></i>`
+      code: `\
+import { createIcons, icons } from 'lucide';
+
+createIcons({ icons });
+
+document.body.append('<i data-lucide="$Name"></i>');\
+  `,
     },
     {
       language: 'tsx',
       title: 'React',
-      code: `import { PascalCase } from 'lucide-react';
+      code: `import { $PascalCase } from 'lucide-react';
 
 const App = () => {
   return (
-    <PascalCase />
+    <$PascalCase />
   );
 };
 
@@ -38,11 +38,11 @@ export default App;
       language: 'vue',
       title: 'Vue',
       code: `<script setup>
-  import { PascalCase } from 'lucide-vue-next';
+import { $PascalCase } from 'lucide-vue-next';
 </script>
 
 <template>
-  <PascalCase />
+  <$PascalCase />
 </template>
 `,
     },
@@ -50,20 +50,20 @@ export default App;
       language: 'svelte',
       title: 'Svelte',
       code: `<script>
-import { PascalCase } from 'lucide-svelte';
+import { $PascalCase } from 'lucide-svelte';
 </script>
 
-<PascalCase />
+<$PascalCase />
 `,
     },
     {
       language: 'tsx',
       title: 'Preact',
-      code: `import { PascalCase } from 'lucide-preact';
+      code: `import { $PascalCase } from 'lucide-preact';
 
 const App = () => {
   return (
-    <PascalCase />
+    <$PascalCase />
   );
 };
 
@@ -73,11 +73,11 @@ export default App;
     {
       language: 'tsx',
       title: 'Solid',
-      code: `import { PascalCase } from 'lucide-solid';
+      code: `import { $PascalCase } from 'lucide-solid';
 
 const App = () => {
   return (
-    <PascalCase />
+    <$PascalCase />
   );
 };
 
@@ -88,16 +88,16 @@ export default App;
       language: 'tsx',
       title: 'Angular',
       code: `// app.module.ts
-import { LucideAngularModule, PascalCase } from 'lucide-angular';
+import { LucideAngularModule, $PascalCase } from 'lucide-angular';
 
 @NgModule({
   imports: [
-    LucideAngularModule.pick({ PascalCase })
+    LucideAngularModule.pick({ $PascalCase })
   ],
 })
 
 // app.component.html
-<lucide-icon name="Name"></lucide-icon>
+<lucide-icon name="$Name"></lucide-icon>
 `,
     },
     {
@@ -107,38 +107,39 @@ import { LucideAngularModule, PascalCase } from 'lucide-angular';
 @import ('~lucide-static/font/Lucide.css');
 </style>
 
-<div class="icon-Name"></div>
+<div class="icon-$Name"></div>
 `,
-    }
+    },
-  ]
+  ];
-}
+};
 
 export type ThemeOptions =
   | ThemeRegistration
-  | { light: ThemeRegistration; dark: ThemeRegistration }
+  | { light: ThemeRegistration; dark: ThemeRegistration };
 
 const highLightCode = async (code: string, lang: string, active?: boolean) => {
   const highlighter = await getHighlighter({
     themes: ['github-light', 'github-dark'],
-    langs: Object.keys(bundledLanguages)
+    langs: Object.keys(bundledLanguages),
-  })
+  });
 
-  const highlightedCode = highlighter.codeToHtml(code, {
+  const highlightedCode = highlighter
-    lang,
+    .codeToHtml(code, {
-    themes: {
+      lang,
-      light: 'github-light',
+      themes: {
-      dark: 'github-dark'
+        light: 'github-light',
-    },
+        dark: 'github-dark',
-    defaultColor: false
+      },
-  }).replace('shiki-themes', 'shiki-themes vp-code')
+      defaultColor: false,
+    })
+    .replace('shiki-themes', 'shiki-themes vp-code');
 
   return `<div class="language-${lang} ${active ? 'active' : ''}">
   <button title="Copy Code" class="copy"></button>
   <span class="lang">${lang}</span>
   ${highlightedCode}
-  </div>`
+  </div>`;
-}
+};
-
 
 export default async function createCodeExamples() {
   const codes = getIconCodes();
@@ -153,7 +154,7 @@ export default async function createCodeExamples() {
       language: language,
       code: codeString,
     };
-  })
+  });
 
   return Promise.all(codeExamplePromises);
 }

docs/.vitepress/lib/codeExamples/createLabCodeExamples.ts

@@ -0,0 +1,161 @@
+import { bundledLanguages, type ThemeRegistration } from 'shikiji';
+import { getHighlighter } from 'shikiji';
+
+type CodeExampleType = {
+  title: string;
+  language: string;
+  code: string;
+}[];
+
+const getIconCodes = (): CodeExampleType => {
+  return [
+    {
+      language: 'js',
+      title: 'Vanilla',
+      code: `\
+import { createIcons, icons } from 'lucide';
+import { $CamelCase } from '@lucide/lab';
+
+createIcons({
+  icons: {
+    $CamelCase
+  }
+});
+
+document.body.append('<i data-lucide="$Name"></i>');\
+  `,
+    },
+    {
+      language: 'tsx',
+      title: 'React',
+      code: `import { Icon } from 'lucide-react';
+import { $CamelCase } from '@lucide/lab';
+
+const App = () => {
+  return (
+    <Icon iconNode={$CamelCase} />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'vue',
+      title: 'Vue',
+      code: `<script setup>
+import { Icon } from 'lucide-vue-next';
+import { $CamelCase } from '@lucide/lab';
+</script>
+
+<template>
+  <Icon :iconNode="burger" />
+</template>
+`,
+    },
+    {
+      language: 'svelte',
+      title: 'Svelte',
+      code: `<script>
+import { Icon } from 'lucide-svelte';
+import { $CamelCase } from '@lucide/lab';
+</script>
+
+<Icon iconNode={burger} />
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Preact',
+      code: `import { Icon } from 'lucide-preact';
+import { $CamelCase } from '@lucide/lab';
+
+const App = () => {
+  return (
+    <Icon iconNode={$CamelCase} />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Solid',
+      code: `import { Icon } from 'lucide-solid';
+import { $CamelCase } from '@lucide/lab';
+
+const App = () => {
+  return (
+    <Icon iconNode={$CamelCase} />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Angular',
+      code: `// app.module.ts
+import { LucideAngularModule } from 'lucide-angular';
+import { $CamelCase } from '@lucide/lab';
+
+@NgModule({
+  imports: [
+    LucideAngularModule.pick({ $CamelCase })
+  ],
+})
+
+// app.component.html
+<lucide-icon name="$CamelCase"></lucide-icon>
+`,
+    },
+  ];
+};
+
+export type ThemeOptions =
+  | ThemeRegistration
+  | { light: ThemeRegistration; dark: ThemeRegistration };
+
+const highLightCode = async (code: string, lang: string, active?: boolean) => {
+  const highlighter = await getHighlighter({
+    themes: ['github-light', 'github-dark'],
+    langs: Object.keys(bundledLanguages),
+  });
+
+  const highlightedCode = highlighter
+    .codeToHtml(code, {
+      lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      defaultColor: false,
+    })
+    .replace('shiki-themes', 'shiki-themes vp-code');
+
+  return `<div class="language-${lang} ${active ? 'active' : ''}">
+  <button title="Copy Code" class="copy"></button>
+  <span class="lang">${lang}</span>
+  ${highlightedCode}
+  </div>`;
+};
+
+export default async function createCodeExamples() {
+  const codes = getIconCodes();
+
+  const codeExamplePromises = codes.map(async ({ title, language, code }, index) => {
+    const isFirst = index === 0;
+
+    const codeString = await highLightCode(code, language, isFirst);
+
+    return {
+      title,
+      language: language,
+      code: codeString,
+    };
+  });
+
+  return Promise.all(codeExamplePromises);
+}

docs/.vitepress/lib/codeExamples/highLightCode.ts

@@ -0,0 +1,32 @@
+import { bundledLanguages, type ThemeRegistration } from 'shikiji';
+import { getHighlighter } from 'shikiji';
+
+export type ThemeOptions =
+  | ThemeRegistration
+  | { light: ThemeRegistration; dark: ThemeRegistration };
+
+const highLightCode = async (code: string, lang: string, active?: boolean) => {
+  const highlighter = await getHighlighter({
+    themes: ['github-light', 'github-dark'],
+    langs: Object.keys(bundledLanguages),
+  });
+
+  const highlightedCode = highlighter
+    .codeToHtml(code, {
+      lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      defaultColor: false,
+    })
+    .replace('shiki-themes', 'shiki-themes vp-code');
+
+  return `<div class="language-${lang} ${active ? 'active' : ''}">
+  <button title="Copy Code" class="copy"></button>
+  <span class="lang">${lang}</span>
+  ${highlightedCode}
+  </div>`;
+};
+
+export default highLightCode;

docs/.vitepress/lib/codeExamples/types.ts

@@ -0,0 +1,5 @@
+export type CodeExampleType = {
+  title: string;
+  language: string;
+  code: string;
+}[];

docs/.vitepress/lib/fetchPackages.ts

@@ -1,38 +1,36 @@
 import { promises as fs, constants } from 'fs';
 import path from 'path';
-import yaml from 'js-yaml'
 import { PackageItem } from '../theme/types';
 
-const fileExist = (filePath) => fs.access(filePath, constants.F_OK).then(() => true).catch(() => false)
+const fileExist = (filePath) =>
+  fs
+    .access(filePath, constants.F_OK)
+    .then(() => true)
+    .catch(() => false);
 
 const fetchPackages = async (): Promise<PackageItem[]> => {
   const docsDir = path.resolve(process.cwd(), '../packages');
-  const fileNames = await (await fs.readdir(docsDir)).map(filename => ({filename, directory: docsDir}))
+  const fileNames = await (
+    await fs.readdir(docsDir)
+  ).map((filename) => ({ filename, directory: docsDir }));
 
-  const packageJsons = await Promise.all(fileNames.map( async ({filename, directory}) => {
+  const packageJsons = await Promise.all(
-    const filePath = path.resolve(directory, filename)
+    fileNames.map(async ({ filename, directory }) => {
-    const fileStat = await fs.lstat(filePath);
+      const filePath = path.resolve(directory, filename);
+      const fileStat = await fs.lstat(filePath);
 
-    if(!fileStat.isDirectory()) return null;
+      if (!fileStat.isDirectory()) return null;
 
-    const jsonFilePath = path.resolve(filePath, 'package.json')
+      const jsonFilePath = path.resolve(filePath, 'package.json');
-    if (await fileExist(jsonFilePath)) {
+      if (await fileExist(jsonFilePath)) {
-      return JSON.parse(
+        return JSON.parse(await fs.readFile(jsonFilePath, 'utf-8'));
-        await fs.readFile(jsonFilePath, 'utf-8')
+      }
-      )
-    }
 
-    const ymlFilePath = path.resolve(filePath, 'pubspec.yaml')
+      return null;
-    if(await fileExist(ymlFilePath)) {
+    }),
-      return yaml.load(
+  );
-        await fs.readFile(ymlFilePath, 'utf-8')
-      );
-    }
 
-    return null
+  return packageJsons;
-  }))
+};
-
-  return packageJsons
-}
 
 export default fetchPackages;

docs/.vitepress/lib/generateZip.ts

@@ -1,17 +1,15 @@
-export type IconContent = [icon: string, src:string];
+export type IconContent = [icon: string, src: string];
 
 async function generateZip(icons: IconContent[]) {
-  const JSZip = (await import('jszip')).default
+  const JSZip = (await import('jszip')).default;
 
   const zip = new JSZip();
 
-  const addingZipPromises = icons.map(([name, src]) =>
+  const addingZipPromises = icons.map(([name, src]) => zip.file(`${name}.svg`, src));
-    zip.file(`${name}.svg`, src),
-  );
 
-  await Promise.all(addingZipPromises)
+  await Promise.all(addingZipPromises);
 
   return zip.generateAsync({ type: 'blob' });
 }
 
-export default generateZip
+export default generateZip;