Add headset icon (#1780)

* Add headset icon

* Fix lint errors

* Revert headset change

.eslintignore

@@ -4,3 +4,8 @@ coverage
 lib
 tests
 node_modules
+.eslintrc.js
+docs/images
+docs/guide/basics/examples
+docs/guide/advanced/examples
+packages/lucide-react/dynamicIconImports.js

.eslintrc.js

@@ -1,22 +1,18 @@
+const DEFAULT_ATTRS = require('./scripts/render/default-attrs.json');
+
 module.exports = {
+  root: true,
   env: {
     browser: true,
     node: true,
   },
   extends: ['airbnb-base', 'prettier'],
-  plugins: ['import', 'prettier'],
+  plugins: ['import', '@html-eslint'],
   rules: {
     'no-console': 'off',
     'no-param-reassign': 'off',
     'no-shadow': 'off',
     'no-use-before-define': 'off',
-    'prettier/prettier': [
-      'error',
-      {
-        singleQuote: true,
-        trailingComma: 'all',
-      },
-    ],
     'import/no-extraneous-dependencies': [
       'error',
       { devDependencies: ['**/*.test.js', '**/*.spec.js', './scripts/**'] },
@@ -33,8 +29,42 @@ module.exports = {
   },
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ['./site/tsconfig.json', './packages/*/tsconfig.json'],
+    project: ['./docs/tsconfig.json', './packages/*/tsconfig.json'],
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
+  overrides: [
+    {
+      files: ['./icons/*.svg'],
+      parser: '@html-eslint/parser',
+      rules: {
+        '@html-eslint/require-doctype': 'off',
+        '@html-eslint/no-duplicate-attrs': 'error',
+        '@html-eslint/no-inline-styles': 'error',
+        '@html-eslint/require-attrs': [
+           'error',
+             ...Object.entries(DEFAULT_ATTRS)
+               .map(([attr, value]) => ({ tag: 'svg', attr, value: String(value) }))
+        ],
+        '@html-eslint/indent': ['error', 2],
+        "@html-eslint/no-multiple-empty-lines": ["error", { "max": 0 }],
+        '@html-eslint/no-extra-spacing-attrs': [
+          'error',
+          {
+            enforceBeforeSelfClose: true,
+          },
+        ],
+        '@html-eslint/require-closing-tags': [
+          'error',
+          {
+            selfClosing: 'always',
+            allowSelfClosingCustom: true,
+          },
+        ],
+        '@html-eslint/element-newline': 'error',
+        '@html-eslint/no-trailing-spaces': 'error',
+        '@html-eslint/quotes': 'error',
+      }
+    },
+  ],
 };

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+# These are supported funding model platforms
+open_collective: lucide-icons

.github/ISSUE_TEMPLATE/01_icon_request.yml

@@ -0,0 +1,49 @@
+name: Icon request
+description: Suggest a new icon for this project
+labels: ['🙌 icon request']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before submitting an icon request check if it has already been requested. If there is an open request, please add a 👍.
+
+        **Important note**: No new brand logos are allowed, see https://github.com/lucide-icons/lucide/issues/670.
+        Existing brand icons will also be phased out. For brand icons, consider using https://simpleicons.org, which offers purpose-built SVGs that are also on a 24×24px grid.
+  - type: input
+    id: name
+    attributes:
+      label: Icon name
+      description: What should this icon depict? For multiple icons, provide a comma-separated list.
+    validations:
+      required: true
+  - type: textarea
+    id: use-cases
+    attributes:
+      label: Use cases
+      description: Why do you need this icon? Include at least two real-life use cases per requested icon, avoiding generic descriptions like "it's a car icon".
+      placeholder: e.g. I need a star icon to use in my rating system.
+    validations:
+      required: true
+  - type: textarea
+    id: design-ideas
+    attributes:
+      label: Design ideas
+      description: What should this icon look like? Provide simple, minimalistic icon examples from other sets or your own drafts to help us visualize your request.
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Please review the following checklist before submitting your request.
+      options:
+        - label: I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
+          required: true
+        - label: I have searched existing icons to make sure it does not already exist and I didn't find any.
+          required: true
+        - label: I am not requesting a brand logo and the art is not protected by copyright.
+          required: true
+        - label: I am not requesting an icon that includes religious, political imagery or hate symbols.
+          required: true
+        - label: I have provided appropriate use cases for the icon(s) requested.
+          required: true

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -0,0 +1,90 @@
+name: Bug report
+description: Create a report to help us improve
+labels: ['🐛 bug']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
+  - type: checkboxes
+    id: packages
+    attributes:
+      label: Package
+      description: Which Lucide packages are affected? You may select more than one.
+      options:
+        - label: lucide
+        - label: lucide-angular
+        - label: lucide-flutter
+        - label: lucide-preact
+        - label: lucide-react
+        - label: lucide-react-native
+        - label: lucide-solid
+        - label: lucide-svelte
+        - label: lucide-vue
+        - label: lucide-vue-next
+        - label: Figma plugin
+        - label: source/main
+        - label: other/not relevant
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Version
+      description: What version of Lucide are you running?
+      placeholder: e.g. 0.289.1
+    validations:
+      required: true
+  - type: checkboxes
+    id: browsers
+    attributes:
+      label: Browser
+      description: In which browser(s) are you experiencing the issue? You may select more than one.
+      options:
+        - label: Chrome/Chromium
+        - label: Firefox
+        - label: Safari
+        - label: Edge
+        - label: iOS Safari
+        - label: Opera
+        - label: Other/not relevant
+    validations:
+      required: false
+  - type: checkboxes
+    id: operating-systems
+    attributes:
+      label: Operating system
+      description: In which operating systems a you experiencing the issue? You may select more than one.
+      options:
+        - label: Windows
+        - label: Linux
+        - label: macOS
+        - label: Other/not relevant
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Try to describe in detail the problem you're running into and provide additional context about your working environment if necessary.
+      placeholder: e.g. When I do X, Y happens instead of Z
+    validations:
+      required: true
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: Steps to reproduce
+      description: Please provide a detailed guide on how this issue can be reproduced or a live example with a working reproduction on Codesandbox, JSFiddle or similar.
+      placeholder: |
+        1. Import `check` icon
+        2. Add to a React component/view
+        3. Run the react app
+        4. Notice that the `check` isn't rendering correctly which seems a encoding problem
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Please review the following checklist before submitting your issue.
+      options:
+        - label: I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
+          required: true

.github/ISSUE_TEMPLATE/03_bug_report_site.yml

@@ -0,0 +1,62 @@
+name: lucide.dev bug report
+description: Help us improve the Lucide site
+labels: ['🐛 bug', '🌍 site']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
+  - type: checkboxes
+    id: browsers
+    attributes:
+      label: Browser
+      description: In which browser(s) are you experiencing the issue? You may select more than one.
+      options:
+        - label: Chrome/Chromium
+        - label: Firefox
+        - label: Safari
+        - label: Edge
+        - label: iOS Safari
+        - label: Opera
+        - label: Other/not relevant
+    validations:
+      required: false
+  - type: checkboxes
+    id: operating-systems
+    attributes:
+      label: Operating system
+      description: In which operating systems are you experiencing the issue? You may select more than one.
+      options:
+        - label: Windows
+        - label: Linux
+        - label: macOS
+        - label: Other/not relevant
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Try to describe in detail the problem you're running into and provide additional context about your working environment if necessary.
+      placeholder: e.g. When I do X, Y happens instead of Z
+    validations:
+      required: true
+  - type: textarea
+    id: stepsToReproduce
+    attributes:
+      label: Steps to reproduce
+      description: Please provide a detailed guide on how this issue can be reproduced.
+      placeholder: |
+        1. I click on an icon
+        2. I click on `Copy SVG` in the drawer
+        3. I paste from the clipboard
+        4. A base64 encoded data URI is inserted.
+        ...
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Please review the following checklist before submitting your issue.
+      options:
+        - label: I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
+          required: true

.github/ISSUE_TEMPLATE/04_feature_request.yml

@@ -0,0 +1,53 @@
+name: Feature request
+description: Share with us your ideas on how Lucide could be improved upon.
+labels: ['💡 idea']
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before submitting a new feature request, please search to see if someone has filed a similar request before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
+  - type: checkboxes
+    id: packages
+    attributes:
+      label: Package
+      description: Which Lucide project do you wish this feature were added to? You may select more than one.
+      options:
+        - label: lucide
+        - label: lucide-angular
+        - label: lucide-flutter
+        - label: lucide-preact
+        - label: lucide-react
+        - label: lucide-react-native
+        - label: lucide-solid
+        - label: lucide-svelte
+        - label: lucide-vue
+        - label: lucide-vue-next
+        - label: Figma plugin
+        - label: all JS packages
+        - label: site
+    validations:
+      required: true
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: Try to describe in detail the feature you wish existed.
+      placeholder: e.g. I want to be able to set extra CSS classes on icon components.
+    validations:
+      required: true
+  - type: textarea
+    id: use-cases
+    attributes:
+      label: Use cases
+      description: Why do you need this feature? Provide real-life use cases as to why this feature will be useful for others.
+      placeholder: e.g. I could use the extra classes to add animation or global custom styling to some icons.
+    validations:
+      required: true
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      description: Please check the following items before submitting your issue.
+      options:
+        - label: I have searched the existing issues to make sure this bug has not already been reported.
+          required: true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,68 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-labels: "🐛 bug"
----
-
-<!--
-Before reporting an issue, please search to see if someone has filed a similar issue before. If there is already an open issue, please add a 👍 and/or leave a comment with additional information.
--->
-
-## Prerequisites
-
-* Version:
-* Are you running from source/main:
-* Are you using a released build:
-* Operating system: 
-* Bits:
-
-## Step to reproduce
-
-*(Type here)*
-
-### Actual behavior
-
-## Any message or error
-
-*(Type here)*
-
-## Resources
-
-* Links
-* Screenshots
-
-
-Here is what a great bug report would look like:
-
-```
-## Prerequisites
-
-Version: Release v3.1.0
-Running from: Import using webpack
-Operating system: Mac OSX
-Bits: 64 bits
-
-## Step to reproduce
-
- - Import `check` icon
- - Add to a React component/view
- - Run the react app
- - Notice that the `check` isn't rendering correctly which seems a encoding problem
- 
-### Actual behavior:
-
- - Import `check` icon
- - Add to a React component/view
- - Run the react app
- - Check is displayed with correct encoding (e.g UTF-8)
-
-## Any message or error
-
-No console output
-...
-
-## Resources
-
-No resources
-...
-```

.github/ISSUE_TEMPLATE/icon_request.md

@@ -1,18 +0,0 @@
----
-name: Icon request
-about: Suggest an new icon for this project
-labels: "🙌 icon request"
----
-
-<!--
-Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a 👍.
-A note about brand logos and related material : We follow the decision from Feather Icons (https://github.com/feathericons/feather/issues/763) to deprecate icons relating to brands.
-You will find some in the set, but we won't add any new ones. https://simpleicons.org has 24x24 SVG icons for this purpose.
-
--->
-
-## Icon Request
-
-* Icon name:
-* Use case:
-* _Screenshots_ of similar icons:

.github/PULL_REQUEST_TEMPLATE/new-icon.md

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

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

@@ -9,30 +9,30 @@ inputs:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 16
 
-    - uses: pnpm/action-setup@v2.0.1
+    - uses: pnpm/action-setup@v2
       name: Install pnpm
       id: pnpm-install
       with:
-        version: 7
+        version: 8
         run_install: false
 
     - 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 }}
-        key: ${{ runner.os }}-lucide-preact-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        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

@@ -9,30 +9,30 @@ inputs:
 runs:
   using: "composite"
   steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
         node-version: 16
 
-    - uses: pnpm/action-setup@v2.0.1
+    - uses: pnpm/action-setup@v2
       name: Install pnpm
       id: pnpm-install
       with:
-        version: 7
+        version: 8
         run_install: false
 
     - 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 }}
-        key: ${{ runner.os }}-lucide-preact-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+        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,92 @@
+# For changed dependencies
+📦 dependencies:
+- changed-files:
+  - any-glob-to-any-file:
+    - pnpm-lock.yaml
+
+# For changes in documentation
+📖 documentation:
+- changed-files:
+  - any-glob-to-any-file:
+    - docs/*.md
+    - docs/**/*.md
+
+# For changes in the site, but not markdown files
+🌍 site:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'docs/**'
+
+# For changes in the metadata
+🫧 metadata:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'icons/*.json'
+    - categories/*
+
+# For changes or added icons
+🎨 icon:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'icons/*.svg'
+
+# For changes in the lucide package
+🧳 lucide package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide/*'
+
+# For changes in the lucide React package
+⚛️ react package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide-react/*'
+
+# For changes in the lucide React Native package
+⚛️ react native package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide-react-native/*'
+
+# For changes in the lucide vue packages
+💎 vue package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide-vue/*'
+    - 'packages/lucide-vue-next/*'
+
+# For changes in the lucide angular package
+🅰️ angular package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide-angular/*'
+
+# For changes in the lucide preact package
+⚛️ preact package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide-preact/*'
+
+# For changes in the lucide svelte package
+🧣 svelte package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide-svelte/*'
+
+# For changes in the lucide solid package
+🪝 solid package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide-solid/*'
+
+# For changes in the lucide static package
+🪨 static package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide-static/*'
+
+# For changes in the lucide flutter package
+🏹 flutter package:
+- changed-files:
+  - any-glob-to-any-file:
+    - 'packages/lucide-flutter/*'

.github/pull_request_template.md

@@ -0,0 +1,55 @@
+<!-- Thank you for contributing! -->
+
+<!-- Insert `closes #issueNumber` here if merging this PR will resolve an existing issue -->
+
+## What is the purpose of this pull request?
+<!-- Please choose one of the following, and put an "x" next to it. -->
+- [ ] New Icon
+- [ ] Bug fix
+- [ ] New Feature
+- [ ] Documentation update
+- [ ] Other:
+
+### Description
+<!-- Please insert your description here and provide info about the "what" this PR is contribution -->
+
+### Icon use case <!-- ONLY for new icons, remove this part if not icon PR -->
+<!-- What is the purpose of this icon? For each icon added, please insert at least two real life use cases (the more the better). Text like "it's a car icon" is not accepted. -->
+
+### Alternative icon designs <!-- ONLY for new icons, remove this part if not icon PR -->
+<!-- If you have any alternative icon designs, please attach them here. -->
+
+## Icon Design Checklist <!-- ONLY for new icons, remove this part if not icon PR -->
+
+### Concept <!-- ONLY for new icons -->
+<!-- All of these requirements must be fulfilled. -->
+- [ ] I have provided valid use cases for each icon.
+- [ ] I have not added any a brand or logo icon.
+- [ ] I have not used any hate symbols.
+- [ ] I have not included any religious or political imagery.
+
+### Author, credits & license<!-- ONLY for new icons. -->
+<!-- Please choose one of the following, and put an "x" next to it. -->
+- [ ] The icons are solely my own creation.
+- [ ] The icons were originally created in #<issueNumber> by @<githubUser>
+- [ ] I've based them on the following Lucide icons: <!-- provide the list of icons -->
+- [ ] I've based them on the following design: <!-- provide source URL and license permitting use -->
+
+### Naming <!-- ONLY for new icons -->
+<!-- All of these requirements must be fulfilled. -->
+- [ ] I've read and followed the [naming conventions](https://lucide.dev/guide/design/icon-design-guide#naming-conventions)
+- [ ] I've named icons by what they are rather than their use case.
+- [ ] I've provided meta JSON files in `icons/[iconName].json`.
+
+### Design <!-- ONLY for new icons -->
+<!-- All of these requirements must be fulfilled. -->
+- [ ] I've read and followed the [icon design guidelines](https://lucide.dev/guide/design/icon-design-guide)
+- [ ] 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.
+
+## Before Submitting <!-- For every PR! -->
+<!-- All of these requirements must be fulfilled. -->
+- [ ] I've read the [Contribution Guidelines](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).
+- [ ] I've checked if there was an existing PR that solves the same issue.

.github/workflows/ci.yml

@@ -10,64 +10,47 @@ 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
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Fetch tags
         run: git fetch --all --tags
 
       - name: Get latest tag
         id: latest-tag
-        run: echo "::set-output name=LATEST_TAG::$(git describe --tags `git rev-list --tags --max-count=1`)"
-
-      - name: Install dependencies
-        run: pnpm install
+        run: echo "LATEST_TAG=$(git describe --tags `git rev-list --tags --max-count=1`)" >> $GITHUB_OUTPUT
 
       - name: Check if we can patch
         run: .github/workflows/version-up.sh --minor
 
       - 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="${CHANGE_LOG//$'\n'/'%0A'}"
-          CHANGE_LOG="${CHANGE_LOG//$'\r'/'%0D'}"
+          CHANGE_LOG=$(tail -n +5 <<< $CHANGE_LOG)
           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 +59,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/close-stale-prs.yml

@@ -7,12 +7,11 @@ jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v3
+      - uses: actions/stale@v9
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           stale-pr-message: This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.
           close-pr-message: This PR was closed because it has been stalled for 5 days with no activity.
           close-pr-label: 🧶 stale
           days-before-stale: 30
-          days-before-close: 5
-          days-before-pr-close: -1
+          days-before-close: -1

.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@v5

.github/workflows/linting.yml

@@ -0,0 +1,25 @@
+name: Linting
+
+on:
+  pull_request:
+    branches:
+      - '**'
+
+jobs:
+  linting:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run Linter
+        run: pnpm lint

.github/workflows/lucide-angular.yml

@@ -4,39 +4,24 @@ on:
   pull_request:
     paths:
       - packages/lucide-angular/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:
   lucide-angular:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide-angular build

.github/workflows/lucide-font.yml

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

.github/workflows/lucide-preact.yml

@@ -4,39 +4,25 @@ on:
   pull_request:
     paths:
       - packages/lucide-preact/**
+      - tools/build-icons/**
+      - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
 jobs:
   lucide-preact:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide-preact build

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

@@ -4,39 +4,25 @@ on:
   pull_request:
     paths:
       - packages/lucide-react-native/**
+      - tools/build-icons/**
+      - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
 jobs:
   lucide-react-native:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide-react-native build

.github/workflows/lucide-react.yml

@@ -4,39 +4,26 @@ on:
   pull_request:
     paths:
       - packages/lucide-react/**
+      - tools/build-icons/**
+      - tools/rollup-plugins/**
+      - scripts/generateNextJSAliases.mjs
       - pnpm-lock.yaml
 
 jobs:
   lucide-react:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide-react build

.github/workflows/lucide-solid.yml

@@ -4,39 +4,25 @@ on:
   pull_request:
     paths:
       - packages/lucide-solid/**
+      - tools/build-icons/**
+      - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
 jobs:
   lucide-solid:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide-solid build

.github/workflows/lucide-static.yml

@@ -4,39 +4,24 @@ on:
   pull_request:
     paths:
       - packages/lucide-static/**
+      - tools/build-icons/**
       - pnpm-lock.yaml
 
 jobs:
   lucide-static:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide-static build

.github/workflows/lucide-svelte.yml

@@ -4,39 +4,25 @@ on:
   pull_request:
     paths:
       - packages/lucide-svelte/**
+      - tools/build-icons/**
+      - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
 jobs:
   lucide-svelte:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide-svelte build

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

@@ -4,39 +4,25 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue-next/**
+      - tools/build-icons/**
+      - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
 jobs:
   lucide-vue-next:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide-vue-next build

.github/workflows/lucide-vue.yml

@@ -4,39 +4,25 @@ on:
   pull_request:
     paths:
       - packages/lucide-vue/**
+      - tools/build-icons/**
+      - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
 jobs:
   lucide-vue:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide-vue build

.github/workflows/lucide.yml

@@ -4,39 +4,25 @@ on:
   pull_request:
     paths:
       - packages/lucide/**
+      - tools/build-icons/**
+      - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
 jobs:
   lucide:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Build
         run: pnpm --filter lucide build

.github/workflows/pull-request.yml

@@ -4,54 +4,106 @@ on:
   pull_request_target:
     paths:
       - 'icons/*.svg'
-
-permissions:
-  pull-requests: write
-  contents: write
+    branches:
+      - main
+      - fix-icon-preview
 
 jobs:
-  add-changed-icons-comment:
+  lint-filenames:
+    if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
           ref: refs/pull/${{ github.event.pull_request.number }}/merge
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@v35
+        uses: tj-actions/changed-files@v41
+        with:
+          files: icons/*
+      - name: Generate annotations
+        run: node ./scripts/lintFilenames.mjs
+        env:
+          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
+
+  lint-contributors:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: refs/pull/${{ github.event.pull_request.number }}/merge
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v41
+        with:
+          files: icons/*
+      - uses: actions/setup-node@v4
+      - name: Install simple-git (safer and faster than installing all deps)
+        run: npm install simple-git
+      - name: Generate annotations
+        run: node ./scripts/updateContributors.mjs
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          FETCH_DEPTH: ${{ github.event.pull_request.commits }}
+          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
+      - name: Generate annotations
+        env:
+          ANNOTATION_SEVERITY: notice
+          ANNOTATION_TITLE: Contributors have changed!
+          ANNOTATION_DESCRIPTION: Don't add people who have only performed automatic optimizations.
+        run: |
+          git diff --unified=0 -- icons/*.json | # diff icon metadata (unified=0 gives the correct chunk line number)
+          perl -ne '/^(\+|- |@)/ && print' | # get chunks (lines that start with "+++", "@@", "+ ", "- ")
+          perl -pe 's/\n/%0A/' | # url encode line breaks (\n -> %0A)
+          perl -pe 's/%0A(\+\+\+ b\/)/\n\1/g' | # split chunks(one chunk per line)
+          perl -pe "s/\+\+\+ b\/([^@]*)%0A@@ -(\d+)[^\s]* \+(\d+)[^@]*@@(.*)/::$ANNOTATION_SEVERITY file=\1,line=\2,endLine=\3,title=$ANNOTATION_TITLE::$ANNOTATION_DESCRIPTION%0A\4/"
+          # Example for the previous substitution
+          # 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
+
+  generate-changed-icons-comment:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          ref: refs/pull/${{ github.event.pull_request.number }}/merge
+
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v41
         with:
           files: icons/*.svg
-      - name: Generate comment
-        id: generate-comment
-        run: |
-          delimiter="$(openssl rand -hex 8)"
-          echo "body<<$delimiter" >> $GITHUB_OUTPUT
-          for file in ${{ steps.changed-files.outputs.all_changed_files }}; do
-            cat "$file" | # get file content
-            tr '\n' ' ' | # remove line breaks
-            sed -e 's/<svg[^>]*>/<svg>/g' | # remove attributes from svg element
-            base64 -w 0 | # encode svg
-            sed "s|.*|<img width=\"400\" title=\"$file\" alt=\"$file\" src=\"https://lucide.dev/api/gh-icon/&.svg\"/> |"
-          done | tr '\n' ' ' >> $GITHUB_OUTPUT
-          echo >> $GITHUB_OUTPUT
-          echo "$delimiter" >> $GITHUB_OUTPUT
+
       - name: Find Comment
         uses: peter-evans/find-comment@v2
-        id: fc
+        id: pr-comment
         with:
           issue-number: ${{ github.event.pull_request.number }}
           comment-author: 'github-actions[bot]'
           body-includes: Added or changed icons
+
+      - name: Generate comment markup
+        run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> comment-markup.md
+        id: comment-markup
+        env:
+          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
+
       - name: Create or update comment
-        uses: peter-evans/create-or-update-comment@v2
+        uses: peter-evans/create-or-update-comment@v3
         with:
-          comment-id: ${{ steps.fc.outputs.comment-id }}
+          comment-id: ${{ steps.pr-comment.outputs.comment-id }}
           issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            ### Added or changed icons
-            <details>
-            <summary>Icon X-rays</summary>
-            ${{ steps.generate-comment.outputs.body }}
-            </details>
+          body-path: ./comment-markup.md
           edit-mode: replace

.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:
-    if: github.repository == 'lucide-icons/lucide' && contains('["locness3","ericfennis", "johnletey", "karsa-mistmere"]', github.actor)
+  pre-release:
+    if: github.repository == 'lucide-icons/lucide' && contains('["ericfennis", "karsa-mistmere"]', github.actor)
     runs-on: ubuntu-latest
     outputs:
       VERSION: ${{ steps.get_version.outputs.VERSION }}
@@ -23,544 +30,79 @@ 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:
+      fail-fast: false
+      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
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - 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
-
-      - 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
+        run: pnpm --filter ${{ matrix.package }} publish --no-git-checks --ignore-scripts
 
   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
-
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/download-artifact@v3
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - 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,185 +113,55 @@ 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
-    container: ericfennis/lucide-font:latest
+    needs: pre-release
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3.4.1
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
         with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
+          version: 8
+      - uses: actions/setup-node@v4
         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-
+          node-version: 18
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: pnpm install --filter outline-svg
+        run: pnpm install --frozen-lockfile
 
       - name: Outline svg Icons
         run: pnpm build:outline-icons
 
-      - name: Create directory
-        run: mkdir lucide-font
-
-      - name: Build font
-        run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
+      - name: Create font in ./lucide-font
+        run: pnpm build:font
 
       - name: "Upload to Artifacts"
-        uses: actions/upload-artifact@v1
+        uses: actions/upload-artifact@v3
         with:
           name: lucide-font
           path: lucide-font
 
-  lucide-flutter:
-    if: github.repository == 'lucide-icons/lucide'
-    runs-on: ubuntu-latest
-    needs: [pre-build, lucide-font]
-    container:
-      image: cirrusci/flutter:latest
-    steps:
-      - uses: actions/checkout@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:
-      [
-        pre-build,
-        lucide,
-        lucide-react,
-        lucide-react-native,
-        lucide-vue,
-        lucide-vue-next,
-        lucide-angular,
-        lucide-svelte,
-        lucide-preact,
-        lucide-flutter,
-        lucide-font,
-      ]
+    needs: [
+      pre-release,
+      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
-
+      - uses: actions/checkout@v4
+      - uses: actions/download-artifact@v3
       - name: Zip font and icons
         run: |
-          zip -r lucide-font-${{ needs.pre-build.outputs.VERSION }}.zip lucide-font
-          zip -r lucide-icons-${{ needs.pre-build.outputs.VERSION }}.zip icons
+          zip -r lucide-font-${{ needs.pre-release.outputs.VERSION }}.zip lucide-font
+          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-icons-${{ needs.pre-build.outputs.VERSION }}.zip
+            lucide-font-${{ needs.pre-release.outputs.VERSION }}.zip
+            lucide-icons-${{ needs.pre-release.outputs.VERSION }}.zip

.gitignore

@@ -17,6 +17,24 @@ 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
+.vercel
+
+# docs
+docs/.vitepress/cache
+docs/.vitepress/dist
+docs/.vitepress/.temp
+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

.npmignore

@@ -4,7 +4,6 @@ stats
 node_modules
 tests
 scripts
-site
 src
 build
 babel.config.js

.prettierignore

@@ -0,0 +1,16 @@
+pnpm-lock.yaml
+
+# lucide-angular
+packages/lucide-angular/.angular/cache
+
+# lucide-static
+packages/lucide-static/icons
+packages/lucide-static/lib
+packages/lucide-static/sprite.svg
+packages/lucide-static/tags.json
+packages/lucide-static/icon-nodes.json
+packages/lucide-static/font
+
+# lucide-svelte
+packages/lucide-svelte/src/icons/*.svelte
+packages/lucide-svelte/.svelte-kit

.vscode/settings.json

@@ -3,5 +3,11 @@
     "devs",
     "preact",
     "Preact"
-  ]
+  ],
+  "eslint.enable": true,
+  "eslint.validate": [
+    "javascript",
+    "svg"
+  ],
+  "svg.preview.background": "transparent"
 }

.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\" />"
+  }
+}

CONTRIBUTING.md

@@ -25,19 +25,19 @@ Guidelines for pull requests:
 
 Please make sure you follow the icon guidelines, that should be followed to keep quality and consistency when making icons for Lucide.
 
-Read it here: [ICON_GUIDELINES](/docs/icon-design-guide.md).
+Read it here: [ICON_GUIDELINES](https://lucide.dev/docs/icon-design-guide).
 
 ### Editor guides
 
 Here you can find instructions on how to implement the guidelines with different vector graphics editors:
 
-#### [Adobe Illustrator Guide](/docs/illustrator-guide.md)
+#### [Adobe Illustrator Guide](https://lucide.dev/docs/illustrator-guide)
 
-You can also [download an Adobe Illustrator template](/docs/templates/illustrator-template.ai).
+You can also [download an Adobe Illustrator template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/illustrator_template.ai).
 
-#### [Inkscape Guide](/docs/inkscape-guide.md)
+#### [Inkscape Guide](https://lucide.dev/docs/inkscape-guide)
 
-#### [Figma Guide](/docs/figma-guide.md)
+#### [Figma Guide](https://lucide.dev/docs/figma-guide)
 
 ### Submitting Multiple Icons
 
@@ -50,7 +50,7 @@ Seperate them by two PRs; 'pr-01' `arrow`, `arrow-down` and 'pr-02' `bicycle`.
 
 Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a :+1:.
 
-If the icon has not already been requested, [create an issue](https://github.com/lucide-icons/lucide/issues/new?title=Icon%20Request:) with a title of `Icon request: <icon name>` and add as much information as possible.
+If the icon has not already been requested, [create an icon request issue](https://github.com/lucide-icons/lucide/issues/new?assignees=&labels=%F0%9F%99%8C+icon+request&projects=&template=01_icon_request.yml) and add as much information as possible.
 
 ### Icon Requests from Feather
 
@@ -70,10 +70,10 @@ pnpm install # Install dependencies, including the workspace packages
 
 ### Packages -> PNPM Workspaces
 
-To distribute different packages we use PNPM workspaces. Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces).
+To distribute different packages we use PNPM workspaces. Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/lang/enhttps://lucide.dev/docs/workspaces).
 
-The configured directory for workspaces is the [packages](./packages) directory, located in the root directory. There you will find all the current packages from lucide.
-There are more workspaces defined, see [`pnpm-workspace.yaml`](./pnpm-workspace.yaml).
+The configured directory for workspaces is the [packages](https://github.com/lucide-icons/lucide/tree/main/packages) directory, located in the root directory. There you will find all the current packages from lucide.
+There are more workspaces defined, see [`pnpm-workspace.yaml`](https://github.com/lucide-icons/lucide/blob/main/pnpm-workspace.yaml).
 
 > Note: One package is not managed by pnpm:  **lucide-flutter**, this package is written in Dart and used pub for publishing.
 
@@ -144,16 +144,19 @@ Root directories
 
 ```sh
 lucide
-|
 ├── docs
+│   ├── guide
 ├── icons
 ├── packages
-├── scripts
-└── site
+└── scripts
 ```
 
 ### Docs
 
+The lucide.dev website is using [vitepress](https://vitepress.dev/) to generate the static website. The markdown files are located in the docs directory.
+
+### Guides
+
 Detailed documentation about: installation, guides, packages, design guides etc.
 
 ### Icons
@@ -170,13 +173,9 @@ Includes all the (npm) packages of lucide.
 
 Includes usefully scripts to automate certain jobs. Big part of the scripts is the template generation, for example it generates icon components  for all the packages. These scripts are usually executed from the "scripts" section in the package.json.
 
-### site
-
-The lucide.dev website using [Nextjs](https://nextjs.org).
-
 ## Documentation
 
-The documentation files are located in the [docs](./docs) directory. All these markdown files will be loaded in the build of the lucide.dev website.
+The documentation files are located in the [docs](https://github.com/lucide-icons/lucide/tree/main/docs) directory. All these markdown files will be loaded in the build of the lucide.dev website.
 
 Feel free to write, adjust or add new markdown files to improve our documentation.
 

README.md

@@ -11,14 +11,14 @@
 
 Community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
 
-It began after growing disaffection with the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
+It began after growing dissatisfaction with the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
 
 Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!
 
 ### Why choose Lucide over Feather Icons
 
 - More icons to work with: Lucide already has hundreds of icons more than Feather does.
-- Official librairies and integrations with popular frameworks and design tools.
+- Official libraries and integrations with popular frameworks and design tools.
 - Well maintained code base.
 - Active community, regularly growing and improving the set.
 
@@ -35,7 +35,6 @@ Lucide is trying to expand the icon set as much as possible while staying faithf
   - [Static (svg sprite, font, icons ..)](#static-svg-sprite-font-icons-)
   - [Figma](#figma)
   - [Laravel](#laravel)
-  - [Flutter](#flutter)
   - [Svelte](#svelte)
   - [Solid](#solid)
   - [Hyva](#hyva)
@@ -166,8 +165,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)
-[SVG 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/latest)
 [SVG Sprite](https://cdn.jsdelivr.net/npm/lucide-static@latest/sprite.svg)
 
 NPM package
@@ -200,16 +199,6 @@ composer require mallardduck/blade-lucide-icons
 
 For more details, see the [documentation](https://github.com/mallardduck/blade-lucide-icons/blob/main/README.md).
 
-### Flutter
-
-Implementation of Lucide icon library for Flutter applications.
-
-```sh
-flutter pub add lucide_icons
-```
-
-For more details, see the [pub.dev](https://pub.dev/packages/lucide_icons).
-
 ### Svelte
 
 Implementation of the lucide icon library for Svelte applications.
@@ -285,6 +274,9 @@ 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>
+
+<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>

categories/coding.json

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

categories/development.json

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

categories/files.json

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

categories/layout.json

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

categories/transportation.json

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

category.schema.json

@@ -12,8 +12,10 @@
   },
   "title": "Lucide Icons category schema",
   "type": "object",
+  "additionalProperties": false,
+  "required": ["$schema", "icon", "title"],
   "properties": {
-    "title": {
+    "$schema": {
       "type": "string"
     },
     "description": {
@@ -22,13 +24,12 @@
     "icon": {
       "type": "string"
     },
+    "title": {
+      "type": "string"
+    },
     "weight": {
       "type": "integer"
     }
   },
-  "required": [
-    "title",
-    "icon"
-  ],
   "description": "A JSON Schema for categories defined by Lucide Icons."
 }

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/gh-icon/[...data].get.ts

@@ -0,0 +1,53 @@
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import { createElement } from 'react';
+import SvgPreview from '../../lib/SvgPreview/index.tsx';
+import iconNodes from '../../data/iconNodes';
+import createLucideIcon from 'lucide-react/src/createLucideIcon';
+import Backdrop from '../../lib/SvgPreview/Backdrop.tsx';
+
+export default eventHandler((event) => {
+  const { params } = event.context;
+
+  const pathData = params.data.split('/');
+  const data = pathData.at(-1).slice(0, -4);
+  const [name] = pathData;
+
+  const src = Buffer.from(data, 'base64').toString('utf8');
+
+  const children = [];
+
+  // Finds the longest matching icon to be use as the backdrop.
+  // For `square-dashed-bottom-code` it suggests `square-dashed-bottom-code`.
+  // For `square-dashed-bottom-i-dont-exist` it suggests `square-dashed-bottom`.
+  const backdropName = name
+    .split('-')
+    .map((_, idx, arr) => arr.slice(0, idx + 1).join('-'))
+    .reverse()
+    .find((groupName) => groupName in iconNodes);
+  if (backdropName) {
+    const iconNode = iconNodes[backdropName];
+
+    const LucideIcon = createLucideIcon(backdropName, iconNode);
+    const svg = renderToStaticMarkup(createElement(LucideIcon));
+    const backdropString = svg.replace(/<svg[^>]*>|<\/svg>/g, '');
+
+    children.push(
+      createElement(Backdrop, {
+        backdropString,
+        src,
+        color: name in iconNodes ? 'red' : '#777',
+      })
+    );
+  }
+
+  const svg = Buffer.from(
+    // We can't use jsx here, is not supported here by nitro.
+    renderToString(createElement(SvgPreview, { src, showGrid: true }, children))
+  ).toString('utf8');
+
+  defaultContentType(event, 'image/svg+xml');
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+
+  return svg;
+});

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

@@ -0,0 +1,73 @@
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { Resvg, initWasm } from '@resvg/resvg-wasm';
+import wasm from './loadWasm';
+
+var initializedResvg = initWasm(wasm);
+
+export default eventHandler(async (event) => {
+  const { params = {} } = event.context;
+  await initializedResvg;
+
+  const imageSize = 96;
+  const [iconSizeString, svgData] = params.data.split('/');
+  const iconSize = parseInt(iconSizeString, 10);
+  const data = svgData.slice(0, -4);
+
+  const src = Buffer.from(data, 'base64').toString('utf8');
+  const svg = (src.includes('<svg') ? src : `<svg>${src}</svg>`)
+    .replace(/(\r\n|\n|\r)/gm, '')
+    .replace(
+      /<svg[^>]*/,
+      `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="${iconSize}"
+  height="${iconSize}"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#fff"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+`
+    );
+
+  const resvg = new Resvg(svg, { background: '#000' });
+  const pngData = resvg.render();
+  const pngBuffer = Buffer.from(pngData.asPng());
+
+  defaultContentType(event, 'image/svg+xml');
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+
+  return `
+<svg xmlns="http://www.w3.org/2000/svg" width="${imageSize}" height="${imageSize}" viewBox="0 0 ${imageSize} ${imageSize}">
+  <style>
+    @media screen and (prefers-color-scheme: light) {
+      #fallback-background { fill: transparent; }
+    }
+    @media screen and (prefers-color-scheme: dark) {
+      #fallback-background { fill: transparent; }
+      rect { fill: #fff; }
+    }
+  </style>
+  <mask id="mask">
+    <image
+      width="${imageSize}"
+      height="${imageSize}"
+      href="data:image/png;base64,${pngBuffer.toString('base64')}"
+      image-rendering="pixelated"
+    />
+  </mask>
+  <rect
+    id="fallback-background"
+    width="${imageSize}"
+    height="${imageSize}" ry="${imageSize / 24}"
+    fill="#fff"
+  />
+  <rect
+    width="${imageSize}"
+    height="${imageSize}"
+    fill="#000"
+    mask="url(#mask)"
+  />
+</svg>`;
+});

docs/.vitepress/api/gh-icon/dpi/loadWasm.ts

@@ -0,0 +1,15 @@
+import fs from 'fs';
+import module from 'node:module';
+/* WASM_IMPORT */
+
+let wasm;
+
+if (process.env.NODE_ENV === 'development') {
+  const require = module.createRequire(import.meta.url);
+
+  wasm = fs.readFileSync(require.resolve('@resvg/resvg-wasm/index_bg.wasm'));
+} else {
+  wasm = resvg_wasm;
+}
+
+export default wasm;

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

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

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

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

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

@@ -0,0 +1,45 @@
+import { eventHandler, getQuery, setResponseHeader, createError } from 'h3'
+import iconNodes from '../../data/iconNodes'
+import createLucideIcon from 'lucide-react/src/createLucideIcon'
+import { renderToString } from 'react-dom/server'
+import { createElement } from 'react'
+
+export default eventHandler((event) => {
+  const { params } = event.context
+
+  const iconNode = iconNodes[params.iconName]
+
+  if (iconNode == null) {
+    const error = createError({
+      statusCode: 404,
+      message: `Icon "${params.iconName}" not found`,
+    })
+
+    return sendError(event, error)
+  }
+
+  const width = getQuery(event).width || undefined
+  const height = getQuery(event).height || undefined
+  const color = getQuery(event).color || undefined
+  const strokeWidth = getQuery(event).strokeWidth || undefined
+
+  const LucideIcon = createLucideIcon(params.iconName, iconNode)
+
+  const svg = Buffer.from(
+    renderToString(
+      createElement(LucideIcon, {
+        width,
+        height,
+        color: color ? `#${color}` : undefined,
+        strokeWidth,
+      }
+    ))
+  ).toString('utf8');
+
+  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

@@ -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, { tags }]) => [ name, tags ])
+  )
+})

docs/.vitepress/api/test.ts

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

docs/.vitepress/config.ts

@@ -0,0 +1,130 @@
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vitepress'
+import sidebar from './sidebar';
+
+const title = "Lucide";
+const socialTitle = "Lucide Icons";
+const description = "Beautiful & consistent icon toolkit made by the community."
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title,
+  description,
+  cleanUrls: true,
+  outDir: '.vercel/output/static',
+  srcExclude: ['**/README.md'],
+  vite: {
+    resolve: {
+      alias: [
+        {
+          find: /^.*\/VPIconAlignLeft\.vue$/,
+          replacement: fileURLToPath(
+            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)
+          )
+        }
+      ]
+    },
+  },
+  head: [
+    [ 'script', {
+      src: 'https://analytics.lucide.dev/js/script.js',
+      'data-domain': 'lucide.dev',
+      defer: ''
+    }],
+    [ 'meta', {
+      property:"og:locale",
+      content:"en_US"
+    }],
+    [ 'meta', {
+      property:"og:type",
+      content:"website"
+    }],
+    [ 'meta', {
+      property:"og:site_name",
+      content: title,
+    }],
+    [ 'meta', {
+      property:"og:title",
+      content: socialTitle,
+    }],
+    [ 'meta', {
+      property:"og:description",
+      content: description
+    }],
+    [ 'meta', {
+      property:"og:url",
+      content:"https://lucide.dev"
+    }],
+    [ 'meta', {
+      property:"og:image",
+      content: "https://lucide.dev/og.png"
+    }],
+    [ 'meta', {
+      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'
+    },
+    nav: [
+      { text: 'Icons', link: '/icons/' },
+      { text: 'Guide', link: '/guide/' },
+      { text: 'Packages', link: '/packages' },
+      { text: 'Showcase', link: '/showcase' },
+      { text: 'License', link: '/license' },
+    ],
+    sidebar,
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/lucide-icons/lucide' },
+      { icon: 'discord', link: 'https://discord.gg/EH6nSts' }
+    ],
+    footer: {
+      message: 'Released under the ISC License.',
+      copyright: `Copyright © ${new Date().getFullYear()} Lucide Contributors`
+    },
+    editLink: {
+      pattern: 'https://github.com/lucide-icons/lucide/edit/main/docs/:path'
+    },
+    carbonAds: {
+      code: 'CWYIC53U',
+      placement: 'lucidedev'
+    }
+  },
+  sitemap: {
+    hostname: 'https://lucide.dev/'
+  }
+})

docs/.vitepress/data/companiesData.json

@@ -0,0 +1,50 @@
+[
+  {
+    "name": "Vercel",
+    "url": "https://vercel.com",
+    "image": {
+      "light": "/company-logos/vercel-light.svg",
+      "dark": "/company-logos/vercel-dark.svg"
+    }
+  },
+  {
+    "name": "Supabase",
+    "url": "https://supabase.com",
+    "image": {
+      "light": "/company-logos/supabase-light.svg",
+      "dark": "/company-logos/supabase-dark.svg"
+    }
+  },
+  {
+    "name": "Obsidian",
+    "url": "https://obsidian.md",
+    "image": {
+      "light": "/company-logos/obsidian-light.svg",
+      "dark": "/company-logos/obsidian-dark.svg"
+    }
+  },
+  {
+    "name": "Open Collective",
+    "url": "https://opencollective.com",
+    "image": {
+      "light": "/company-logos/open-collective-light.svg",
+      "dark": "/company-logos/open-collective-dark.svg"
+    }
+  },
+  {
+    "name": "Super",
+    "url": "https://super.so",
+    "image": {
+      "light": "/company-logos/super-light.svg",
+      "dark": "/company-logos/super-dark.svg"
+    }
+  },
+  {
+    "name": "Noodle",
+    "url": "https://noodle.run/",
+    "image": {
+      "light": "/company-logos/noodle-light.svg",
+      "dark": "/company-logos/noodle-dark.svg"
+    }
+  }
+]

docs/.vitepress/data/componentLibrariesData.json

@@ -0,0 +1,18 @@
+[
+  {
+    "name": "Shadcn/ui",
+    "url": "https://ui.shadcn.com/",
+    "image": {
+      "light": "/library-logos/shadcn-ui-light.svg",
+      "dark": "/library-logos/shadcn-ui-dark.svg"
+    }
+  },
+  {
+    "name": "Tamagui",
+    "url": "https://tamagui.dev/",
+    "image": {
+      "light": "/library-logos/tamagui.svg",
+      "dark": "/library-logos/tamagui.svg"
+    }
+  }
+]

docs/.vitepress/data/packageData.thirdParty.json

@@ -22,6 +22,7 @@
     "name": "hyva-lucide-icons",
     "description": "Implementation of Lucide icon's using Hyvä's svg php viewmodal to render icons for Magento 2 Hyva theme based projects.",
     "icon": "/framework-logos/hyva.svg",
+    "iconDark": "/framework-logos/hyva-dark.svg",
     "shields": [
       {
         "alt": "Latest Stable Version",
@@ -41,6 +42,7 @@
     "name": "eleventy-lucide-icons",
     "description": "Using this plugin, Eleventy projects can incorporate Lucide icons. it makes it simple to use Lucide icons into your themes via shortcodes, improving your website's overall usability and visual appeal.",
     "icon": "/framework-logos/11ty.svg",
+    "iconClass": "package-icon-invert",
     "shields": [
       {
         "alt": "Latest Stable Version",
@@ -55,5 +57,24 @@
     ],
     "source": "https://github.com/GrimLink/eleventy-plugin-lucide-icons",
     "documentation": "https://github.com/GrimLink/eleventy-plugin-lucide-icons/blob/main/README.md"
+  },
+  {
+    "name": "nuxt-lucide-icons",
+    "description": "Using this module, Nuxt projects can incorporate Lucide icons. It is fully configurable and supports auto imports and tree-shaking.",
+    "icon": "/framework-logos/nuxt.svg",
+    "shields": [
+      {
+        "alt": "Latest Stable Version",
+        "src": "https://img.shields.io/npm/v/nuxt-lucide-icons",
+        "href": "https://www.npmjs.com/package/nuxt-lucide-icons"
+      },
+      {
+        "alt": "Total Downloads",
+        "src": "https://img.shields.io/npm/dw/nuxt-lucide-icons",
+        "href": "https://www.npmjs.com/package/nuxt-lucide-icons"
+      }
+    ],
+    "source": "https://github.com/swisnl/nuxt-lucide-icons",
+    "documentation": "https://github.com/swisnl/nuxt-lucide-icons/blob/main/README.md"
   }
 ]

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+interface BackdropProps {
+  src: string;
+  color?: string;
+  backdropString: string;
+}
+
+const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.Element => {
+  return (
+    <>
+      <defs xmlns="http://www.w3.org/2000/svg">
+        <pattern
+          id="pattern"
+          width=".1"
+          height=".1"
+          patternUnits="userSpaceOnUse"
+          patternTransform="rotate(45 50 50)"
+        >
+          <line 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">
+        <g stroke="#fff" dangerouslySetInnerHTML={{ __html: backdropString }} />
+        <g dangerouslySetInnerHTML={{ __html: src }} strokeWidth={2.05} />
+      </mask>
+      <mask id="svg-preview-backdrop-mask-fill" maskUnits="userSpaceOnUse">
+        <g stroke="#fff" dangerouslySetInnerHTML={{ __html: backdropString }} />
+        <g dangerouslySetInnerHTML={{ __html: src }} strokeWidth={2.05} />
+        <g strokeWidth={1.75} dangerouslySetInnerHTML={{ __html: backdropString }} />
+      </mask>
+      <g strokeWidth={2.25} stroke="url(#pattern)" mask={'url(#svg-preview-backdrop-mask-outline)'}>
+        <rect x="0" y="0" width="24" height="24" fill="url(#pattern)" opacity={0.5} stroke="none" />
+      </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)'}
+      />
+    </>
+  );
+};
+
+export default Backdrop;

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

@@ -4,7 +4,7 @@ import { getPaths, assert } from './utils';
 
 const Grid = ({
   radius,
-  fill,
+  fill = '#fff',
   ...props
 }: {
   strokeWidth: number;
@@ -12,6 +12,7 @@ const Grid = ({
 } & PathProps<'stroke', 'strokeWidth'>) => (
   <g className="svg-preview-grid-group" strokeLinecap="butt" {...props}>
     <rect
+      className="svg-preview-grid-rect"
       width={24 - props.strokeWidth}
       height={24 - props.strokeWidth}
       x={props.strokeWidth / 2}
@@ -173,53 +174,144 @@ const ControlPath = ({
   );
 };
 
-const SvgPreview = React.forwardRef<SVGSVGElement, { src: string; showGrid?: boolean }>(
-  ({ src, showGrid = false }, ref) => {
-    const paths = getPaths(src);
-    const darkModeCss = `@media screen and (prefers-color-scheme: dark) {
+const Radii = ({
+  paths,
+  ...props
+}: { paths: Path[] } & PathProps<
+  'strokeWidth' | 'stroke' | 'strokeDasharray' | 'strokeOpacity',
+  any
+>) => {
+  return (
+    <g className="svg-preview-radii-group" {...props}>
+      {paths.map(
+        ({ c, prev, next, circle }, i) =>
+          circle && (
+            <React.Fragment key={i}>
+              {c.name !== "circle" && (
+                <path
+                  d={`M${prev.x} ${prev.y} ${circle.x} ${circle.y} ${next.x} ${next.y}`}
+                />
+              )}
+              <circle
+                cy={circle.y}
+                cx={circle.x}
+                r={0.25}
+                strokeDasharray="0"
+                stroke={
+                  (Math.round(circle.x * 100) / 100) % 1 !== 0 ||
+                  (Math.round(circle.y * 100) / 100) % 1 !== 0
+                    ? "red"
+                    : undefined
+                }
+              />
+              <circle
+                cy={circle.y}
+                cx={circle.x}
+                r={circle.r}
+                stroke={
+                  (Math.round(circle.r * 1000) / 1000) % 1 !== 0
+                    ? "red"
+                    : undefined
+                }
+              />
+            </React.Fragment>
+          ),
+      )}
+    </g>
+  );
+};
+
+const Handles = ({
+  paths,
+  ...props
+}: { paths: Path[] } & PathProps<
+  'strokeWidth' | 'stroke' | 'strokeDasharray' | 'strokeOpacity',
+  any
+>) => {
+  console.log(paths);
+  return (
+    <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} />}
+          {cp2 && <path d={`M${next.x} ${next.y} ${cp2.x} ${cp2.y}`} />}
+          {cp2 && <circle cy={cp2.y} cx={cp2.x} r={0.25} />}
+        </>
+      ))}
+    </g>
+  );
+};
+
+const SvgPreview = React.forwardRef<
+  SVGSVGElement,
+  {
+    src: string | ReturnType<typeof getPaths>;
+    showGrid?: boolean;
+  } & React.SVGProps<SVGSVGElement>
+>(({ src, children, showGrid = false, ...props }, ref) => {
+  const paths = typeof src === 'string' ? getPaths(src) : src;
+
+  const darkModeCss = `@media screen and (prefers-color-scheme: light) {
+  .svg-preview-grid-rect { fill: none }
+}
+@media screen and (prefers-color-scheme: dark) {
+  .svg-preview-grid-rect { fill: none }
+  .svg
   .svg-preview-grid-group,
+  .svg-preview-radii-group,
   .svg-preview-shadow-mask-group,
   .svg-preview-shadow-group {
     stroke: #fff;
   }
 }`;
-    return (
-      <svg
-        ref={ref}
-        xmlns="http://www.w3.org/2000/svg"
-        width={24}
-        height={24}
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      >
-        <style>{darkModeCss}</style>
-        {showGrid && <Grid strokeWidth={0.1} stroke="#777" strokeOpacity={0.3} radius={1} />}
-        <Shadow paths={paths} strokeWidth={4} stroke="#777" radius={1} strokeOpacity={0.15} />
-        <ColoredPath
-          paths={paths}
-          colors={[
-            '#1982c4',
-            '#4267AC',
-            '#6a4c93',
-            '#B55379',
-            '#FF595E',
-            '#FF7655',
-            '#ff924c',
-            '#FFAE43',
-            '#ffca3a',
-            '#C5CA30',
-            '#8ac926',
-            '#52A675',
-          ]}
-        />
-        <ControlPath radius={1} paths={paths} pointSize={1} stroke="#fff" strokeWidth={0.125} />
-      </svg>
-    );
-  }
-);
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <style>{darkModeCss}</style>
+      {showGrid && <Grid 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={[
+          '#1982c4',
+          '#4267AC',
+          '#6a4c93',
+          '#B55379',
+          '#FF595E',
+          '#FF7655',
+          '#ff924c',
+          '#FFAE43',
+          '#ffca3a',
+          '#C5CA30',
+          '#8ac926',
+          '#52A675',
+        ]}
+      />
+      <Radii
+        paths={paths}
+        strokeWidth={0.12}
+        strokeDasharray="0 0.25 0.25"
+        stroke="#777"
+        strokeOpacity={0.3}
+      />
+      <ControlPath radius={1} paths={paths} pointSize={1} stroke="#fff" strokeWidth={0.125} />
+      <Handles paths={paths} strokeWidth={0.12} stroke="#FFF" strokeOpacity={0.3} />
+      {children}
+    </svg>
+  );
+});
 
 export default SvgPreview;

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

@@ -8,6 +8,9 @@ export type Path = {
   prev: Point;
   next: Point;
   isStart: boolean;
+  circle?: { x: number; y: number; r: number };
+  cp1?: Point;
+  cp2?: Point;
   c: ReturnType<typeof getCommands>[number];
 };
 

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

@@ -12,33 +12,66 @@ export function assert(value: unknown): asserts value {
   }
 }
 
-const extractPaths = (node: INode): { d: string; name: typeof node.name }[] => {
-  if (/(rect|circle|ellipse|polygon|polyline|line|path)/.test(node.name)) {
-    return [{ d: toPath(node), name: node.name }];
+const convertToPathNode = (node: INode): { d: string; name: typeof node.name } => {
+  if (node.name === 'path') {
+    return { d: node.attributes.d, name: node.name };
+  }
+  if (node.name === 'circle') {
+    const cx = parseFloat(node.attributes.cx);
+    const cy = parseFloat(node.attributes.cy);
+    const r = parseFloat(node.attributes.r);
+    return {
+      d: [
+        `M ${cx} ${cy - r}`,
+        `a ${r} ${r} 0 0 1 ${r} ${r}`,
+        `a ${r} ${r} 0 0 1 ${0 - r} ${r}`,
+        `a ${r} ${r} 0 0 1 ${0 - r} ${0 - r}`,
+        `a ${r} ${r} 0 0 1 ${r} ${0 - r}`,
+      ].join(''),
+      name: node.name,
+    };
+  }
+  return { d: toPath(node).replace(/z$/i, ''), name: node.name };
+};
+
+const extractNodes = (node: INode): INode[] => {
+  if (['rect', 'circle', 'ellipse', 'polygon', 'polyline', 'line', 'path'].includes(node.name)) {
+    return [node];
   } else if (node.children && Array.isArray(node.children)) {
-    return node.children.flatMap(extractPaths);
+    return node.children.flatMap(extractNodes);
   }
 
   return [];
 };
 
+export const getNodes = (src: string) =>
+  extractNodes(parseSync(src.includes('<svg') ? src : `<svg>${src}</svg>`));
+
 export const getCommands = (src: string) =>
-  extractPaths(parseSync(src)).flatMap(({ d, name }, idx) =>
-    new SVGPathData(d).toAbs().commands.map((c) => ({ ...c, id: idx, name }))
-  );
+  getNodes(src)
+    .map(convertToPathNode)
+    .flatMap(({ d, name }, idx) =>
+      new SVGPathData(d).toAbs().commands.map((c, cIdx) => ({ ...c, id: idx, idx: cIdx, name }))
+    );
 
 export const getPaths = (src: string) => {
-  const commands = getCommands(src);
+  const commands = getCommands(src.includes('<svg') ? src : `<svg>${src}</svg>`);
   const paths: Path[] = [];
   let prev: Point | undefined = undefined;
   let start: Point | undefined = undefined;
-  const addPath = (c: (typeof commands)[number], next: Point, d?: string) => {
+  const addPath = (
+    c: typeof commands[number],
+    next: Point,
+    d?: string,
+    extras?: { circle?: Path['circle']; cp1?: Path['cp1']; cp2?: Path['cp2'] }
+  ) => {
     assert(prev);
     paths.push({
       c,
-      d: d || `M${prev.x} ${prev.y}L${next.x} ${next.y}`,
+      d: d || `M ${prev.x} ${prev.y} L ${next.x} ${next.y}`,
       prev,
       next,
+      ...extras,
       isStart: start === prev,
     });
     prev = next;
@@ -77,7 +110,10 @@ export const getPaths = (src: string) => {
       }
       case SVGPathData.CURVE_TO: {
         assert(prev);
-        addPath(c, c, `M ${prev.x},${prev.y} ${encodeSVGPath(c)}`);
+        addPath(c, c, `M ${prev.x} ${prev.y} ${encodeSVGPath(c)}`, {
+          cp1: { x: c.x1, y: c.y1 },
+          cp2: { x: c.x2, y: c.y2 },
+        });
         break;
       }
       case SVGPathData.SMOOTH_CURVE_TO: {
@@ -86,16 +122,16 @@ export const getPaths = (src: string) => {
         const reflectedCp1 = {
           x:
             previousCommand &&
-              (previousCommand.type === SVGPathData.SMOOTH_CURVE_TO ||
-                previousCommand.type === SVGPathData.CURVE_TO)
+            (previousCommand.type === SVGPathData.SMOOTH_CURVE_TO ||
+              previousCommand.type === SVGPathData.CURVE_TO)
               ? previousCommand.relative
                 ? previousCommand.x2 - previousCommand.x
                 : previousCommand.x2 - prev.x
               : 0,
           y:
             previousCommand &&
-              (previousCommand.type === SVGPathData.SMOOTH_CURVE_TO ||
-                previousCommand.type === SVGPathData.CURVE_TO)
+            (previousCommand.type === SVGPathData.SMOOTH_CURVE_TO ||
+              previousCommand.type === SVGPathData.CURVE_TO)
               ? previousCommand.relative
                 ? previousCommand.y2 - previousCommand.y
                 : previousCommand.y2 - prev.y
@@ -104,7 +140,7 @@ export const getPaths = (src: string) => {
         addPath(
           c,
           c,
-          `M ${prev.x},${prev.y} ${encodeSVGPath({
+          `M ${prev.x} ${prev.y} ${encodeSVGPath({
             type: SVGPathData.CURVE_TO,
             relative: false,
             x: c.x,
@@ -113,13 +149,20 @@ export const getPaths = (src: string) => {
             y1: prev.y - reflectedCp1.y,
             x2: c.x2,
             y2: c.y2,
-          })}`
+          })}`,
+          {
+            cp1: { x: prev.x - reflectedCp1.x, y: prev.y - reflectedCp1.y },
+            cp2: { x: c.x2, y: c.y2 },
+          }
         );
         break;
       }
       case SVGPathData.QUAD_TO: {
         assert(prev);
-        addPath(c, c, `M ${prev.x},${prev.y} ${encodeSVGPath(c)}`);
+        addPath(c, c, `M ${prev.x} ${prev.y} ${encodeSVGPath(c)}`, {
+          cp1: { x: c.x1, y: c.y1 },
+          cp2: { x: c.x1, y: c.y1 },
+        });
         break;
       }
       case SVGPathData.SMOOTH_QUAD_TO: {
@@ -157,23 +200,39 @@ export const getPaths = (src: string) => {
         addPath(
           c,
           c,
-          `M ${prev.x},${prev.y} ${encodeSVGPath({
+          `M ${prev.x} ${prev.y} ${encodeSVGPath({
             type: SVGPathData.QUAD_TO,
             relative: false,
             x: c.x,
             y: c.y,
             x1: prevCP.x,
             y1: prevCP.y,
-          })}`
+          })}`,
+          {
+            cp1: { x: prevCP.x, y: prevCP.y },
+            cp2: { x: prevCP.x, y: prevCP.y },
+          }
         );
         break;
       }
       case SVGPathData.ARC: {
         assert(prev);
+        const center = arcEllipseCenter(
+          prev.x,
+          prev.y,
+          c.rX,
+          c.rY,
+          c.xRot,
+          c.lArcFlag,
+          c.sweepFlag,
+          c.x,
+          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}`
+          `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 }
         );
         break;
       }
@@ -184,3 +243,58 @@ export const getPaths = (src: string) => {
   }
   return paths;
 };
+
+export const arcEllipseCenter = (
+  x1: number,
+  y1: number,
+  rx: number,
+  ry: number,
+  a: number,
+  fa: number,
+  fs: number,
+  x2: number,
+  y2: number
+) => {
+  const phi = (a * Math.PI) / 180;
+
+  const M = [
+    [Math.cos(phi), Math.sin(phi)],
+    [-Math.sin(phi), Math.cos(phi)],
+  ];
+  const V = [(x1 - x2) / 2, (y1 - y2) / 2];
+
+  const [x1p, y1p] = [M[0][0] * V[0] + M[0][1] * V[1], M[1][0] * V[0] + M[1][1] * V[1]];
+
+  rx = Math.abs(rx);
+  ry = Math.abs(ry);
+
+  const lambda = (x1p * x1p) / (rx * rx) + (y1p * y1p) / (ry * ry);
+  if (lambda > 1) {
+    rx = Math.sqrt(lambda) * rx;
+    ry = Math.sqrt(lambda) * ry;
+  }
+
+  const sign = fa === fs ? -1 : 1;
+
+  const co =
+    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)
+    );
+
+  const V2 = [(rx * y1p) / ry, (-ry * x1p) / rx];
+  const Cp = [V2[0] * co, V2[1] * co];
+
+  const M2 = [
+    [Math.cos(phi), -Math.sin(phi)],
+    [Math.sin(phi), Math.cos(phi)],
+  ];
+  const V3 = [(x1 + x2) / 2, (y1 + y2) / 2];
+  const C = [
+    M2[0][0] * Cp[0] + M2[0][1] * Cp[1] + V3[0],
+    M2[1][0] * Cp[0] + M2[1][1] * Cp[1] + V3[1],
+  ];
+
+  return { x: C[0], y: C[1] };
+};

docs/.vitepress/lib/categories.ts

@@ -0,0 +1,28 @@
+import fs from "fs";
+import path from "path";
+import {Category, IconEntity} from "../theme/types";
+
+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 fileContent = fs.readFileSync(path.join(directory, fileName), 'utf8')
+
+    const parsedFileContent = JSON.parse(fileContent)
+
+    return {
+      name,
+      title: parsedFileContent.title,
+    }
+  });
+}
+
+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)
+  }))
+}

docs/.vitepress/lib/createCodeExamples.ts

@@ -0,0 +1,159 @@
+import {
+  bundledLanguages,
+  type ThemeRegistration
+} from 'shikiji'
+import {
+  getHighlighter,
+} from 'shikiji'
+
+
+type CodeExampleType = {
+  title: string,
+  language: string,
+  code: string,
+}[]
+
+const getIconCodes = (): CodeExampleType => {
+  return [
+    {
+      language: 'html',
+      title: 'HTML',
+      code: `<i data-lucide="Name"></i>`
+    },
+    {
+      language: 'tsx',
+      title: 'React',
+      code: `import { PascalCase } from 'lucide-react';
+
+const App = () => {
+  return (
+    <PascalCase />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'vue',
+      title: 'Vue',
+      code: `<script setup>
+  import { PascalCase } from 'lucide-vue-next';
+</script>
+
+<template>
+  <PascalCase />
+</template>
+`,
+    },
+    {
+      language: 'svelte',
+      title: 'Svelte',
+      code: `<script>
+import { PascalCase } from 'lucide-svelte';
+</script>
+
+<PascalCase />
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Preact',
+      code: `import { PascalCase } from 'lucide-preact';
+
+const App = () => {
+  return (
+    <PascalCase />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Solid',
+      code: `import { PascalCase } from 'lucide-solid';
+
+const App = () => {
+  return (
+    <PascalCase />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Angular',
+      code: `// app.module.ts
+import { LucideAngularModule, PascalCase } from 'lucide-angular';
+
+@NgModule({
+  imports: [
+    LucideAngularModule.pick({ PascalCase })
+  ],
+})
+
+// app.component.html
+<lucide-icon name="Name"></lucide-icon>
+`,
+    },
+    {
+      language: 'html',
+      title: 'Icon Font',
+      code: `<style>
+@import ('~lucide-static/font/Lucide.css');
+</style>
+
+<div class="icon-Name"></div>
+`,
+    }
+  ]
+}
+
+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/fetchPackages.ts

@@ -1,7 +1,7 @@
 import { promises as fs, constants } from 'fs';
 import path from 'path';
 import yaml from 'js-yaml'
-import { PackageItem } from '../components/Package';
+import { PackageItem } from '../theme/types';
 
 const fileExist = (filePath) => fs.access(filePath, constants.F_OK).then(() => true).catch(() => false)
 

docs/.vitepress/lib/getFallbackZip.tsx

@@ -1,12 +1,13 @@
-import { createLucideIcon, LucideProps } from "lucide-react"
-import { IconEntity } from "src/types"
+import { createLucideIcon } from "lucide-react/src/lucide-react"
+import { type LucideProps, type IconNode } from "lucide-react/src/createLucideIcon"
+import { IconEntity } from "../theme/types"
 import { renderToStaticMarkup } from 'react-dom/server';
 import { IconContent } from "./generateZip";
 
 const getFallbackZip = (icons: IconEntity[], params: LucideProps) => {
   return icons
     .map<IconContent>((icon) => {
-      const Icon = createLucideIcon(icon.name, icon.iconNode)
+      const Icon = createLucideIcon(icon.name, icon.iconNode as IconNode)
       const src = renderToStaticMarkup(<Icon {...params} />)
       return [icon.name, src]
     })

docs/.vitepress/lib/icons.ts

@@ -0,0 +1,47 @@
+import fs from "fs";
+import path from "path";
+import { IconNodeWithKeys } from "../theme/types";
+import iconNodes from '../data/iconNodes'
+import releaseMeta from "../data/releaseMetaData.json";
+
+const DATE_OF_FORK = '2020-06-08T16:39:52+0100';
+
+const directory = path.join(process.cwd(), "../icons");
+
+export interface GetDataOptions {
+  withChildKeys?: boolean
+}
+
+export async function getData(name: string) {
+  const jsonPath = path.join(directory, `${name}.json`);
+  const jsonContent = fs.readFileSync(jsonPath, "utf8");
+  const { tags, categories, contributors } = JSON.parse(jsonContent);
+
+  const iconNode = iconNodes[name]
+
+  const releaseData = releaseMeta?.[name] ?? {
+    "createdRelease": {
+      "version": "0.0.0",
+      "date": DATE_OF_FORK
+    },
+    "changedRelease": {
+      "version": "0.0.0",
+      "date": DATE_OF_FORK
+    }
+  }
+
+  return {
+    name,
+    tags,
+    categories,
+    iconNode,
+    contributors,
+    ...releaseData
+  };
+}
+
+export async function getAllData(): Promise<{ name: string, iconNode: IconNodeWithKeys}[]> {
+  const names = Object.keys(iconNodes);
+
+  return Promise.all(names.map((name) => getData(name)));
+}

docs/.vitepress/sidebar.ts

@@ -0,0 +1,129 @@
+import { DefaultTheme, UserConfig } from "vitepress"
+
+const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
+  'guide':[
+    {
+      text: 'Introduction',
+      items: [
+        { text: 'What is lucide?', link: '/guide/' },
+        { text: 'Installation', link: '/guide/installation' },
+        { text: 'Comparison', link: '/guide/comparison' }
+      ]
+    },
+    {
+      text: 'Basics',
+      items: [
+        {
+          text: 'Color',
+          link: '/guide/basics/color'
+        },
+        {
+          text: 'Sizing',
+          link: '/guide/basics/sizing'
+        },
+        {
+          text: 'Stroke width',
+          link: '/guide/basics/stroke-width'
+        },
+      ]
+    },
+    // TODO: Add this section
+    {
+      text: 'Advanced',
+      items: [
+        // {
+        //   text: 'Accessibility',
+        //   link: '/guide/advanced/accessibility'
+        // },
+        {
+          text: 'Global styling',
+          link: '/guide/advanced/global-styling'
+        },
+        // {
+        //   text: 'Animations',
+        // },
+        {
+          text: 'Filled icons',
+          link: '/guide/advanced/filled-icons'
+        },
+        // {
+        //   text: 'Combining icons',
+        // },
+        // {
+        //   text: 'Dynamic imports'
+        // },
+        // {
+        //   text: 'Auto importing'
+        // },
+      ]
+    },
+    {
+      text: 'Packages',
+      items: [
+        {
+          text: 'Lucide',
+          link: '/guide/packages/lucide'
+        },
+        {
+          text: 'Lucide React',
+          link: '/guide/packages/lucide-react'
+        },
+        {
+          text: 'Lucide React Native',
+          link: '/guide/packages/lucide-react-native'
+        },
+        {
+          text: 'Lucide Vue',
+          link: '/guide/packages/lucide-vue-next'
+        },
+        {
+          text: 'Lucide Svelte',
+          link: '/guide/packages/lucide-svelte'
+        },
+        {
+          text: 'Lucide Solid',
+          link: '/guide/packages/lucide-solid'
+        },
+        {
+          text: 'Lucide Preact',
+          link: '/guide/packages/lucide-preact'
+        },
+        {
+          text: 'Lucide Angular',
+          link: '/guide/packages/lucide-angular'
+        },
+        {
+          text: 'Lucide Static',
+          link: '/guide/packages/lucide-static'
+        },
+      ]
+    },
+    {
+      text: 'Contributing',
+      items: [
+        {
+          text: 'Icon Design Principles',
+          link: '/guide/design/icon-design-guide'
+        },
+        {
+          text: 'Designing in Illustrator',
+          link: '/guide/design/illustrator-guide'
+        },
+        {
+          text: 'Designing in InkScape',
+          link:  '/guide/design/inkscape-guide'
+        },
+        {
+          text: 'Designing in Figma',
+          link: '/guide/design/figma-guide'
+        },
+      ]
+    },
+  ],
+  // This should be here to keep the sidebar shown on the icons page
+  'icons': [
+    { text: '', link: '/' },
+  ],
+}
+
+export default sidebar

docs/.vitepress/theme/components/PageContainer.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="container">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  padding: 32px;
+  padding-top: 33px;
+}
+</style>

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { useRouter } from 'vitepress';
+
+const { go } = useRouter()
+const props = defineProps<{
+  href?: string
+}>()
+
+const component = computed(() => props.href ? 'a' : 'div')
+</script>
+
+<template>
+  <component
+    :is="component"
+    :href="href"
+    class="badge"
+    @click="props?.href ? go(href) : undefined"
+  >
+    <slot/>
+  </component>
+</template>
+
+<style>
+.badge, a.badge, .vp-doc a.badge {
+  display: block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  padding: 2px 12px;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  border-radius: 6px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+  /* width: 56px;
+  height: 56px; */
+  font-size: 16px;
+}
+
+.badge[href]:hover, a.badge:hover  {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+  text-decoration: none;
+}
+
+.badge[href]:active {
+  border-color: var(--vp-button-alt-active-border);
+  color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg);
+}
+
+.badge.active {
+  border-color: var(--vp-c-brand);
+  /* color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg); */
+}
+
+
+</style>

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

@@ -0,0 +1,187 @@
+<script setup lang="ts">
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+import { computed, ref } from 'vue'
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption,
+} from '@headlessui/vue'
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import { chevronUp }  from '../../../data/iconNodes'
+import { useStorage } from '@vueuse/core'
+
+interface Props {
+  options: {
+    text: string
+    onClick?: () => void
+  }[],
+  callOptionOnClick?: boolean
+  buttonClass?: string
+  id: string
+  popoverPosition?: 'top' | 'bottom'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  callOptionOnClick: false,
+  popoverPosition: 'bottom'
+})
+
+const emit = defineEmits(['click', 'optionClick'])
+
+const buttonRef = ref(null)
+
+const selectedOption = useStorage(props.id, props.options[0].text)
+const selectionOptionAction = computed(() => props.options.find(option => option.text === selectedOption.value).onClick)
+
+function onClick(event) {
+  selectionOptionAction.value()
+
+
+  emit('click', event)
+}
+
+function onOptionClick(event, option) {
+  if(!props.callOptionOnClick) {
+    return
+  }
+
+  option.onClick()
+
+  emit('optionClick', event)
+}
+
+const ChevronUp = createLucideIcon('ChevronUp', chevronUp)
+</script>
+
+<template>
+  <Listbox v-model="selectedOption">
+    <div class="menu" >
+      <div class="button-wrapper">
+        <VPButton
+          v-bind="$attrs"
+          :text="selectedOption"
+          @click="onClick"
+          theme="alt"
+          class="main-button"
+          :class="[props.buttonClass]"
+          ref="buttonRef"
+        />
+        <ListboxButton
+          :as="VPButton"
+          :text="''"
+          theme="alt"
+          class="arrow-up-button"
+          :class="popoverPosition"
+        />
+      </div>
+      <ListboxOptions class="menu-items" :class="popoverPosition">
+        <ListboxOption
+          as="button"
+          class="menu-item"
+          v-for="option in options"
+          :value="option.text"
+          @click="onOptionClick($event, option)"
+        >
+          {{ option.text }}
+        </ListboxOption>
+      </ListboxOptions>
+    </div>
+  </Listbox>
+</template>
+
+<style>
+.menu {
+  position: relative;
+}
+ul.menu-items {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  padding: 12px;
+  min-width: 128px;
+  border: 1px solid var(--vp-c-divider);
+  background-color: var(--vp-c-bg-elv);
+  box-shadow: var(--vp-shadow-3);
+  transition: background-color 0.5s;
+  max-height: calc(100vh - var(--vp-nav-height));
+  overflow-y: auto;
+  z-index: 90;
+  right: 0;
+}
+
+.menu-item {
+  padding: 2px 8px;
+  text-align: left;
+  display: block;
+  border-radius: 6px;
+  padding: 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+  transition: background-color .25s,color .25s;
+  list-style: none;
+}
+
+.menu-item:hover {
+  color: var(--vp-c-brand);
+  background-color: var(--vp-c-default-soft);
+}
+
+.menu-item:active {
+  color: var(--vp-c-brand);
+  background-color: var(--vp-c-bg-elv);
+}
+
+.main-button {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  padding-right: 12px !important;
+}
+
+.button-wrapper {
+  display: flex;
+}
+
+.arrow-up-button {
+  display: inline-flex;
+  height: 40px;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  padding-left: 4px !important;
+  padding-right: 8px !important;
+  position: relative;
+  left: -1px;
+}
+
+.arrow-up-button::before {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cpolyline points='18 15 12 9 6 15' /%3E%3C/svg%3E%0A");
+  width: 20px;
+  height: 28px;
+  margin: auto;
+  display: block;
+}
+
+.dark .arrow-up-button::before {
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%0A%3E%3Cpolyline points='18 15 12 9 6 15' /%3E%3C/svg%3E%0A");
+}
+
+.menu-items.bottom {
+  top: 32px;
+}
+
+.menu-items.top {
+  bottom: 48px;
+}
+
+.arrow-up-button.top::before {
+  transform: rotate(0deg);
+}
+
+.arrow-up-button.bottom::before {
+  transform: rotate(180deg);
+}
+</style>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  href?: string;
+}>()
+
+const isExternal = computed(() => {
+  return props.href?.startsWith('http') ?? false
+})
+
+const component = computed(() => {
+  return props.href ? 'a' : 'div'
+})
+
+const rel = computed(() => {
+  return isExternal.value ? 'noreferrer noopener' : undefined
+})
+</script>
+
+<template>
+  <component
+    :is="component"
+    :href="href"
+    :rel="rel"
+    class="card"
+  >
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.card {
+  border: 1px solid var(--vp-c-bg-soft);
+  border-radius: 12px;
+  background-color: var(--vp-c-bg-soft);
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  text-decoration: none;
+}
+
+.card[href] {
+  display: block;
+  border: 1px solid var(--vp-c-bg-soft);
+  border-radius: 12px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+  transition: border-color .25s,background-color .25s;
+}
+
+.card[href]:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="grid">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: center;
+  align-content: space-evenly;
+  box-sizing: border-box;
+  margin: -8px;
+}
+
+.grid > * {
+  flex-basis: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+@media (min-width: 960px) {
+  .grid > * {
+    flex-basis: 50%;
+  }
+}
+
+@media (min-width: 1280px) {
+  .grid > * {
+    flex-basis: 33.33%;
+  }
+}
+
+</style>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+const props = defineProps<{
+  groups: string[] | undefined,
+  groupName: string,
+}>()
+
+const getSaveIdname = (name: string) => {
+  return name.toLowerCase().replace(/\s/g, '-')
+}
+
+const tabs = computed(() => props.groups?.map((group) => {
+  return {
+    id: getSaveIdname(group),
+    name: group,
+  }
+}))
+
+const saveTabId = (id: string) => {
+  localStorage.setItem(props.groupName, id)
+}
+
+onMounted(() => {
+  const id = localStorage.getItem(props.groupName)
+  if (id) {
+    const tab = document.getElementById(`label-tab-${id}`)
+
+    if (tab) {
+      tab.click()
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="vp-code-group">
+    <div class="tabs">
+      <template v-for="(tab, index) in tabs">
+        <input
+          type="radio"
+          :id="`tab-${tab.id}`"
+          :name="`group-${groupName}`"
+          :checked="index === 0"
+          @change="saveTabId(tab.id)"
+        >
+        <label :for="`tab-${tab.id}`" :id="`label-tab-${tab.id}`">{{ tab.name }}</label>
+      </template>
+    </div>
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  modelValue: string
+  id: string
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+</script>
+
+<template>
+  <div class="color-picker">
+    <div class="color-input-wrapper">
+      <!-- TODO: Add currentColor div if value is currentColor -->
+      <input
+        type="color"
+        :id="id"
+        :name="id"
+        class="color-input"
+        v-model="value"
+      />
+    </div>
+    <input
+      type="text"
+      :id="`${id}-input`"
+      :name="`${id}-input`"
+      class="color-input-text"
+      aria-label="Color picker input"
+      v-model="value"
+    />
+  </div>
+</template>
+
+<style scoped>
+.color-input {
+  width: 34px;
+  height: 34px;
+  position: absolute;
+  top: -5px;
+  left: -5px;
+}
+.color-input-wrapper {
+  height: 24px;
+  width: 24px;
+  overflow: hidden;
+  position: relative;
+  border-radius: 12px;
+  flex-shrink: 0;
+}
+.color-picker {
+  background: var(--color-picker-bg, var(--vp-c-bg-alt));
+  border-radius: 8px;
+  color: var(--vp-c-text-2);
+  padding: 4px 8px;
+  height: auto;
+  font-size: 14px;
+  text-align: left;
+  border: 1px solid transparent;
+  cursor: text;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.color-input-text {
+  width: 100%;
+  height: 100%;
+  padding: 0 0 0 8px;
+  border: none;
+  background: transparent;
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+  text-align: left;
+  border-radius: 8px;
+  cursor: text;
+  transition: border-color 0.25s, background 0.4s ease;
+}
+
+.color-picker:hover, .color-picker:focus {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-alt);
+}
+
+.color-input[value="currentColor"] {
+
+}
+</style>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { vIntersectionObserver } from '@vueuse/components'
+
+const emit = defineEmits(['end-of-page'])
+
+const onIntersectionObserver: IntersectionObserverCallback = ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    emit('end-of-page')
+  }
+}
+</script>
+
+<template>
+  <div v-intersection-observer="onIntersectionObserver" />
+</template>

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

@@ -0,0 +1,36 @@
+<script setup>
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import { search }  from '../../../data/iconNodes'
+
+const SearchIcon = createLucideIcon('search', search)
+</script>
+
+<template>
+  <button class="fake-input">
+    <component :is="SearchIcon" class="search-icon"/>
+    <slot/>
+  </button>
+</template>
+
+<style scoped>
+.fake-input {
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  color: var(--vp-c-text-2);
+  padding: 11px 16px;
+  height: auto;
+  font-size: 14px;
+  /* box-shadow: var(--vp-shadow-4), var(--vp-shadow-2); */
+  text-align: left;
+  border: 1px solid transparent;
+  cursor: text;
+  display: flex;
+  gap: 12px;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+}
+
+.fake-input:hover, .fake-input:focus {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-alt);
+}
+</style>

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import CardGrid from './CardGrid.vue';
+
+const props = defineProps<{
+  title: string,
+  headingLevel: 1 | 2 | 3 | 4 | 5 | 6,
+}>()
+
+const headingElement = computed(() => `h${props.headingLevel}`)
+</script>
+
+<template>
+  <section>
+    <component :is="headingElement" class="name">{{ title }}</component>
+    <CardGrid>
+      <slot />
+    </CardGrid>
+  </section>
+</template>
+
+<style scoped>
+.name {
+  font-size: 32px;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+section {
+  margin-bottom: 96px;
+}
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: center;
+  align-content: space-evenly;
+  box-sizing: border-box;
+  margin: -8px;
+}
+
+.grid > * {
+  flex-basis: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+@media (min-width: 960px) {
+  .grid > * {
+    flex-basis: 50%;
+  }
+}
+
+@media (min-width: 1280px) {
+  .grid > * {
+    flex-basis: 33.33%;
+  }
+}
+
+
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <button v-bind="$attrs" class="icon-button">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+
+.icon-button {
+  display: inline-flex;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  padding: 6px;
+  border-radius: 8px;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  border-radius: 6px;
+  background-color: var(--vp-c-bg-alt);
+  /* width: 56px;
+  height: 56px; */
+  font-size: 24px;
+  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+}
+
+.icon-button:hover {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+}
+
+.icon-button:active {
+    border-color: var(--vp-button-alt-active-border);
+    color: var(--vp-button-alt-active-text);
+    background-color: var(--vp-button-alt-active-bg);
+}
+
+.icon-button.active {
+  border-color: var(--vp-c-brand);
+  /* color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg); */
+}
+</style>

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+
+export interface InputProps {
+  type: string
+  modelValue: string
+}
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: 'text'
+})
+
+const input = ref()
+
+defineEmits(['change', 'input', 'update:modelValue'])
+
+defineExpose({
+  focus: () => {
+    input.value.focus()
+  }
+})
+</script>
+
+<template>
+  <div class="input-wrapper">
+    <slot name="icon" class="icon" />
+    <input
+      :type="type"
+      class="input"
+      :class="{'has-icon': $slots.icon}"
+      ref="input"
+      :value="modelValue"
+      v-bind="$attrs"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.input-wrapper {
+  position: relative;
+}
+.input {
+  justify-content: flex-start;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0 10px 0 12px;
+  width: 100%;
+  height: 40px;
+  background-color: var(--vp-c-bg-alt);
+  font-size: 14px;
+}
+
+.input:hover, .input:focus {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-alt);
+}
+
+.input.has-icon {
+  padding-left: 52px;
+}
+
+
+</style>
+
+<style>
+.input-wrapper svg {
+  position: absolute;
+  left: 16px;
+  top: 12px;
+  z-index: 1;
+  color: var(--vp-c-text-2);
+  pointer-events: none;
+}
+</style>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+  id: string
+}>()
+</script>
+
+<template>
+  <div class="input-field">
+    <div class="input-label" v-if="label">
+      <label :for="id" class="customize-label">
+        {{ label }}
+      </label>
+      <div class="display-value" >
+        <slot name="display"/>
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.customize-label {
+  line-height: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vt-c-text-1);
+  transition: color .5s;
+  display: block;
+}
+
+.input-field:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.display-value {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.input-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  gap: 12px;
+}
+</style>

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

@@ -0,0 +1,74 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import Input from './Input.vue'
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import { search }  from '../../../data/iconNodes'
+
+const SearchIcon = createLucideIcon('search', search)
+
+interface Props {
+  modelValue: string
+}
+
+const props = defineProps<Props>()
+
+const input = ref()
+
+const emit = defineEmits(['update:modelValue'])
+
+defineExpose({
+  focus: () => {
+    input.value.focus()
+  }
+})
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+</script>
+
+<template>
+  <Input
+    ref="input"
+    type="search"
+    v-bind="$attrs"
+    v-model="value"
+    class="input-wrapper"
+  >
+    <template #icon>
+      <component :is="SearchIcon" class="search-icon" />
+    </template>
+  </Input>
+</template>
+
+<style scoped>
+.input {
+  justify-content: flex-start;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0 10px 0 12px;
+  width: 100%;
+  height: 40px;
+  background-color: var(--vp-c-bg-alt);
+}
+
+.input:hover, .input:focus {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-alt);
+}
+
+.input-wrapper:deep(.input) {
+  /* padding: 12px 24px; */
+  padding-block: 12px;
+  font-size: 14px;
+  height: 48px;
+}
+
+</style>

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

@@ -0,0 +1,16 @@
+
+<template>
+  <h2 class="label"><slot/></h2>
+</template>
+
+<style scoped>
+.label {
+  letter-spacing: 0.4px;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 600;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+</style>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+
+export type IconNode = [elementName: string, attrs: Record<string, string>][]
+
+const props = defineProps<{
+  name: string;
+  tags: string[];
+  categories: string[];
+  // contributors: Contributor[];
+  iconNode: IconNode;
+}>()
+
+const icon = createLucideIcon(props.name, props.iconNode)
+</script>
+
+<template>
+  <component :is="icon" />
+</template>

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

@@ -0,0 +1,127 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+interface Props {
+  modelValue: number | string;
+  min?: number;
+  max?: number;
+  step?: number;
+  id: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 48,
+})
+
+defineEmits(['update:modelValue'])
+
+const percentage = computed<string>(() => `${((Number(props.modelValue) - props.min) / (props.max - props.min)) * 100}%`);
+// TODO: Steps must be implemented
+</script>
+
+
+<template>
+  <div class="slider">
+    <input
+      :id="id"
+      type="range"
+      v-bind="$attrs"
+      v-bind:value="modelValue"
+      v-on:input="$emit('update:modelValue', Number($event.target.value))"
+      :min="min"
+      :max="max"
+      :step="step"
+    />
+    <div class="bar"></div>
+  </div>
+</template>
+
+<style>
+.slider {
+    position: relative;
+    width: 100%;
+    line-height: 10px;
+    height: 20px;
+    --bar-color: var(--slider-bar-color, var(--vp-input-switch-bg-color));
+}
+
+.slider:hover input{
+    opacity: 1;
+}
+.slider .bar {
+    position: absolute;
+    top: 8px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.slider .bar:before, .slider .bar:after {
+    content: "";
+    position: absolute;
+    height: 4px;
+    pointer-events: none;
+}
+.slider .bar:before {
+    width: v-bind(percentage);
+    z-index: 1;
+    left: 0;
+    background: var(--vp-c-brand);
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.slider .bar:after {
+    background: var(--bar-color);
+    width: calc(100% - v-bind(percentage));
+    right: 0;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+.slider input {
+  -webkit-appearance: none;
+  width: calc(100% + 20px);
+  height: 20px;
+  left: -10px;
+  position: relative;
+  z-index: 2;
+  background: transparent;
+  outline: none;
+  /* opacity: 0.7; */
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+  margin: 0;
+  cursor: pointer;
+
+  /* @apply
+    md:opacity-0 */
+}
+
+.slider input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    box-shadow: var(--vp-shadow-2);
+    cursor: pointer;
+}
+
+.slider input::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    appearance: none;
+    background: #FFFFFF;
+    border-radius: 10px;
+    outline: none;
+    border: none;
+    box-shadow: var(--vp-shadow-2);
+    cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { rotateCw } from '../../../data/iconNodes'
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import IconButton from "./IconButton.vue";
+
+const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
+</script>
+
+<template>
+  <IconButton class="reset-button">
+    <RotateIcon :size="20"/>
+  </IconButton>
+</template>
+
+<style scoped>
+.reset-button {
+  background: none;
+  padding: 0;
+}
+
+.reset-button .lucide {
+  transition: ease-in-out 0.1s transform;
+}
+
+.reset-button:hover {
+  background: none;
+  border-color: transparent;
+}
+
+/* a rotate css animation keyframes */
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+.reset-button:active .lucide {
+  transform: rotate(45deg);
+}
+</style>

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

@@ -0,0 +1,77 @@
+<script setup>
+  import { ref } from 'vue'
+  import { Switch } from '@headlessui/vue'
+
+  const enabled = ref(false)
+</script>
+
+<template>
+  <Switch
+    v-model="enabled"
+    class="switch"
+    :class="{ enabled }"
+  >
+    <span class="thumb" />
+  </Switch>
+</template>
+
+<style>
+.switch {
+  display: inline-flex;
+  position: relative;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  transition: border-color 0.25s, background-color 0.4s ease;
+  border-radius: 11px;
+}
+
+.switch.enabled {
+  background-color: var(--vp-c-brand);
+}
+</style>
+
+<style scoped>
+.switch:hover {
+  border-color: var(--vp-input-hover-border-color);
+}
+
+.thumb {
+  display: inline-block;
+  background-color: #fff;
+  transition: transform 0.25s;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  /* background-color: var(--vp-c-neutral); */
+  box-shadow: var(--vp-shadow-1);
+}
+
+.switch.enabled .thumb {
+  transform: translateX(18px);
+}
+
+/* ------------------- */
+.VPSwitch {
+  position: relative;
+  border-radius: 11px;
+  display: block;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  transition: border-color 0.25s;
+}
+
+.VPSwitch:hover {
+  border-color: var(--vp-input-hover-border-color);
+}
+
+.dark .icon :deep(svg) {
+  fill: var(--vp-c-text-1);
+  transition: opacity 0.25s;
+}
+</style>

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/HomeContainer.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="home-container">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.home-container {
+  position: relative;
+  padding-inline: 24px;
+  margin-block: 24px;
+}
+
+@media (min-width: 640px) {
+  .home-container {
+    padding-inline: 48px;
+    margin-block: 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .home-container {
+    padding-inline: 64px;
+    margin-block: 64px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .home-container {
+    margin: 64px auto;
+    max-width: 1152px;
+    padding: 0;
+  }
+}
+</style>

docs/.vitepress/theme/components/home/HomeHeroBefore.data.ts

@@ -0,0 +1,16 @@
+export default {
+  async load() {
+    const version = await fetch('https://api.github.com/repos/lucide-icons/lucide/releases/latest').then(res => {
+      if (res.ok) {
+        const releaseData = res.json() as Promise<{ tag_name: string }>
+
+        return releaseData
+      }
+      return null
+    }).then(res => res.tag_name)
+
+    return {
+      version
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import Badge from '../base/Badge.vue';
+import HomeContainer from './HomeContainer.vue';
+import { data } from './HomeHeroBefore.data'
+
+</script>
+<template>
+  <HomeContainer class="container">
+    <Badge
+      :href="`https://github.com/lucide-icons/lucide/releases/tag/${data.version}`"
+      target="_blank"
+      rel="noreferrer noopener"
+    >v{{ data.version }}</Badge>
+  </HomeContainer>
+</template>
+
+<style scoped>
+.container {
+  margin-block: 0;;
+  margin-top: 37px;
+  margin-bottom: -96px;
+  display: flex;
+  justify-content: center;
+}
+.badge {
+  display: inline-block;
+}
+
+@media (min-width: 640px) {
+  .container {
+    margin-bottom: -131px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    justify-content: flex-start;
+  }
+  .badge {
+    display: inline-block;
+  }
+}
+
+</style>

docs/.vitepress/theme/components/home/HomeHeroIconsCard.data.ts

@@ -0,0 +1,16 @@
+import iconNodes from '../../../data/iconNodes'
+
+const getRandomItem = <Item>(items: Item[]): Item => items[Math.floor(Math.random()*items.length)];
+
+export default {
+  async load() {
+    const icons = Object.entries(iconNodes).map(([name, iconNode]) => ({ name, iconNode }))
+
+    const randomIcons = Array.from({ length: 200 }, () => getRandomItem(icons))
+
+    return {
+      icons: randomIcons,
+      iconsCount: icons.length,
+    }
+  }
+}

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

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { ref, onMounted, shallowRef, onBeforeUnmount} from 'vue';
+import { data } from './HomeHeroIconsCard.data'
+import LucideIcon from '../base/LucideIcon.vue'
+import { useRouter } from 'vitepress';
+import { random } from 'lodash-es'
+import FakeInput from '../base/FakeInput.vue'
+
+const { go } = useRouter()
+const intervalTime = shallowRef()
+
+const getInitialItems = () => data.icons.slice(0, 48)
+const items = ref(getInitialItems())
+let id = items.value.length + 1
+
+function getRandomNewIcon() {
+  const randomIndex = random(0, 200)
+  const newRandomIcon = data.icons[randomIndex]
+
+  if (items.value.some((item) => item.name === newRandomIcon.name)) {
+    return getRandomNewIcon()
+  }
+
+  return newRandomIcon
+}
+
+function insert() {
+  const replaceIndex = random(0, 48)
+  const newIcon = getRandomNewIcon()
+
+  // items.value.splice(replaceIndex, 0, newIcon);
+
+  items.value[replaceIndex] = newIcon
+}
+
+function startInterval() {
+  intervalTime.value = setInterval(() => {
+    insert()
+  }, 2000)
+}
+
+// TODO: Try maybe something else for better pref performance
+onMounted(() => {
+  window.addEventListener('mousemove', startInterval, { once: true })
+})
+
+onBeforeUnmount(() => {
+  clearInterval(intervalTime.value)
+})
+
+</script>
+
+<template>
+  <div class="card-wrapper">
+    <div class="icons-card">
+      <div class="card-grid">
+        <TransitionGroup  name="list" mode="out-in">
+          <div
+            v-for="icon in items"
+            :key="icon.name"
+            class="random-icon"
+          >
+            <LucideIcon
+              v-bind="icon"
+            />
+          </div>
+        </TransitionGroup>
+      </div>
+      <FakeInput @click="go('/icons/?focus')" class="search-box">
+        Search {{ data.iconsCount }} icons...
+      </FakeInput>
+    </div>
+  </div>
+
+</template>
+
+<style scoped>
+.card-wrapper {
+  /* padding: 0 24px; */
+  margin-left: auto;
+  margin-bottom: auto;
+  margin-top: 48px;
+}
+.icons-card {
+  background: var(--vp-c-bg-alt);
+  padding: 24px;
+  border-radius: 8px;
+  width: 100%;
+  height:100%;
+  /* box-shadow: var(--vp-shadow-2); */
+  max-height: 220px;
+  max-width: 560px;
+  margin: 0 auto;
+  position: relative;
+  /* max-height: 240px; */
+  /* margin-top: 96px; */
+}
+
+.card-grid {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+  grid-template-rows: repeat(auto-fill, minmax(36px, 1fr));
+  width: 100%;
+  height:100%;
+  max-height: 168px;
+  max-width: 512px;
+  overflow: hidden;
+  position: relative;
+  /* white-space: nowrap; */
+}
+
+.list-enter-active {
+  transition: all 0.5s cubic-bezier(.85,.85,.25,1.1);
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: scale(0.01);
+}
+
+.list-leave-active {
+  position: absolute;
+  opacity: 0;
+  display: none;
+}
+
+.search-box {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: -64px;
+}
+
+.random-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (min-width: 960px) {
+  .search-box {
+    top: unset;
+    bottom: -24px;
+    left: -24px;
+
+    box-shadow: var(--vp-shadow-3);
+    background: var(--vp-c-bg);
+  }
+
+  .dark .search-box {
+    background: var(--vp-c-bg-soft);
+  }
+  .card-wrapper {
+    margin-top: 8px;
+  }
+}
+
+</style>

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

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { syncRef, useCssVar } from '@vueuse/core'
+import HomeContainer from './HomeContainer.vue'
+import RangeSlider from '../base/RangeSlider.vue'
+import InputField from '../base/InputField.vue'
+import ColorPicker from '../base/ColorPicker.vue'
+import ResetButton from '../base/ResetButton.vue'
+import HomeIconCustomizerIcons from './HomeIconCustomizerIcons.vue'
+import Switch from '../base/Switch.vue'
+
+
+const iconContainer = ref<HTMLElement | null>()
+const color = ref('currentColor')
+const strokeWidth = ref(2)
+const size = ref(24)
+const absoluteStrokeWidth = ref(false)
+
+const colorCssVar = useCssVar(
+  '--customize-color',
+  iconContainer,
+  {
+    initialValue: 'default'
+  }
+)
+
+const strokeWidthCssVar = useCssVar(
+  '--customize-strokeWidth',
+  iconContainer,
+  {
+    initialValue: '2'
+  }
+)
+
+const sizeCssVar = useCssVar(
+  '--customize-size',
+  iconContainer,
+  {
+    initialValue: '24'
+  }
+)
+
+syncRef(color, colorCssVar)
+syncRef(strokeWidth, strokeWidthCssVar)
+syncRef(size, sizeCssVar)
+
+function resetStyle () {
+  color.value = 'currentColor'
+  strokeWidth.value = 2
+  size.value = 24
+}
+
+watch(absoluteStrokeWidth, (enabled) => {
+  iconContainer.value?.classList.toggle('absolute-stroke-width', enabled)
+})
+</script>
+
+<template>
+  <HomeContainer>
+    <div class="card">
+      <div class="card-column">
+        <h2 class="title">
+          Style as you please
+          <ResetButton @click="resetStyle"></ResetButton>
+        </h2>
+        <p class="copy">
+          Lucide has a lot of customization options to match the icons with your UI.
+        </p>
+
+        <div
+          class="customizer"
+          style="--color-picker-bg: var(--vp-input-switch-bg-color)"
+        >
+          <InputField
+            id="icon-color"
+            label="Color"
+            class="color-picker-field"
+          >
+            <template #display>
+              <ColorPicker v-model="color" id="icon-color"  />
+            </template>
+          </InputField>
+
+          <InputField
+            id="stroke-width"
+            label="Stroke width"
+          >
+            <template #display>
+              <span class="customize-label">{{ strokeWidth }}px</span>
+            </template>
+            <RangeSlider
+              id="stroke-width"
+              name="stroke-width"
+              v-model="strokeWidth"
+              :min="1"
+              :max="3"
+              :step="0.25"
+            />
+          </InputField>
+
+          <InputField
+            id="size"
+            label="Size"
+          >
+            <template #display>
+              <span class="customize-label">{{ size }}px</span>
+            </template>
+            <RangeSlider
+              id="size"
+              name="size"
+              v-model="size"
+              :min="16"
+              :max="48"
+              :step="4"
+            />
+          </InputField>
+
+          <InputField
+            id="absolute-stroke-width"
+            label="Absolute Stroke width"
+          >
+            <template #display>
+              <Switch
+                id="absolute-stroke-width"
+                name="absolute-stroke-width"
+                v-model="absoluteStrokeWidth"
+              />
+            </template>
+          </InputField>
+        </div>
+      </div>
+
+      <div class="icons-container card-column" ref="iconContainer">
+        <HomeIconCustomizerIcons />
+      </div>
+    </div>
+  </HomeContainer>
+</template>
+
+<style scoped>
+.card {
+  display: block;
+  border-radius: 12px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+  padding: 24px;
+  --slider-bar-color: var(--vp-c-bg-soft-down);
+  --color-picker-bg: var(--vp-c-bg-soft-down);
+}
+
+.title {
+  line-height: 32px;
+  font-size: 24px;
+  font-weight: 600;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.copy {
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.customizer {
+  margin-top: 32px;
+  padding: 0;
+  background: none;
+  max-width: 280px;
+}
+
+@media (min-width: 640px) {
+
+  .card {
+    display: grid;
+    grid-template-columns: 8fr 10fr;
+  }
+/*
+  .card-column {
+    flex: 1;
+  } */
+}
+
+@media (min-width: 960px) {
+  .card {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+.color-picker-field:deep(.display-value) {
+  width: 138px;
+}
+</style>

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { data } from './HomeHeroIconsCard.data'
+import LucideIcon from '../base/LucideIcon.vue'
+import { vIntersectionObserver } from '@vueuse/components'
+
+const getInitialItems = () => data.icons.slice(0, 64)
+const items = ref(getInitialItems())
+const showIcons = ref(false)
+
+// Added intersection observer to improve performance
+const onIntersectionObserver: IntersectionObserverCallback = ([{ isIntersecting }]) => {
+  if (isIntersecting) {
+    showIcons.value = true
+  }
+}
+</script>
+
+<template>
+  <div class="icon-grid" v-intersection-observer="onIntersectionObserver">
+    <template v-if="showIcons">
+      <div
+        v-for="icon in items"
+        class="icon-grid-item"
+        >
+        <LucideIcon v-bind="icon" class="lucide-icon"/>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.icon-grid {
+  display: grid;
+  gap: 1px;
+  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
+  grid-template-rows: repeat(auto-fill, minmax(68px, 1fr));
+  width: 100%;
+  height:100%;
+  max-height: 360px;
+  gap: 1px;
+  overflow: hidden;
+  position: relative;
+  border-radius: 12px;
+  border: 8px solid var(--vp-c-bg);
+  position: relative;
+  top: 48px;
+  right: 0;
+  box-shadow: var(--vp-shadow-4);
+}
+
+.icon-grid-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--vp-c-bg);
+}
+
+@media (min-width: 640px) {
+  .icon-grid {
+    top: 0;
+    right: -48px;
+  }
+}
+
+.lucide-icon {
+  will-change: width, height, stroke-width, stroke;
+  color: var(--customize-color, currentColor);
+  stroke-width: var(--customize-strokeWidth, 2);
+  width: calc(var(--customize-size, 24) * 1px);
+  height: calc(var(--customize-size, 24) * 1px);
+}
+
+.icons-container.absolute-stroke-width .lucide-icon {
+  stroke-width: calc(var(--customize-strokeWidth, 2) * 24 / var(--customize-size, 24));
+}
+</style>

docs/.vitepress/theme/components/home/HomePackagesSection.data.ts

@@ -0,0 +1,53 @@
+export default {
+  async load() {
+    return {
+      packages: [
+        {
+          name: 'lucide',
+          logo: '/framework-logos/js.svg',
+          label: 'Lucide documentation for JavaScript',
+        },
+        {
+          name: 'lucide-react',
+          logo: '/framework-logos/react.svg',
+          label: 'Lucide documentation for React',
+        },
+        {
+          name: 'lucide-vue-next',
+          logo: '/framework-logos/vue.svg',
+          label: 'Lucide documentation for Vue 3',
+        },
+        {
+          name: 'lucide-svelte',
+          logo: '/framework-logos/svelte.svg',
+          label: 'Lucide documentation for Svelte',
+        },
+        {
+          name: 'lucide-preact',
+          logo: '/framework-logos/preact.svg',
+          label: 'Lucide documentation for Preact',
+        },
+        {
+          name: 'lucide-solid',
+          logo: '/framework-logos/solid.svg',
+          label: 'Lucide documentation for Solid',
+        },
+        {
+          name: 'lucide-angular',
+          logo: '/framework-logos/angular.svg',
+          label: 'Lucide documentation for Angular',
+        },
+        {
+          name: 'lucide-react-native',
+          logo: '/framework-logos/react-native.svg',
+          label: 'Lucide documentation for React Native',
+        },
+        {
+          name: 'lucide-flutter',
+          logo: '/framework-logos/flutter.svg',
+          label: 'Lucide documentation for Flutter',
+        },
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import HomeContainer from './HomeContainer.vue'
+import { useRouter } from 'vitepress';
+import { data } from './HomePackagesSection.data'
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
+
+const { go } = useRouter()
+</script>
+
+<template>
+  <HomeContainer>
+    <h2 class="section-title">Available For:</h2>
+    <div class="packages-list">
+      <a
+        v-for="{ name, logo } in data.packages"
+        :href="`/guide/packages/${name}`"
+        class="package-logo"
+        :aria-label="`Read more about: ${name} package`"
+        @click.prevent="go(`/guide/packages/${name}`)"
+      >
+        <img
+          :src="logo"
+          height="36"
+          width="36"
+          loading="lazy"
+          :alt="`${name} logo`"
+        />
+      </a>
+    </div>
+    <div class="more-button-wrapper">
+      <VPButton text="And more" href="/packages" theme="alt" class="more-button"/>
+    </div>
+  </HomeContainer>
+</template>
+
+<style scoped>
+.section-title {
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+  line-height: 32px;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+.packages-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin: 0 -0.5rem;
+  gap: 16px;
+}
+
+.more-button-wrapper {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.package-logo {
+  transition: opacity ease-in .15s;
+}
+
+.package-logo:hover {
+  opacity: .6;
+}
+</style>

docs/.vitepress/theme/components/icons/CategoryList.data.ts

@@ -0,0 +1,16 @@
+import { getAllData } from '../../../lib/icons';
+import { getAllCategoryFiles, mapCategoryIconCount } from '../../../lib/categories';
+import iconsMetaData from '../../../data/iconMetaData'
+
+
+export default {
+  async load() {
+    let categories = getAllCategoryFiles()
+
+    categories = mapCategoryIconCount(categories, Object.values(iconsMetaData))
+
+    return {
+      categories,
+    }
+  }
+}