feat(scripts): added icon usage script

* Add icons/polygon.svg

* Applied code from jguddas

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* extended metadata in polygon.json

* Rename polygon.json to vector-polygon.json

* Rename polygon.svg to vector-polygon.svg

* Update icons/vector-polygon.svg

* Update vector-square.svg

---------

Co-authored-by: timmy471 <timilehin.ayantunji@etranzact.com>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Karsa <contact@karsa.org>

.cspell/custom-words.txt

@@ -9,3 +9,4 @@ strikethrough
 touchpad
 ungroup
 toc
+sunlounger

.eslintignore

@@ -1,11 +0,0 @@
-dist
-build
-coverage
-lib
-tests
-node_modules
-.eslintrc.js
-docs/images
-docs/**/examples/
-packages/lucide-react/dynamicIconImports.js
-packages/angular/.angular

.eslintrc.js

@@ -1,75 +0,0 @@
-const DEFAULT_ATTRS = require('./tools/build-icons/render/default-attrs.json');
-
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    node: true,
-  },
-  extends: ['airbnb-base', 'prettier'],
-  plugins: ['import', '@html-eslint'],
-  rules: {
-    'no-console': 'off',
-    'no-param-reassign': 'off',
-    'no-shadow': 'off',
-    'no-use-before-define': 'off',
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: ['**/*.test.js', '**/*.spec.js', '**/scripts/**'],
-      },
-    ],
-    'import/extensions': [
-      'error',
-      {
-        pattern: {
-          mjs: 'always',
-          json: 'always',
-        },
-      },
-    ],
-  },
-  parserOptions: {
-    tsconfigRootDir: __dirname,
-    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/DISCUSSION_TEMPLATE/icon-design.yml

@@ -0,0 +1,49 @@
+title: '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 👍.
+
+        > [!CAUTION]
+        > New brand logos are **not** allowed, see our official statement: https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md.
+        >
+        > Existing brand icons have been phased out. 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 request before and there weren't any.
+          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, see more at https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md
+          required: true
+        - label: I am not requesting an icon that includes religious, war/violence related, 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

@@ -13,21 +13,19 @@ body:
       description: Which Lucide packages are affected? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
-        - label: lucide-flutter
-        - label: lucide-preact
         - label: lucide-react
+        - label: '@lucide/vue'
+        - label: '@lucide/svelte'
+        - label: '@lucide/angular'
+        - label: '@lucide/astro'
         - label: lucide-react-native
+        - label: lucide-preact
         - label: lucide-solid
         - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: '@lucide/svelte (new version)'
-        - label: lucide-vue
-        - label: lucide-vue-next
-        - label: lucide-astro
         - label: '@lucide/icons'
+        - label: lucide-vue-next (deprecated)
+        - label: lucide-svelte (deprecated)
+        - label: lucide-angular (deprecated)
         - label: Figma plugin
         - label: source/main
         - label: other/not relevant
@@ -38,7 +36,7 @@ body:
     attributes:
       label: Version
       description: What version of Lucide are you running?
-      placeholder: e.g. 0.289.1
+      placeholder: e.g. 1.1.0
     validations:
       required: true
   - type: checkboxes

.github/ISSUE_TEMPLATE/04_feature_request.yml

@@ -13,21 +13,19 @@ body:
       description: Which Lucide project do you wish this feature were added to? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular (old version)
-        - label: '@lucide/angular (new version)'
-        - label: '@lucide/astro'
-        - label: lucide-flutter
-        - label: lucide-preact
         - label: lucide-react
+        - label: '@lucide/vue'
+        - label: '@lucide/svelte'
+        - label: '@lucide/angular'
+        - label: '@lucide/astro'
         - label: lucide-react-native
+        - label: lucide-preact
         - label: lucide-solid
         - label: lucide-static
-        - label: lucide-svelte (old version)
-        - label: '@lucide/svelte (new version)'
-        - label: lucide-vue
-        - label: lucide-vue-next
-        - label: lucide-astro
         - label: '@lucide/icons'
+        - label: lucide-vue-next (deprecated)
+        - label: lucide-svelte (deprecated)
+        - label: lucide-angular (deprecated)
         - label: Figma plugin
         - label: all JS packages
         - label: site

.github/copilot-instructions.md

@@ -0,0 +1,8 @@
+## Reviewing PRs
+
+When reviewing PRs, please respond in a friendly and constructive manner.
+
+- First, thank the contributor for their contribution in an enthusiastic way.
+- If you have any suggestions for improvement, provide them clearly and concisely.
+- If you have any questions about the PR, ask them respectfully.
+- Let the contributor know that we have many PRs to review and that we appreciate their patience while we review their contribution.

.github/dependabot.yml

@@ -0,0 +1,106 @@
+version: 2
+
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+    groups:
+      react-deps:
+        patterns:
+          - '@testing-library/react'
+          - '@types/prop-types'
+          - '@types/react'
+          - '@vitejs/plugin-react'
+          - 'react'
+          - 'react-dom'
+      vue-deps:
+        patterns:
+          - '@testing-library/vue'
+          - '@vitejs/plugin-vue'
+          - '@vue/test-utils'
+          - 'vue'
+      svelte-deps:
+        patterns:
+          - '@sveltejs/*'
+          - '@testing-library/svelte'
+          - '@tsconfig/svelte'
+          - 'svelte'
+          - 'svelte-check'
+          - 'svelte-preprocess'
+      solid-deps:
+        patterns:
+          - '@babel/*'
+          - '@rollup/plugin-babel'
+          - '@solidjs/testing-library'
+          - 'babel-preset-solid'
+          - 'solid-js'
+          - 'vite-plugin-solid'
+      react-native-deps:
+        patterns:
+          - 'react-native'
+          - 'react-native-svg'
+      angular-deps:
+        patterns:
+          - '@angular/*'
+          - '@angular-eslint/*'
+          - '@vitest/browser-playwright'
+          - 'angular-eslint'
+          - 'ng-packagr'
+          - 'rxjs'
+          - 'tslib'
+      preact-deps:
+        patterns:
+          - '@preact/preset-vite'
+          - '@testing-library/preact'
+          - 'preact'
+      astro-deps:
+        patterns:
+          - '@astrojs/*'
+          - 'astro'
+      testing-deps:
+        patterns:
+          - '@testing-library/*'
+          - '@vitest/*'
+          - 'jest-serializer-html'
+          - 'jsdom'
+          - 'linkedom'
+          - 'vitest'
+      build-deps:
+        patterns:
+          - '@rollup/*'
+          - '@vitejs/*'
+          - 'esbuild'
+          - 'rollup'
+          - 'rollup-plugin-*'
+          - 'typescript'
+          - 'vite'
+          - 'vite-plugin-*'
+      linting-deps:
+        patterns:
+          - '@eslint/*'
+          - '@html-eslint/*'
+          - '@typescript-eslint/*'
+          - 'angular-eslint'
+          - 'cspell'
+          - 'eslint'
+          - 'eslint-*'
+          - 'husky'
+          - 'lint-staged'
+          - 'prettier'
+          - 'prettier-plugin-*'
+      types-deps:
+        patterns:
+          - '@types/*'
+      remaining-deps:
+        patterns:
+          - '*'
+
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: monthly
+    groups:
+      github-actions:
+        patterns:
+          - '*'

.github/instructions/metadata.instructions.md

@@ -0,0 +1,20 @@
+---
+applyTo: "icons/*.json"
+---
+# JSON Metadata Descriptor
+
+The schema for the JSON metadata descriptor can be found in `icon.schema.json`. It defines the required and optional properties for the JSON files that accompany each icon. The JSON metadata descriptor should be placed in the same directory as the SVG file of the icon and should have the same name as the SVG file, but with a `.json` extension. For example, if the SVG file is named `home.svg`, the JSON metadata descriptor should be named `home.json`.
+
+## Contributors
+
+The `contributors` property is a required array of GitHub usernames for the people who created or contributed to the icon. It is used to give credit to contributors and to track the icon's history. Add the PR author to the `contributors` array if they are not already listed and they have made a significant contribution to the icon's SVG.
+
+## Tags
+
+The `tags` property is an array of strings that describe the icon and can be used for searching.
+Validate the tags against the `icon.schema.json` to ensure they are correctly formatted and adhere to the defined structure.
+Provide tag suggestions based on the name of the icon and the use cases provided in the PR description. Use the existing tags in the repository as a reference for consistency and to avoid duplicates. Don't suggest words like: 'icon' and preferably use single words. Tags should always be in lowercase, and may also contain spaces (e.g. `magnifying glass`). The name of icon should not be included in the tags, as it is already specified.
+
+# Categories
+
+The `categories` property is an array of strings that specify the categories to which the icon belongs, such as "devices", "interface", "media", etc. See the `categories` property in the `icon.schema.json` for more details on the allowed values. The categories should be chosen based on the use cases provided in the PR description and the existing categories in the repository. The categories should be relevant to the icon and should help users find the icon when searching for specific types of icons. The name of icon should not be included in the categories, as it is already specified. Suggest categories based on the name of the icon and the use cases provided in the PR description. Use the existing categories in the repository as a reference for consistency and to avoid duplicates. Categories should always be in lowercase and should not contain spaces.

.github/labeler.yml

@@ -52,15 +52,13 @@
 💎 vue package:
   - changed-files:
       - any-glob-to-any-file:
-          - 'packages/lucide-vue/*'
-          - 'packages/lucide-vue-next/*'
+          - 'packages/vue/*'
 
 # For changes in the Lucide angular package
 🅰️ angular package:
   - changed-files:
       - any-glob-to-any-file:
           - 'packages/angular/*'
-          - 'packages/lucide-angular/*'
 
 # For changes in the Lucide preact package
 ⚛️ preact package:
@@ -72,7 +70,7 @@
 🧣 svelte package:
   - changed-files:
       - any-glob-to-any-file:
-          - 'packages/lucide-svelte/*'
+          - 'packages/svelte/*'
 
 # For changes in the Lucide solid package
 🪝 solid package:
@@ -97,9 +95,3 @@
   - 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

@@ -47,7 +47,9 @@ Common scopes: icons, docs, studio, site, dev
 
 ### Design <!-- ONLY for new icons -->
 <!-- All of these requirements must be fulfilled. -->
+
 - [ ] I've read and followed the [icon design guidelines](https://lucide.dev/contribute/icon-design-guide)
+- [ ] I've made sure that the icons don't [already exist](https://lucide.dev/icons), including the [Lab directory](https://github.com/lucide-icons/lucide/tree/main/lab).
 - [ ] 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.

.github/workflows/angular.yml

@@ -7,13 +7,16 @@ on:
       - tools/build-icons/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -27,9 +30,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/ci.yml

@@ -23,24 +23,51 @@ on:
           - beta
           - alpha
 
-permissions:
-  id-token: write # Required for OIDC
-  contents: write
-
-# This is added to make sure we wait until last release is done, this is needed for the font-build process
-concurrency:
-  group: continuous-integration
+permissions: {}
 
 jobs:
-  create-release:
-    if: github.repository == 'lucide-icons/lucide' && startsWith(github.event.head_commit.message, 'feat(icons)') && github.event_name != 'workflow_dispatch'
+  check-dispatch-gate:
+    if: github.repository == 'lucide-icons/lucide' &&
+      startsWith(github.event.head_commit.message, 'feat(icons)') &&
+      github.event_name != 'workflow_dispatch'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    outputs:
+      RELEASE_ENVIRONMENT: ${{ steps.environment.outputs.RELEASE_ENVIRONMENT }}
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+
+      - name: Fetch tags
+        run: git fetch --all --tags
+
+      - name: Check if latest tag was created today
+        id: environment
+        run: |
+          LATEST_TAG=$(git tag --sort=-v:refname | grep -E '^[0-9]+\.[0-9]+\.[0-9]+$' | head -n 1)
+          TAG_DATE=$(git log -1 --format=%cs "$LATEST_TAG")
+          TODAY=$(date +%Y-%m-%d)
+
+          if [ "$TAG_DATE" == "$TODAY" ]; then
+            echo "::warning::A release tag already exists for today ($TODAY): $LATEST_TAG. Manual approval will be required to proceed."
+            echo "RELEASE_ENVIRONMENT=Icon Release Gated" >> $GITHUB_OUTPUT
+          else
+            echo "RELEASE_ENVIRONMENT=Icon Release" >> $GITHUB_OUTPUT
+          fi
+
+  create-release:
+    if: github.repository == 'lucide-icons/lucide'
+    needs: check-dispatch-gate
+    environment: ${{ needs.check-dispatch-gate.outputs.RELEASE_ENVIRONMENT }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # Required to create the release and tag
     outputs:
       VERSION: ${{ steps.new-version.outputs.NEW_VERSION }}
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -75,7 +102,7 @@ jobs:
           echo '${{ steps.change-log.outputs.CHANGE_LOG }}'
 
       - name: Create Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@3d0d9888cb7fd7b750713d6e236d1fcb99157228 # v3.0.2
         with:
           tag_name: ${{ steps.new-version.outputs.NEW_VERSION }}
           name: Version ${{ steps.new-version.outputs.NEW_VERSION }}
@@ -86,13 +113,19 @@ jobs:
     needs: create-release
     uses: './.github/workflows/release.yml'
     secrets: inherit
+    permissions:
+      id-token: write # Required for OIDC (npm provenance)
+      contents: write # Required to upload release assets
     with:
       version: ${{ needs.create-release.outputs.VERSION }}
 
   dispatch-release:
-    if: github.event_name == 'workflow_dispatch'
+    if: github.repository == 'lucide-icons/lucide' && github.event_name == 'workflow_dispatch'
     uses: './.github/workflows/release.yml'
     secrets: inherit
+    permissions:
+      id-token: write # Required for OIDC (npm provenance)
+      contents: write # Required to upload release assets
     with:
       version: ${{ inputs.version }}
       tag: ${{ inputs.tag }}

.github/workflows/close-issue-with-banned-phrases.yml

@@ -3,18 +3,28 @@ name: Close Icon Requests with Brand Terms
 on:
   issues:
     types: [opened]
+  discussion:
+    types: [created]
+
+permissions: {}
+
+env:
+  GH_TOKEN: ${{ github.token }}
 
 jobs:
   block_phrases:
+    if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     permissions:
+      contents: read
       issues: write
+      discussions: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
 
       - name: Load stopwords from JSON & check issue title & body
-        if: contains(github.event.issue.labels.*.name, '🙌 icon request')
+        if: github.event_name == 'issues' && contains(github.event.issue.labels.*.name, '🙌 icon request')
         run: |
           ISSUE_TITLE=$(jq -r '.issue.title' "$GITHUB_EVENT_PATH")
           ISSUE_BODY=$(jq -r '.issue.body // ""' "$GITHUB_EVENT_PATH")
@@ -27,15 +37,17 @@ jobs:
             if echo "$ISSUE_TITLE" | grep -iqE "$SAFE_KEY|$SAFE_VALUE" || \
               { [ -n "$ICON_NAME_SECTION" ] && echo "$ICON_NAME_SECTION" | grep -iqE "$SAFE_KEY|$SAFE_VALUE"; }; then
 
+              URL_ENCODED_VALUE=$(jq -rn --arg val "$VALUE" '$val|@uri')
+
               gh issue close ${{ github.event.issue.number }} \
                 --reason "not planned" \
                 --comment "It looks like this request is about **${VALUE}**, which is a brand logo.
 
           Lucide **does not accept** brand logos, and we do not plan to add them in the future. This is due to a combination of **legal restrictions**, **design consistency concerns**, and **practical maintenance reasons**.
 
-          [Click here to read our official statement about brand logos in Lucide.](./BRAND_LOGOS_STATEMENT.md)
+          [Click here to read our official statement about brand logos in Lucide.](https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md)
 
-          You can [search for similar issues.](https://github.com/lucide-icons/lucide/issues?q=is%3Aissue+${VALUE})
+          You can [search for similar issues.](https://github.com/lucide-icons/lucide/issues?q=is%3Aissue+${URL_ENCODED_VALUE})
 
           We’re always happy to help on [Discord](https://discord.gg/EH6nSts)."
 
@@ -44,5 +56,55 @@ jobs:
             fi
           done
 
-env:
-  GH_TOKEN: ${{ github.token }}
+      - name: Load stopwords from JSON & check discussion title & body
+        if: github.event_name == 'discussion' && github.event.discussion.category.slug == 'icon-design'
+        run: |
+          DISCUSSION_TITLE=$(jq -r '.discussion.title' "$GITHUB_EVENT_PATH")
+          DISCUSSION_BODY=$(jq -r '.discussion.body // ""' "$GITHUB_EVENT_PATH")
+          ICON_NAME_SECTION=$(printf '%s\n' "$DISCUSSION_BODY" | awk '/### Icon name/{flag=1; next} /^### /{flag=0} flag')
+
+          jq -r 'to_entries[] | "\(.key) \(.value)"' brand-stopwords.json | while read -r KEY VALUE; do
+            SAFE_KEY=$(printf '%s\n' "$KEY" | sed 's/[][\.^$*]/\\&/g')
+            SAFE_VALUE=$(printf '%s\n' "$VALUE" | sed 's/[][\.^$*]/\\&/g')
+
+            if echo "$DISCUSSION_TITLE" | grep -iqE "$SAFE_KEY|$SAFE_VALUE" || \
+              { [ -n "$ICON_NAME_SECTION" ] && echo "$ICON_NAME_SECTION" | grep -iqE "$SAFE_KEY|$SAFE_VALUE"; }; then
+
+              URL_ENCODED_VALUE=$(jq -rn --arg val "$VALUE" '$val|@uri')
+              DISCUSSION_NODE_ID=$(jq -r '.discussion.node_id' "$GITHUB_EVENT_PATH")
+              COMMENT_BODY="It looks like this request is about **${VALUE}**, which is a brand logo.
+
+          Lucide **does not accept** brand logos, and we do not plan to add them in the future. This is due to a combination of **legal restrictions**, **design consistency concerns**, and **practical maintenance reasons**.
+
+          [Click here to read our official statement about brand logos in Lucide.](https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md)
+
+          You can [search for similar discussions.](https://github.com/lucide-icons/lucide/discussions/categories/icon-design?discussions_q=category%253A%22Icon+design%22+${URL_ENCODED_VALUE})
+
+          We’re always happy to help on [Discord](https://discord.gg/EH6nSts)."
+
+              # Add comment to discussion
+              gh api graphql -f query='
+                mutation($discussionId: ID!, $body: String!) {
+                  addDiscussionComment(input: {discussionId: $discussionId, body: $body}) {
+                    comment { id }
+                  }
+                }' -f discussionId="$DISCUSSION_NODE_ID" -f body="$COMMENT_BODY"
+
+              # Close discussion
+              gh api graphql -f query='
+                mutation($discussionId: ID!) {
+                  closeDiscussion(input: {discussionId: $discussionId}) {
+                    discussion { closed }
+                  }
+                }' -f discussionId="$DISCUSSION_NODE_ID"
+
+              # Lock discussion
+              gh api graphql -f query='
+                mutation($lockableId: ID!, $reason: LockReason) {
+                  lockLockable(input: {lockableId: $lockableId, lockReason: $reason}) {
+                    lockedRecord { locked }
+                  }
+                }' -f lockableId="$DISCUSSION_NODE_ID" -f reason="SPAM"
+              exit 0
+            fi
+          done

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

@@ -3,13 +3,16 @@ on:
   schedule:
     - cron: '45 1 * * *'
 
+permissions: {}
+
 jobs:
   stale:
+    if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write
     steps:
-      - uses: actions/stale@v9
+      - uses: actions/stale@4391f3da665fdf50b6810c1a66712fb9ba21aa93 # v11.0.0
         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.

.github/workflows/comment-icon-preview.yml

@@ -6,15 +6,22 @@ on:
     types:
       - completed
 
+permissions: {}
+
 jobs:
   upload:
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      actions: read # Required to download the artifact from the triggering run
+      pull-requests: write
     if: >
+      github.repository == 'lucide-icons/lucide' &&
       github.event.workflow_run.event == 'pull_request' &&
       github.event.workflow_run.conclusion == 'success'
     steps:
       - name: 'Download artifact'
-        uses: actions/github-script@v7
+        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
         with:
           script: |
             let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
@@ -42,7 +49,7 @@ jobs:
         id: pr-number
 
       - name: Find Comment
-        uses: peter-evans/find-comment@v2
+        uses: peter-evans/find-comment@b30e6a3c0ed37e7c023ccd3f1db5c6c0b0c23aad # v4.0.0
         id: pr-comment
         with:
           issue-number: ${{ steps.pr-number.outputs.number }}
@@ -50,7 +57,7 @@ jobs:
           body-includes: Added or changed icons
 
       - name: Create or update comment
-        uses: peter-evans/create-or-update-comment@v3
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9 # v5.0.0
         with:
           comment-id: ${{ steps.pr-comment.outputs.comment-id }}
           issue-number: ${{ steps.pr-number.outputs.number }}

.github/workflows/icons.yml

@@ -9,13 +9,16 @@ on:
       - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -29,9 +32,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/labeler.yml

@@ -2,12 +2,15 @@ name: 'Pull Request Labeler'
 on:
   - pull_request_target
 
+permissions: {}
+
 jobs:
   triage:
+    if: github.repository == 'lucide-icons/lucide'
     permissions:
       contents: read
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/labeler@v5
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: actions/labeler@bf12e9b00b37c5c0ca2b87b79b2daf7891dbda13 # v7.0.0

.github/workflows/lint-code.yml

@@ -1,17 +1,18 @@
-name: Linting PR
+name: Linting PR code
 
 on:
   pull_request:
-    paths-ignore:
-      - icons/*.svg
+
+permissions:
+  contents: read
 
 jobs:
   lint-code:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/lint-pr-title.yml

@@ -1,4 +1,4 @@
-name: Linting PR
+name: Linting PR title
 
 on:
   pull_request:
@@ -7,12 +7,16 @@ on:
       - edited
       - reopened
 
+permissions:
+  contents: read
+  pull-requests: read # Required to read the PR title
+
 jobs:
   lint-pr-title:
     name: PR Title Lint
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/linting-icons.yml

@@ -7,6 +7,9 @@ on:
   pull_request:
     paths:
       - 'icons/*'
+      - 'lab/*'
+
+permissions: {}
 
 jobs:
   lint-filenames:
@@ -16,27 +19,54 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
+          cache: 'pnpm'
           node-version-file: 'package.json'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@v46
+        uses: tj-actions/changed-files@9426d40962ed5378910ee2e21d5f8c6fcbf2dd96 # v47.0.6
         with:
-          files: icons/*
+          files: |
+            icons/*
+            lab/*
 
       - name: Generate annotations
         run: node ./scripts/lintFilenames.mts
         env:
           CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
 
+  check-lab-icons:
+    name: Check Lab Icons
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          cache: 'pnpm'
+          node-version-file: 'package.json'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Check lab icons do not already exist in icons
+        run: node ./scripts/checkLabIcons.mts
+
   lint-aliases:
     name: Check Uniqueness of Aliases
     runs-on: ubuntu-latest
     permissions:
       contents: read
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - name: Check Uniqueness of Aliases
         run: "! cat <(printf \"%s\\n\" icons/*.json | while read -r name; do basename \"$name\" .json; done) <(jq -cr 'select(.aliases) | .aliases[] | if type==\"string\" then . else .name end' icons/*.json) | sort | uniq -c | grep -ve '^\\s*1 '"

.github/workflows/lucide-angular.yml

@@ -1,44 +0,0 @@
-name: Lucide Angular checks
-
-on:
-  push:
-    branches:
-      - next
-  pull_request:
-    paths:
-      - packages/lucide-angular/**
-      - tools/build-icons/**
-      - pnpm-lock.yaml
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm --filter lucide-angular build
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Test
-        run: pnpm --filter lucide-angular test

.github/workflows/lucide-astro.yml

@@ -11,13 +11,16 @@ on:
       - tools/build-icons/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           node-version-file: 'package.json'
           cache: 'pnpm'
@@ -31,9 +34,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3.8.1
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           node-version-file: 'package.json'
           cache: 'pnpm'

.github/workflows/lucide-font.yml

@@ -9,13 +9,16 @@ on:
       - tools/build-font/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   lucide-font:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -23,11 +26,14 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Execute unit tests for build-font
+        run: pnpm test:font
+
       - name: Create font in ./lucide-font
         run: pnpm build:font
 
       - name: 'Upload to Artifacts'
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: lucide-font
           path: lucide-font

.github/workflows/lucide-lab.yml

@@ -0,0 +1,30 @@
+name: Lucide Lab checks
+
+on:
+  pull_request:
+    paths:
+      - packages/lab/**
+      - packages/shared/**
+      - tools/build-icons/**
+      - tools/rollup-plugins/**
+      - pnpm-lock.yaml
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          cache: 'pnpm'
+          node-version-file: 'package.json'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm --filter @lucide/lab build

.github/workflows/lucide-preact.yml

@@ -12,13 +12,16 @@ on:
       - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   lucide-preact:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

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

@@ -12,13 +12,16 @@ on:
       - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -32,9 +35,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/lucide-react.yml

@@ -13,13 +13,16 @@ on:
       - scripts/generateNextJSAliases.mjs
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -33,9 +36,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/lucide-shared.yml

@@ -9,13 +9,16 @@ on:
       - packages/shared/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/lucide-solid.yml

@@ -12,13 +12,16 @@ on:
       - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -32,9 +35,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/lucide-static.yml

@@ -7,13 +7,16 @@ on:
       - tools/build-icons/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   lucide-static:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/lucide-svelte-5.yml

@@ -12,13 +12,16 @@ on:
       - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -32,9 +35,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -48,9 +51,9 @@ jobs:
   typecheck:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/lucide-svelte.yml

@@ -1,46 +0,0 @@
-name: Lucide Svelte checks
-
-on:
-  push:
-    branches:
-      - next
-  pull_request:
-    paths:
-      - packages/lucide-svelte/**
-      - packages/shared/**
-      - tools/build-icons/**
-      - tools/rollup-plugins/**
-      - pnpm-lock.yaml
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm --filter lucide-svelte build
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Test
-        run: pnpm --filter lucide-svelte test

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

@@ -1,46 +0,0 @@
-name: Lucide Vue Next checks
-
-on:
-  push:
-    branches:
-      - next
-  pull_request:
-    paths:
-      - packages/lucide-vue-next/**
-      - packages/shared/**
-      - tools/build-icons/**
-      - tools/rollup-plugins/**
-      - pnpm-lock.yaml
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm --filter lucide-vue-next build
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
-        with:
-          cache: 'pnpm'
-          node-version-file: 'package.json'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Test
-        run: pnpm --filter lucide-vue-next test

.github/workflows/lucide-vue.yml

@@ -6,19 +6,22 @@ on:
       - next
   pull_request:
     paths:
-      - packages/lucide-vue/**
+      - packages/vue/**
       - packages/shared/**
       - tools/build-icons/**
       - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -32,9 +35,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/lucide.yml

@@ -11,13 +11,16 @@ on:
       - tools/rollup-plugins/**
       - pnpm-lock.yaml
 
+permissions:
+  contents: read
+
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -31,9 +34,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'

.github/workflows/pull-request-icon-preview.yml

@@ -5,27 +5,30 @@ on:
     paths:
       - 'icons/*.svg'
 
+permissions: {}
+
 jobs:
   generate-changed-icons-comment:
     name: Generate Changed Icons Comment
+    if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     permissions:
       contents: read
       pull-requests: write
 
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           node-version-file: 'package.json'
 
       - name: Get changed files
         id: changed-files
-        uses: tj-actions/changed-files@v46
+        uses: tj-actions/changed-files@9426d40962ed5378910ee2e21d5f8c6fcbf2dd96 # v47.0.6
         with:
           files: icons/*.svg
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       - name: Install svgson for code preview (safer and faster than installing all deps)
         run: npm install svgson@5.3.1 --force
 
@@ -40,7 +43,7 @@ jobs:
         env:
           CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: pr_number
           path: pr/

.github/workflows/pull-request-metadata-suggestions.yml

@@ -1,13 +1,16 @@
-name: Pull request tags suggestions
+name: Pull request metadata suggestions
 
 on:
   pull_request_target:
     paths:
       - 'icons/*.json'
 
+permissions: {}
+
 jobs:
-  pull-request-tags-suggestions:
-    name: Pull Request Tags Suggestions
+  pull-request-metadata-suggestions:
+    name: Pull Request Metadata Suggestions
+    if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -16,11 +19,11 @@ jobs:
     steps:
       #  We checkout the main branch of main repository for security reasons.
       #  This is to prevent the workflow from running on a forked repository.
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
           repository: lucide-icons/lucide
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -29,7 +32,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Generate comment markup
-        run: node ./scripts/suggestTags.mts
+        run: node ./scripts/suggestMetaData.mts
         env:
           OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
           PULL_REQUEST_NUMBER: ${{ github.event.number }}

.github/workflows/release.yml

@@ -16,12 +16,7 @@ on:
         default: 'latest'
         type: string
 
-permissions:
-  id-token: write # Required for OIDC
-  contents: write
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+permissions: {}
 
 jobs:
   prepare:
@@ -29,7 +24,6 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       VERSION: ${{ steps.get_version.outputs.VERSION }}
-
     steps:
       - name: Get the version
         id: get_version
@@ -63,9 +57,9 @@ jobs:
             '@lucide/vue',
           ]
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -74,7 +68,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Set new version
-        run: pnpm --fail-if-no-match --filter ${{ matrix.package }} version --new-version ${{ needs.prepare.outputs.VERSION }} --no-git-tag-version
+        run: pnpm version ${{ needs.prepare.outputs.VERSION }} --filter ${{ matrix.package }} --fail-if-no-match --no-git-tag-version
 
       - name: Build
         run: pnpm --filter ${{ matrix.package }} build
@@ -96,10 +90,14 @@ jobs:
       contents: read
 
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/download-artifact@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        with:
+          name: lucide-font
+          path: lucide-font
+
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -108,7 +106,7 @@ jobs:
         run: pnpm install --frozen-lockfile
 
       - name: Set new version
-        run: pnpm --filter lucide-static version --new-version ${{ needs.prepare.outputs.VERSION }} --no-git-tag-version
+        run: pnpm version ${{ needs.prepare.outputs.VERSION }} --filter lucide-static --no-git-tag-version
 
       - name: Move Font
         run: cp -r lucide-font packages/lucide-static/font
@@ -125,10 +123,12 @@ jobs:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: prepare
+    permissions:
+      contents: read
     steps:
-      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: pnpm/action-setup@0977fd99725f1db4007ccb2928dbb4e90d06cc86 # v6.0.10
+      - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
         with:
           cache: 'pnpm'
           node-version-file: 'package.json'
@@ -136,13 +136,16 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Execute unit tests for build-font
+        run: pnpm test:font
+
       - name: Create font in ./lucide-font
         run: pnpm build:font --saveCodePoints
         env:
           BLOB_READ_WRITE_TOKEN: ${{ secrets.BLOB_READ_WRITE_TOKEN }}
 
       - name: 'Upload to Artifacts'
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
           name: lucide-font
           path: lucide-font
@@ -152,18 +155,21 @@ jobs:
     runs-on: ubuntu-latest
     needs: [prepare, lucide-font]
     permissions:
-      id-token: write # Required for OIDC
-      contents: write
+      contents: write # Required to upload the release assets
     steps:
-      - uses: actions/checkout@v6
-      - uses: actions/download-artifact@v4
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
+        with:
+          name: lucide-font
+          path: lucide-font
+
       - name: Zip font and icons
         run: |
           zip -r lucide-font-${{ needs.prepare.outputs.VERSION }}.zip lucide-font
           zip -r lucide-icons-${{ needs.prepare.outputs.VERSION }}.zip icons
 
       - name: Release zip and fonts
-        uses: softprops/action-gh-release@v2
+        uses: softprops/action-gh-release@3d0d9888cb7fd7b750713d6e236d1fcb99157228 # v3.0.2
         with:
           tag_name: ${{ needs.prepare.outputs.VERSION }}
 

.github/workflows/repo-journal.yml

@@ -0,0 +1,45 @@
+name: Weekly Repo Report
+on:
+  workflow_dispatch:
+  # Run this workflow every Monday at 07:00 UTC
+  schedule:
+    - cron: '0 7 * * 1'
+
+permissions:
+  contents: read
+
+jobs:
+  weekly-summary:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Node.js environment
+        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        with:
+          node-version: 24
+
+      - name: Install Copilot CLI
+        run: npm install -g @github/copilot
+
+      - name: Run the prompt
+        env:
+          COPILOT_GITHUB_TOKEN: ${{ secrets.COPILOT_GITHUB_TOKEN }}
+        run: |
+          copilot -p "${{ vars.REPO_REPORT_PROMPT }} Write the details to summary.md" --allow-tool='shell(git:*)' --allow-tool=write --no-ask-user
+          cat summary.md >> "$GITHUB_STEP_SUMMARY"
+
+      - name: Post report to Discord (private channel)
+        env:
+          DISCORD_WEBHOOK_URL: ${{ secrets.LUCIDE_DISCORD_WEBHOOK }}
+        run: |
+          jq -Rs '{
+            embeds: [{
+              title: "📊 Weekly Repo Report",
+              description: (.[0:4096]),
+              color: 5814783
+            }]
+          }' summary.md > payload.json
+          curl -sS --fail -X POST \
+            -H "Content-Type: application/json" \
+            -d @payload.json \
+            "$DISCORD_WEBHOOK_URL"

.github/workflows/request-review.yml

@@ -1,25 +1,27 @@
-name: 'Request Review'
+name: Request Review
 on:
-  pull_request_target:
+  pull_request:
     types: [opened]
     paths:
       - icons/*.svg
 
+permissions: {}
+
 jobs:
   request-review:
-    if: github.event.pull_request.draft == false
+    if: github.repository == 'lucide-icons/lucide' && github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     permissions:
       contents: read
       pull-requests: write
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         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
+        uses: tj-actions/changed-files@9426d40962ed5378910ee2e21d5f8c6fcbf2dd96 # v47.0.6
         with:
           files: icons/*.svg
       - run: |

.gitignore

@@ -3,7 +3,7 @@
 .next
 .obsidian
 .now
-.idea
+.cache
 .env
 node_modules
 dist
@@ -26,9 +26,11 @@ packages/**/src/utils/*.ts
 packages/**/src/dynamicIconImports.ts
 packages/**/DynamicIcon.d.ts
 packages/**/dynamicIconImports.js
+packages/**/dynamicIconImports.mjs
 packages/**/dynamicIconImports.d.ts
 packages/**/dynamicIconImports.d.mts
 packages/**/dynamicIconImports.js.map
+packages/**/dynamicIconImports.mjs.map
 packages/**/dynamic.d.ts
 packages/**/dynamic.d.mts
 packages/**/dynamic.mjs.map
@@ -37,6 +39,7 @@ packages/**/LICENSE
 categories.json
 tags.json
 .vercel
+package-lock.json
 
 # docs
 docs/.vitepress/cache
@@ -50,8 +53,11 @@ docs/.vitepress/data/categoriesData.json
 docs/.vitepress/data/iconDetails
 docs/.vitepress/data/relatedIcons.json
 docs/.vitepress/data/brandStopwords.json
+docs/.vitepress/data/iconPopularity
+docs/.vitepress/data/lab/iconNodes
+docs/.vitepress/data/lab/iconMetaData.ts
+docs/.vitepress/data/lab/iconPopularity
 docs/.vercel
 docs/.nitro
 docs/public/og/**
 !docs/public/og/general.png
-.gitignore

.prettierignore

@@ -7,8 +7,8 @@ docs/.vitepress/cache
 docs/.vitepress/data
 docs/.nitro
 
-# lucide-angular
-packages/lucide-angular/.angular/cache
+# @lucide/angular
+packages/angular/.angular
 
 # lucide-static
 packages/lucide-static/icons
@@ -17,7 +17,8 @@ packages/lucide-static/sprite.svg
 packages/lucide-static/tags.json
 packages/lucide-static/icon-nodes.json
 packages/lucide-static/font
+packages/svelte/.svelte-kit
 
 # lucide-svelte
-packages/lucide-svelte/src/icons/*.svelte
-packages/lucide-svelte/.svelte-kit
+packages/svelte/src/icons/*.svelte
+packages/svelte/.svelte-kit

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["devs", "preact", "Preact"],
+  "cSpell.words": ["devs", "linecap", "linejoin", "preact", "Preact"],
   "eslint.enable": true,
   "eslint.validate": ["javascript", "svg"],
   "svg.preview.background": "editor"

CONTRIBUTING.md

@@ -30,7 +30,7 @@ Read it here: [ICON_GUIDELINES](https://lucide.dev/contribute/icon-design-guide)
 
 #### Lucide Studio
 
-For formatting and adjusting SVG icons, [@jguddas](https://github.com/jguddas) made a great tool called [Lucide Studio](https://studio.lucide.dev/). It is a web-based SVG editor that allows you to edit and adjust icons in the Lucide style. You can use it to create new icons or modify existing ones.
+For formatting and adjusting SVG icons, [@jguddas](https://github.com/jguddas) made a great tool called [Lucide Studio](https://studio.lucide.dev/?utm_source=lucide.dev&utm_medium=contributing-guide). It is a web-based SVG editor that allows you to edit and adjust icons in the Lucide style. You can use it to create new icons or modify existing ones.
 
 #### Editor guides
 

README.md

@@ -7,9 +7,9 @@
   </a>
 </p>
 <p align="center">
-  <a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide" alt="license"></a>
+  <a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-ISC-green" alt="license"></a>
   <a href="https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons"><img src="https://img.shields.io/badge/Figma-F24E1E?logo=figma&logoColor=white" alt="figma installs"></a>
-  <a href="https://github.com/lucide-icons/lucide/actions/workflows/release.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/release.yml/badge.svg" alt="build status"></a>
+  <a href="https://github.com/lucide-icons/lucide/actions/workflows/ci.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/ci.yml/badge.svg" alt="build status"></a>
   <a href="https://discord.gg/EH6nSts"><img src="https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA" alt="discord chat"></a>
 </p>
 <p align="center">
@@ -26,22 +26,22 @@
 
 # Lucide
 
-Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](https://lucide.dev/packages) to make it easier to use these icons in your project.
+Lucide is an open-source icon library that provides 1600+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official [packages](https://lucide.dev/packages) to make it easier to use these icons in your project.
 
 ## Packages
 
 | Logo | Package | Version | Downloads | Links |
 | ---- | ------- | ------- | --------- | ----- |
-| <img src="https://lucide.dev/framework-logos/js.svg" alt="JS logo" width="48"> | **`lucide`** | [![npm](https://img.shields.io/npm/v/lucide)](https://www.npmjs.com/package/lucide) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide) | [Docs](https://lucide.dev/guide/packages/lucide) · [Source](./packages/lucide) |
-| <img src="https://lucide.dev/framework-logos/react.svg" alt="React logo" width="48"> | **`lucide-react`** | [![npm](https://img.shields.io/npm/v/lucide-react)](https://www.npmjs.com/package/lucide-react) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-react) | [Docs](https://lucide.dev/guide/packages/lucide-react) · [Source](./packages/lucide-react) |
-| <img src="https://lucide.dev/framework-logos/vue.svg" alt="Vue logo" width="48"> | **`lucide-vue-next`** | [![npm](https://img.shields.io/npm/v/lucide-vue-next)](https://www.npmjs.com/package/lucide-vue-next) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-vue-next) | [Docs](https://lucide.dev/guide/packages/lucide-vue-next) · [Source](./packages/lucide-vue-next) |
-| <img src="https://lucide.dev/framework-logos/svelte.svg" alt="Svelte logo" width="48"> | **`lucide-svelte`** | [![npm](https://img.shields.io/npm/v/lucide-svelte)](https://www.npmjs.com/package/lucide-svelte) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-svelte) | [Docs](https://lucide.dev/guide/packages/lucide-svelte) · [Source](./packages/lucide-svelte) |
-| <img src="https://lucide.dev/framework-logos/solid.svg" alt="Solid logo" width="48"> | **`lucide-solid`** | [![npm](https://img.shields.io/npm/v/lucide-solid)](https://www.npmjs.com/package/lucide-solid) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-solid) | [Docs](https://lucide.dev/guide/packages/lucide-solid) · [Source](./packages/lucide-solid) |
-| <img src="https://lucide.dev/framework-logos/preact.svg" alt="Preact logo" width="48"> | **`lucide-preact`** | [![npm](https://img.shields.io/npm/v/lucide-preact)](https://www.npmjs.com/package/lucide-preact) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-preact) | [Docs](https://lucide.dev/guide/packages/lucide-preact) · [Source](./packages/lucide-preact) |
-| <img src="https://lucide.dev/framework-logos/react-native.svg" alt="React Native logo" width="48"> | **`lucide-react-native`** | [![npm](https://img.shields.io/npm/v/lucide-react-native)](https://www.npmjs.com/package/lucide-react-native) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-react-native) | [Docs](https://lucide.dev/guide/packages/lucide-react-native) · [Source](./packages/lucide-react-native) |
-| <img src="https://lucide.dev/framework-logos/angular.svg" alt="Angular logo" width="48"> | **`lucide-angular`** | [![npm](https://img.shields.io/npm/v/lucide-angular)](https://www.npmjs.com/package/lucide-angular) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-angular) | [Docs](https://lucide.dev/guide/packages/lucide-angular) · [Source](./packages/lucide-angular) |
-| <img src="https://lucide.dev/framework-logos/astro.svg" alt="Astro logo" width="48"> | **`@lucide/astro`** | [![npm](https://img.shields.io/npm/v/@lucide/astro)](https://www.npmjs.com/package/@lucide/astro) | ![NPM Downloads](https://img.shields.io/npm/dw/@lucide/astro) | [Docs](https://lucide.dev/guide/packages/lucide-astro) · [Source](./packages/astro) |
-| <img src="https://lucide.dev/framework-logos/svg.svg" alt="SVG logo" width="48"> | **`lucide-static`** | [![npm](https://img.shields.io/npm/v/lucide-static)](https://www.npmjs.com/package/lucide-static) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-static) | [Docs](https://lucide.dev/guide/packages/lucide-static) · [Source](./packages/lucide-static) |
+| <img src="https://lucide.dev/framework-logos/js.svg" alt="JS logo" width="48"> | **`lucide`** | [![npm](https://img.shields.io/npm/v/lucide)](https://www.npmjs.com/package/lucide) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide) | [Docs](https://lucide.dev/guide/lucide) · [Source](./packages/lucide) |
+| <img src="https://lucide.dev/framework-logos/react.svg" alt="React logo" width="48"> | **`lucide-react`** | [![npm](https://img.shields.io/npm/v/lucide-react)](https://www.npmjs.com/package/lucide-react) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-react) | [Docs](https://lucide.dev/guide/react) · [Source](./packages/lucide-react) |
+| <img src="https://lucide.dev/framework-logos/vue.svg" alt="Vue logo" width="48"> | **`@lucide/vue`** | [![npm](https://img.shields.io/npm/v/@lucide/vue)](https://www.npmjs.com/package/@lucide/vue) | ![NPM Downloads](https://img.shields.io/npm/dw/@lucide/vue) | [Docs](https://lucide.dev/guide/vue) · [Source](./packages/vue) |
+| <img src="https://lucide.dev/framework-logos/svelte.svg" alt="Svelte logo" width="48"> | **`@lucide/svelte`** | [![npm](https://img.shields.io/npm/v/@lucide/svelte)](https://www.npmjs.com/package/@lucide/svelte) | ![NPM Downloads](https://img.shields.io/npm/dw/@lucide/svelte) | [Docs](https://lucide.dev/guide/svelte) · [Source](./packages/svelte) |
+| <img src="https://lucide.dev/framework-logos/solid.svg" alt="Solid logo" width="48"> | **`lucide-solid`** | [![npm](https://img.shields.io/npm/v/lucide-solid)](https://www.npmjs.com/package/lucide-solid) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-solid) | [Docs](https://lucide.dev/guide/solid) · [Source](./packages/lucide-solid) |
+| <img src="https://lucide.dev/framework-logos/preact.svg" alt="Preact logo" width="48"> | **`lucide-preact`** | [![npm](https://img.shields.io/npm/v/lucide-preact)](https://www.npmjs.com/package/lucide-preact) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-preact) | [Docs](https://lucide.dev/guide/preact) · [Source](./packages/lucide-preact) |
+| <img src="https://lucide.dev/framework-logos/react-native.svg" alt="React Native logo" width="48"> | **`lucide-react-native`** | [![npm](https://img.shields.io/npm/v/lucide-react-native)](https://www.npmjs.com/package/lucide-react-native) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-react-native) | [Docs](https://lucide.dev/guide/react-native) · [Source](./packages/lucide-react-native) |
+| <img src="https://lucide.dev/framework-logos/angular.svg" alt="Angular logo" width="48"> | **`@lucide/angular`** | [![npm](https://img.shields.io/npm/v/@lucide/angular)](https://www.npmjs.com/package/@lucide/angular) | ![NPM Downloads](https://img.shields.io/npm/dw/@lucide/angular) | [Docs](https://lucide.dev/guide/angular) · [Source](./packages/angular) |
+| <img src="https://lucide.dev/framework-logos/astro.svg" alt="Astro logo" width="48"> | **`@lucide/astro`** | [![npm](https://img.shields.io/npm/v/@lucide/astro)](https://www.npmjs.com/package/@lucide/astro) | ![NPM Downloads](https://img.shields.io/npm/dw/@lucide/astro) | [Docs](https://lucide.dev/guide/astro) · [Source](./packages/astro) |
+| <img src="https://lucide.dev/framework-logos/svg.svg" alt="SVG logo" width="48"> | **`lucide-static`** | [![npm](https://img.shields.io/npm/v/lucide-static)](https://www.npmjs.com/package/lucide-static) | ![NPM Downloads](https://img.shields.io/npm/dw/lucide-static) | [Docs](https://lucide.dev/guide/static) · [Source](./packages/lucide-static) |
 
 ### Figma
 
@@ -92,7 +92,7 @@ Thank you to all the people who contributed to Lucide!
 
 ### Hero backers 🦸
 
-<a href="https://https://zephyr-cloud.io/"><img src="docs/public/sponsors/zephyr-cloud.svg" width="180" alt="Zephyr Cloud – From idea to prod: fast micro-frontend delivery!" /></a>
+<a href="https://zephyr-cloud.io/"><img src="docs/public/sponsors/zephyr-cloud.svg" width="180" alt="Zephyr Cloud – From idea to prod: fast micro-frontend delivery!" /></a>
 
 ### Awesome backers 🍺
 

brand-stopwords.json

@@ -54,10 +54,8 @@
   "jira": "Jira",
   "kotlin": "Kotlin",
   "kubernetes": "Kubernetes",
-  "less": "Less",
   "leetcode": "LeetCode",
   "leet-code": "LeetCode",
-  "line": "LINE",
   "linkedin": "LinkedIn",
   "lua": "Lua",
   "mariadb": "MariaDB",
@@ -70,7 +68,7 @@
   "nestjs": "NestJS",
   "netflix": "Netflix",
   "netlify": "Netlify",
-  "next": "Next.js",
+  "nextjs": "Next.js",
   "nodejs": "Node.js",
   "notion": "Notion",
   "nostr": "Nostr",
@@ -106,7 +104,8 @@
   "shopify": "Shopify",
   "skype": "Skype",
   "slack": "Slack",
-  "solid": "SolidJS",
+  "snapchat": "Snapchat",
+  "solidjs": "SolidJS",
   "soundcloud": "SoundCloud",
   "spotify": "Spotify",
   "sqlite": "SQLite",
@@ -145,6 +144,5 @@
   "xbox": "Xbox",
   "yarn": "Yarn",
   "youtube": "YouTube",
-  "zig": "Zig",
-  "zoom": "Zoom"
+  "zig": "Zig"
 }

categories/emoji.json

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

categories/navigation.json

@@ -1,5 +1,5 @@
 {
   "$schema": "../category.schema.json",
-  "title": "Navigation, Maps, and POIs",
+  "title": "Navigation & Places",
   "icon": "compass"
 }

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

@@ -11,7 +11,7 @@ export default eventHandler(async (event) => {
   const name = params.data.split('/').at(-3);
   const iconSizeString = params.data.split('/').at(-2);
   const svgData = params.data.split('/').at(-1);
-  const iconSize = parseInt(iconSizeString, 10);
+  const iconSize = Math.min(parseInt(iconSizeString, 10) || imageSize, 256);
   const data = svgData.slice(0, -4);
 
   const prevSvg = iconNodes[name]

docs/.vitepress/api/lab/icon-details/index.get.ts

@@ -0,0 +1,25 @@
+import { eventHandler, setResponseHeader } from 'h3';
+import iconMetaData from '../../../data/lab/iconMetaData';
+import iconPopularity from '../../../data/lab/iconPopularity';
+import iconNodes from '../../../data/lab/iconNodes';
+
+export default eventHandler((event) => {
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+
+  return Object.fromEntries(
+    Object.entries(iconMetaData).map(([iconName, iconData]) => {
+      // Remove $schema from the response
+      delete iconData['$schema'];
+
+      return [
+        iconName,
+        {
+          name: iconName,
+          iconNode: iconNodes[iconName],
+          popularity: iconPopularity[iconName]?.count ?? 0,
+          ...iconData,
+        },
+      ];
+    }),
+  );
+});

docs/.vitepress/api/lab/icon-metadata/index.get.ts

@@ -0,0 +1,14 @@
+import { eventHandler, setResponseHeader } from 'h3';
+import iconMetaData from '../../../data/lab/iconMetaData';
+
+export default eventHandler((event) => {
+  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+
+  for (const iconDetail in iconMetaData) {
+    // Remove $schema from the response
+    delete iconMetaData[iconDetail]['$schema'];
+  }
+
+  return iconMetaData;
+});

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

@@ -0,0 +1,30 @@
+import { eventHandler, getQuery, setResponseHeader } from 'h3';
+import iconNodes from '../../../data/lab/iconNodes';
+type IconNodeWithKeys = [elementName: string, attrs: Record<string, string> & { key?: string }][];
+
+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/config.ts

@@ -1,14 +1,14 @@
 import { fileURLToPath, URL } from 'node:url';
-import { defineConfig } from 'vitepress';
+import { defineConfig, UserConfig } from 'vitepress';
 import { groupIconMdPlugin, groupIconVitePlugin } from 'vitepress-plugin-group-icons';
 import sidebar from './sidebar';
 import snackPlayer from './markdown/snackPlayer';
 import sandpackPlugin from './markdown/sandpack';
 import { readFile } from 'node:fs/promises';
 import { resourcesSidebar } from './sidebar/resources';
-import getStructuredData from './getStructuredData';
-import { createGeneralOGImage, createIconOGImage } from './createOGImage';
 import llmstxt from 'vitepress-plugin-llms';
+import { transformPageData } from './transformPageData';
+import getHeadConfig from './getHeadConfig';
 
 const defaultSandpackCSS = await readFile(
   fileURLToPath(new URL('./theme/sandpack-default.css', import.meta.url)),
@@ -56,6 +56,12 @@ export default defineConfig({
             new URL('./theme/components/overrides/VPFooter.vue', import.meta.url),
           ),
         },
+        {
+          find: /^.*\/VPCarbonAds\.vue$/,
+          replacement: fileURLToPath(
+            new URL('./theme/components/overrides/VPCarbonAds.vue', import.meta.url),
+          ),
+        },
         {
           find: '~/.vitepress',
           replacement: fileURLToPath(new URL('./', import.meta.url)),
@@ -73,199 +79,11 @@ export default defineConfig({
           'brand-logo-statement.md',
           'icons/**', // Not working, need investigation
         ],
-      }),
+      }) as unknown as UserConfig['vite']['plugins'][0],
     ],
   },
-  head: [
-    [
-      'link',
-      {
-        rel: 'preconnect',
-        href: 'https://analytics.lucide.dev',
-      },
-    ],
-    [
-      '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',
-      },
-    ],
-  ],
-  async transformPageData(pageData) {
-    pageData.frontmatter.head ??= [];
-    if (
-      pageData.relativePath.startsWith('icons/') &&
-      !pageData.relativePath.startsWith('icons/lab/') &&
-      pageData.params?.name
-    ) {
-      const iconName = pageData.params.name;
-      pageData.title = `${iconName} icon details`;
-
-      const taggedAs = pageData.params?.tags?.length
-        ? `Tagged as: ${pageData.params.tags.join(', ')}.`
-        : '';
-      const categorizedIn = pageData.params?.category?.length
-        ? `Categorized in: ${pageData.params.category.join(', ')}.`
-        : '';
-
-      pageData.description =
-        `Details and related icons for ${iconName} icon. ${taggedAs} ${categorizedIn}`.trim();
-
-      const structuredData = await getStructuredData(iconName, pageData);
-
-      const ogPath = await createIconOGImage(iconName, pageData.params?.tags || []);
-
-      if (ogPath) {
-        const content = `https://lucide.dev${ogPath}`;
-        pageData.frontmatter.head.push(
-          [
-            'meta',
-            {
-              property: 'og:image',
-              content,
-            },
-          ],
-          [
-            'meta',
-            {
-              property: 'twitter:image',
-              content,
-            },
-          ],
-        );
-      }
-
-      pageData.frontmatter.head.push([
-        'script',
-        { type: 'application/ld+json' },
-        JSON.stringify(structuredData),
-      ]);
-    }
-
-    if (pageData.relativePath.startsWith('guide/')) {
-      const ogPath = await createGeneralOGImage(pageData);
-
-      if (ogPath) {
-        const content = `https://lucide.dev${ogPath}`;
-        pageData.frontmatter.head.push(
-          [
-            'meta',
-            {
-              property: 'og:image',
-              content,
-            },
-          ],
-          [
-            'meta',
-            {
-              property: 'twitter:image',
-              content,
-            },
-          ],
-        );
-      }
-    }
-  },
+  head: getHeadConfig({ title, description, socialTitle }),
+  transformPageData,
   themeConfig: {
     logo: {
       light: '/logo.light.svg',
@@ -283,6 +101,7 @@ export default defineConfig({
       },
       { text: 'Packages', link: '/packages' },
       { text: 'Showcase', link: '/showcase' },
+      { text: 'Merch', link: 'https://merch.lucide.dev/' },
     ],
     sidebar,
     socialLinks: [
@@ -291,7 +110,7 @@ export default defineConfig({
     ],
     footer: {
       message: 'Released under the ISC License.',
-      copyright: `Copyright © ${new Date().getFullYear()} Lucide Contributors`,
+      copyright: `Copyright © ${new Date().getFullYear()} Lucide Icons`,
     },
     editLink: {
       pattern: 'https://github.com/lucide-icons/lucide/edit/main/docs/:path',

docs/.vitepress/data/categoriesData.json

@@ -97,7 +97,7 @@
   },
   {
     "name": "navigation",
-    "title": "Navigation, Maps, and POIs"
+    "title": "Navigation & Places"
   },
   {
     "name": "notifications",

docs/.vitepress/data/companiesData.json

@@ -46,21 +46,5 @@
       "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/packageData.json

@@ -50,20 +50,21 @@
       }
     ]
   },
-  "lucide-svelte": {
+  "@lucide/svelte": {
     "order": 3,
     "icon": "svelte",
     "docsAlias": "svelte",
+    "packageDirname": "svelte",
     "shields": [
       {
         "alt": "npm",
-        "src": "https://img.shields.io/npm/v/lucide-svelte",
-        "href": "https://www.npmjs.com/package/lucide-svelte"
+        "src": "https://img.shields.io/npm/v/@lucide/svelte",
+        "href": "https://www.npmjs.com/package/@lucide/svelte"
       },
       {
         "alt": "npm",
-        "src": "https://img.shields.io/npm/dw/lucide-svelte",
-        "href": "https://www.npmjs.com/package/lucide-svelte"
+        "src": "https://img.shields.io/npm/dw/@lucide/svelte",
+        "href": "https://www.npmjs.com/package/@lucide/svelte"
       }
     ]
   },
@@ -119,24 +120,6 @@
       }
     ]
   },
-  "lucide-angular": {
-    "order": 7,
-    "icon": "angular-old",
-    "description": "Our legacy Angular package with a module based API.",
-    "documentation": "https://v0.lucide.dev/guide/packages/lucide-angular",
-    "shields": [
-      {
-        "alt": "npm",
-        "src": "https://img.shields.io/npm/v/lucide-angular",
-        "href": "https://www.npmjs.com/package/lucide-angular"
-      },
-      {
-        "alt": "npm",
-        "src": "https://img.shields.io/npm/dw/lucide-angular",
-        "href": "https://www.npmjs.com/package/lucide-angular"
-      }
-    ]
-  },
   "lucide-preact": {
     "order": 8,
     "icon": "preact",
@@ -209,4 +192,4 @@
       }
     ]
   }
-}
+}

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

@@ -209,5 +209,24 @@
     ],
     "source": "https://github.com/shx08/strapi-lucide-icons",
     "documentation": "https://github.com/shx08/strapi-lucide-icons/blob/main/README.md"
+  },
+  {
+    "name": "lucide-lit",
+    "description": "Implementation of Lucide icons as Lit web components.",
+    "icon": "/framework-logos/lit.svg",
+    "shields": [
+      {
+        "alt": "Latest Stable Version",
+        "src": "https://img.shields.io/npm/v/@gyeonghokim/lucide-lit",
+        "href": "https://www.npmjs.com/package/@gyeonghokim/lucide-lit"
+      },
+      {
+        "alt": "Total Downloads",
+        "src": "https://img.shields.io/npm/dw/@gyeonghokim/lucide-lit",
+        "href": "https://www.npmjs.com/package/@gyeonghokim/lucide-lit"
+      }
+    ],
+    "source": "https://github.com/GyeongHoKim/lucide-lit",
+    "documentation": "https://github.com/GyeongHoKim/lucide-lit/blob/main/README.md"
   }
 ]

docs/.vitepress/getHeadConfig.ts

@@ -0,0 +1,127 @@
+import { HeadConfig } from 'vitepress';
+
+const getHeadConfig = ({
+  title,
+  description,
+  socialTitle,
+}: {
+  title: string;
+  description: string;
+  socialTitle?: string;
+}): HeadConfig[] => [
+  [
+    'link',
+    {
+      rel: 'preconnect',
+      href: 'https://analytics.lucide.dev',
+    },
+  ],
+  [
+    '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',
+    },
+  ],
+];
+
+export default getHeadConfig;

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 
 interface BackdropProps {
   src: string;

docs/.vitepress/lib/SvgPreview/GapViolationHighlight.tsx

@@ -3,7 +3,6 @@ import pathToPoints from './path-to-points';
 import { Path, PathProps } from './types';
 
 export const GapViolationHighlight = ({
-  radius,
   stroke,
   strokeWidth,
   strokeOpacity,

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { PathProps, Path } from './types';
 import getPaths, { assert } from './utils';
 import { GapViolationHighlight } from './GapViolationHighlight.tsx';
@@ -293,7 +293,7 @@ const Radii = ({
   ...props
 }: { paths: Path[] } & PathProps<
   'strokeWidth' | 'stroke' | 'strokeDasharray' | 'strokeOpacity',
-  any
+  never
 >) => {
   return (
     <g
@@ -361,12 +361,12 @@ const Radii = ({
 const Handles = ({
   paths,
   ...props
-}: { paths: Path[] } & PathProps<'strokeWidth' | 'stroke' | 'strokeOpacity', any>) => (
+}: { paths: Path[] } & PathProps<'strokeWidth' | 'stroke' | 'strokeOpacity', never>) => (
   <g
     className="svg-preview-handles-group"
     {...props}
   >
-    {paths.map(({ c, prev, next, cp1, cp2 }, i) => (
+    {paths.map(({ prev, next, cp1, cp2 }, i) => (
       <React.Fragment key={i}>
         {cp1 && <path d={`M${prev.x} ${prev.y} ${cp1.x} ${cp1.y}`} />}
         {cp1 && (
@@ -459,7 +459,20 @@ const SvgPreview = (
       />
       <ColoredPath
         paths={paths}
-        colors={['#dfdfd6']}
+        colors={[
+          '#1982c4',
+          '#4267AC',
+          '#6a4c93',
+          '#B55379',
+          '#FF595E',
+          '#FF7655',
+          '#ff924c',
+          '#FFAE43',
+          '#ffca3a',
+          '#C5CA30',
+          '#8ac926',
+          '#52A675',
+        ]}
       />
       <Radii
         paths={paths}

docs/.vitepress/lib/SvgPreview/path-to-points.ts

@@ -12,7 +12,9 @@ function pathToPoints({ d, prev, next }: Path, interval = 1) {
       points.push(commander.getPointAtLength(i));
     }
     points.push(next);
-  } catch (err) {}
+  } catch (err) {
+    console.warn(`Failed to convert path to points for d="${d}": ${err}`);
+  }
   return points;
 }
 

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

@@ -55,7 +55,7 @@ export const getCommands = (src: string) =>
     .flatMap(({ d, name }, idx) =>
       new SVGPathData(d)
         .toAbs()
-        // @ts-ignore
+        // @ts-expect-error `commands` is typed as a union of command types svgson does not narrow
         .commands.map((c, cIdx) => ({ ...c, id: idx, idx: cIdx, name })),
     );
 
@@ -242,7 +242,7 @@ const getPaths = (src: string) => {
         break;
       }
       default: {
-        // @ts-ignore
+        // @ts-expect-error every command type is handled above, so `c` is not `never` here
         assertNever(c);
       }
     }

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

@@ -13,11 +13,11 @@ const getIconCodes = (): CodeExampleType => {
       title: 'Vanilla',
       code: `\
 <script>
-import { createIcons, $CamelCase } from 'lucide';
+import { createIcons, $PascalCase } from 'lucide';
 
 createIcons({
   icons: {
-    $CamelCase
+    $PascalCase
   }
 });
 </script>

docs/.vitepress/lib/helpers.ts

@@ -9,11 +9,9 @@ export const hash = (string: string, seed = 5381) => {
   let i = string.length;
 
   while (i) {
-    // eslint-disable-next-line no-bitwise, no-plusplus
     seed = (seed * 33) ^ string.charCodeAt(--i);
   }
 
-  // eslint-disable-next-line no-bitwise
   return (seed >>> 0).toString(36).substr(0, 6);
 };
 

docs/.vitepress/markdown/sandpack.ts

@@ -1,5 +1,6 @@
 import type MarkdownIt from 'markdown-it';
 import type { RenderRule } from 'markdown-it/lib/renderer.mjs';
+import type Token from 'markdown-it/lib/token.mjs';
 import container from 'markdown-it-container';
 import sandpackTheme from '../theme/sandpackTheme.json';
 
@@ -21,14 +22,10 @@ export default function sandpackPlugin(md: MarkdownIt, pluginOptions: SnackParam
     throw new Error('MarkdownIt instance is required for sandpackPlugin');
   }
   const escapeHtml = md?.utils?.escapeHtml;
-  const defaultFence =
-    md.renderer.rules.fence ||
-    ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options));
 
-  const renderSandbox = (tokenList: any[], index: number) => {
-    const renderFunc = (tokens: any[], idx: number) => {
+  const renderSandbox = (tokenList: Token[], index: number) => {
+    const renderFunc = (tokens: Token[], idx: number) => {
       if (tokens[idx].nesting === 1) {
-        const fileAttr: string[] = [];
         const attrs = Object.fromEntries(tokens[idx].attrs || []);
 
         const files: Record<
@@ -47,7 +44,7 @@ export default function sandpackPlugin(md: MarkdownIt, pluginOptions: SnackParam
         ) {
           if (tokens[i].type === 'fence' && tokens[i].tag === 'code') {
             const info = tokens[i].info ?? '';
-            const [lang, fileName, params = ''] = info.split(' ');
+            const [, fileName, params = ''] = info.split(' ');
 
             const active = params.includes('[active]');
             const hidden = params.includes('[hidden]');
@@ -57,15 +54,9 @@ export default function sandpackPlugin(md: MarkdownIt, pluginOptions: SnackParam
             if (fileName && code) {
               files[fileName] = {
                 code,
+                ...(active && { active: true }),
+                ...(hidden && { hidden: true }),
               };
-
-              if (active) {
-                (files[fileName] as any).active = true;
-              }
-
-              if (hidden) {
-                (files[fileName] as any).hidden = true;
-              }
             }
           }
         }
@@ -122,7 +113,7 @@ export default function sandpackPlugin(md: MarkdownIt, pluginOptions: SnackParam
     return renderFunc(tokenList, index);
   };
 
-  function createCodeGroup(md: MarkdownIt): ContainerArgs {
+  function createCodeGroup(): ContainerArgs {
     return [
       container,
       'sandpack',
@@ -134,5 +125,5 @@ export default function sandpackPlugin(md: MarkdownIt, pluginOptions: SnackParam
     ];
   }
 
-  md.use(...createCodeGroup(md));
+  md.use(...createCodeGroup());
 }

docs/.vitepress/markdown/snackPlayer.ts

@@ -73,7 +73,6 @@ export default function snackPlayerPlugin(md: MarkdownIt) {
       'react-native-safe-area-context' + (params.dependencies ? `,${params.dependencies}` : '');
     const platform = params.platform ?? 'web';
     const supportedPlatforms = params.supportedPlatforms ?? 'ios,android,web';
-    const theme = params.theme ?? 'light';
     const preview = params.preview ?? 'true';
     const loading = params.loading ?? 'lazy';
     const deviceAppearance = params.deviceAppearance ?? 'dark';
@@ -88,7 +87,7 @@ export default function snackPlayerPlugin(md: MarkdownIt) {
       ` data-snack-dependencies="${escapeHtml(dependencies)}"` +
       ` data-snack-platform="${escapeHtml(platform)}"` +
       ` data-snack-supported-platforms="${escapeHtml(supportedPlatforms)}"` +
-      // ` data-snack-theme="${escapeHtml(theme)}"` +
+      // ` data-snack-theme="${escapeHtml(params.theme ?? 'light')}"` +
       ` data-snack-preview="${escapeHtml(preview)}"` +
       ` data-snack-loading="${escapeHtml(loading)}"` +
       ` data-snack-device-appearance="${escapeHtml(deviceAppearance)}"` +

docs/.vitepress/sidebar/react-native.ts

@@ -72,6 +72,11 @@ export const reactNativeSidebar = [
         link: '/guide/react-native/advanced/combining-icons',
         desc: 'Combine multiple icons into one',
       },
+      {
+        text: 'Optimizations',
+        link: '/guide/react-native/advanced/optimizations',
+        desc: 'Optimizing your app for performance',
+      },
     ],
   },
   {

docs/.vitepress/theme/components/SurveyAskOverlay.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { useLocalStorage } from '@vueuse/core';
+import IconButton from './base/IconButton.vue';
+import { x } from '../../data/iconNodes';
+import Icon from '@lucide/vue/src/Icon';
+import { computed, onMounted, ref } from 'vue';
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
+
+const showAskSurvey = useLocalStorage('show-ask-overlay', true, {
+  initOnMounted: true,
+});
+
+const delayedShow = ref(false)
+
+const showPopup = computed(() => showAskSurvey.value && delayedShow.value );
+let isInitialized = false
+
+function startTally() {
+  window.Tally.openPopup('EkvOpB', {
+    layout: 'modal',
+    width: 700,
+    autoClose: 5000,
+    onClose() {
+      showAskSurvey.value = false;
+    },
+    onSubmit() {
+      showAskSurvey.value = false;
+    },
+  });
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    delayedShow.value = true
+  }, 10000)
+})
+
+function initTally() {
+  try {
+    if (!isInitialized) {
+      isInitialized = true
+      const s = document.createElement('script')
+      s.src = `//tally.so/widgets/embed.js`
+      s.async = true
+      s.onload = startTally
+      document.body.appendChild(s)
+    } else {
+      startTally();
+    }
+  } catch (error) {
+    window.open('https://tally.so/r/EkvOpB', '_blank');
+  }
+}
+
+function hidePopup() {
+  showAskSurvey.value = false;
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      :class="{
+        'show-popup': showPopup,
+      }"
+      class="ask-overlay"
+    >
+      <IconButton
+        @click="hidePopup"
+        class="hide-button"
+      >
+        <Icon
+          :iconNode="x"
+          :size="20"
+          absoluteStrokeWidth
+        />
+      </IconButton>
+
+      <h2 class="title">
+        We value your feedback!
+      </h2>
+
+      <p class="description">
+        Can you spare a moment to take our survey? <br>Your feedback helps us improve Lucide and make it better for everyone.
+      </p>
+
+      <div class="buttons">
+        <VPButton
+          text="Take the Survey"
+          theme="brand"
+          @click="initTally"
+        />
+
+        <VPButton
+          text="Close"
+          theme="alt"
+          @click="hidePopup"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.ask-overlay {
+  position: fixed;
+  z-index: 99;;
+  bottom: 24px;
+  width: calc(100% - 48px);
+  max-width: 420px;
+  left: 24px;
+  transition:
+    opacity 0.25s,
+    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: var(--vp-shadow-4);
+  background-color: var(--vp-carbon-ads-bg-color);
+  opacity: 0;
+  transform: translateY(200px);
+}
+
+.ask-overlay .title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.ask-overlay .description {
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.ask-overlay.show-popup {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+  transition:
+    opacity 0.5s,
+    transform 0.25s ease;
+}
+
+.ask-overlay .buttons {
+  margin-top: 16px;
+  display: flex;
+  gap: 16px;
+}
+
+.hide-button {
+  padding: 4px;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 3;
+  background-color: transparent;
+}
+</style>

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

@@ -11,6 +11,14 @@ const { isDark } = useData();
 
 const emit = defineEmits(['update:modelValue']);
 
+function limitHexInput(val: string) {
+  if (val.startsWith('#')) {
+    return val.slice(0, 9);
+  }
+
+  return val.slice(0, 8);
+}
+
 const value = computed({
   get: () => {
     if (props.modelValue == null || props.modelValue === 'currentColor') {
@@ -19,7 +27,7 @@ const value = computed({
 
     return props.modelValue;
   },
-  set: (val) => emit('update:modelValue', val),
+  set: (val) => emit('update:modelValue', limitHexInput(val)),
 });
 </script>
 
@@ -41,6 +49,7 @@ const value = computed({
       class="color-input-text"
       aria-label="Color picker input"
       v-model="value"
+      maxlength="9"
       placeholder="[default]"
     />
   </div>
@@ -91,6 +100,7 @@ const value = computed({
   background: transparent;
   color: var(--vp-c-text-1);
   font-size: 13px;
+  font-family: var(--vp-font-family-mono);
   text-align: left;
   border-radius: 8px;
   cursor: text;

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

@@ -6,10 +6,10 @@ import SelectIcon from './SelectIcon.vue';
 
 defineProps<{
   id?: string;
-  items?: { name: string; route: string; icon: string; iconDark?: string }[];
+  items?: { name: string; value: string; icon?: string; iconDark?: string }[];
 }>();
 
-const selected = defineModel<{ name: string; icon: string; iconDark?: string }>();
+const selected = defineModel<{ name: string; value: string; icon?: string; iconDark?: string }>();
 </script>
 
 <template>
@@ -19,14 +19,18 @@ const selected = defineModel<{ name: string; icon: string; iconDark?: string }>(
         class="select-button"
         :id="id"
       >
-        <SelectIcon :item="selected" />
+        <slot name="start-icon">
+          <SelectIcon  v-if="selected.icon" :item="selected" />
+        </slot>
         <span class="select-text">{{ selected.name }}</span>
         <span class="select-icon">
-          <Icon
-            :iconNode="chevronsUpDown"
-            class="chevron-icon"
-            aria-hidden="true"
-          />
+          <slot name="end-icon">
+            <Icon
+              :iconNode="chevronsUpDown"
+              class="chevron-icon"
+              aria-hidden="true"
+            />
+          </slot>
         </span>
       </ListboxButton>
 
@@ -43,8 +47,9 @@ const selected = defineModel<{ name: string; icon: string; iconDark?: string }>(
             :value="item"
             as="template"
           >
+
             <li :class="['select-option', { active, selected }]">
-              <SelectIcon :item="item" />
+              <SelectIcon v-if="item.icon" :item="item" />
               <span :class="['option-text', { selected }]">{{ item.name }}</span>
               <span
                 v-if="selected"

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

@@ -2,25 +2,28 @@
 const { item } = defineProps<{
   item: {
     name: string;
-    icon: string;
+    icon?: string;
     iconDark?: string;
   };
 }>();
 </script>
 
 <template>
-  <img
-    :src="item.icon"
-    :class="{ 'select-item-icon': true, light: item.iconDark }"
-    :alt="`${item.name} logo`"
-    loading="lazy"
-  />
-  <img
-    v-if="item.iconDark"
-    :src="item.iconDark"
-    :alt="`${item.name} logo`"
-    class="select-item-icon dark"
-  />
+  <div v-if="item.icon || item.iconDark">
+    <img
+      v-if="item.icon"
+      :src="item.icon"
+      :class="{ 'select-item-icon': true, light: item.iconDark }"
+      :alt="`${item.name} logo`"
+      loading="lazy"
+    />
+    <img
+      v-if="item.iconDark"
+      :src="item.iconDark"
+      :alt="`${item.name} logo`"
+      class="select-item-icon dark"
+    />
+  </div>
 </template>
 
 <style scoped>

docs/.vitepress/theme/components/guide/FrameworkSelect.vue

@@ -11,49 +11,49 @@ const { page } = useData();
 const router = useRouter();
 
 const frameworks = [
-  { name: 'Vanilla', icon: '/framework-logos/js.svg', route: '/guide/lucide/' },
-  { name: 'React', icon: '/framework-logos/react.svg', route: '/guide/react/' },
-  { name: 'Vue', icon: '/framework-logos/vue.svg', route: '/guide/vue/' },
-  { name: 'Svelte', icon: '/framework-logos/svelte.svg', route: '/guide/svelte/' },
-  { name: 'Solid', icon: '/framework-logos/solid.svg', route: '/guide/solid/' },
-  { name: 'Angular', icon: '/framework-logos/angular.svg', route: '/guide/angular/' },
-  { name: 'Preact', icon: '/framework-logos/preact.svg', route: '/guide/preact/' },
+  { name: 'Vanilla', icon: '/framework-logos/js.svg', value: '/guide/lucide/' },
+  { name: 'React', icon: '/framework-logos/react.svg', value: '/guide/react/' },
+  { name: 'Vue', icon: '/framework-logos/vue.svg', value: '/guide/vue/' },
+  { name: 'Svelte', icon: '/framework-logos/svelte.svg', value: '/guide/svelte/' },
+  { name: 'Solid', icon: '/framework-logos/solid.svg', value: '/guide/solid/' },
+  { name: 'Angular', icon: '/framework-logos/angular.svg', value: '/guide/angular/' },
+  { name: 'Preact', icon: '/framework-logos/preact.svg', value: '/guide/preact/' },
   {
     name: 'React Native',
     icon: '/framework-logos/react-native.svg',
-    route: '/guide/react-native/',
+    value: '/guide/react-native/',
   },
   {
     name: 'Astro',
     icon: '/framework-logos/astro.svg',
     iconDark: '/framework-logos/astro-dark.svg',
-    route: '/guide/astro/',
+    value: '/guide/astro/',
   },
-  { name: 'Static', icon: '/framework-logos/svg.svg', route: '/guide/static/' },
+  { name: 'Static', icon: '/framework-logos/svg.svg', value: '/guide/static/' },
 ];
 
 const fallbackFramework = useLocalStorage('lucide-docs-fallback-framework', frameworks[1]);
 
 const selected = computed(() => {
-  const current = frameworks.find(({ route }) => {
+  const current = frameworks.find(({ value }) => {
     if (router.route.path?.startsWith?.('/guide')) {
       const [, , framework] = router.route.path.split('/');
-      const [, frameWorkRoute] = route.split('/').filter(Boolean);
+      const [, frameWorkRoute] = value.split('/').filter(Boolean);
 
       return framework === frameWorkRoute;
     }
-    return router.route.path.split('/').slice(0, 3).join('/') === route;
+    return router.route.path.split('/').slice(0, 3).join('/') === value;
   });
 
-  return current || fallbackFramework.value;
+  return current || (fallbackFramework.value?.value ? fallbackFramework.value : frameworks[0]);
 });
 
-function onSelectFramework(item: { name: string; icon: string; iconDark?: string; route: string }) {
+function onSelectFramework(item: { name: string; icon: string; iconDark?: string; value: string }) {
   fallbackFramework.value = item;
-  if (item.route !== router.route.path) {
-    const likeRoute = router.route.path.replace(selected.value.route, item.route);
+  if (item.value !== router.route.path) {
+    const likeRoute = router.route.path.replace(selected.value.value, item.value);
 
-    const hasRoute = sidebar[item.route]?.some((section) =>
+    const hasRoute = sidebar[item.value]?.some((section) =>
       section?.items?.some(({ link }) => link === likeRoute),
     );
 
@@ -62,7 +62,7 @@ function onSelectFramework(item: { name: string; icon: string; iconDark?: string
       return;
     }
 
-    router.go(item.route);
+    router.go(item.value);
   }
 }
 </script>
@@ -85,12 +85,12 @@ function onSelectFramework(item: { name: string; icon: string; iconDark?: string
     />
   </div>
   <VPSidebarGroup
-    :key="selected.route"
+    :key="selected.value"
     v-if="
       page?.relativePath?.startsWith?.('guide') &&
-      !page?.relativePath?.startsWith?.(selected.route.substring(1))
+      !page?.relativePath?.startsWith?.(selected.value.substring(1))
     "
-    :items="sidebar[selected.route]"
+    :items="sidebar[selected.value]"
   />
 </template>
 
@@ -118,5 +118,15 @@ label {
   font-weight: bold;
   margin-bottom: 4px;
   display: block;
+  position: relative;
+}
+
+.framework-select:before {
+  content: ' ';
+  position: absolute;
+  inset: 0 -16px -24px;
+  background: color-mix(in srgb, var(--vp-c-bg-alt), transparent 50%);
+  backdrop-filter: blur(4px);
+  mask-image: linear-gradient(to bottom, black calc(100% - 16px), transparent 100%);
 }
 </style>

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

@@ -13,23 +13,21 @@ const { go } = useRouter()
     <HomeSectionTitle>Available For:</HomeSectionTitle>
     <div class="packages-list">
       <a
-        v-for="{ name, logo, logoDark } in data.packages"
-        :href="`/guide/packages/${name}`"
+        v-for="{ name, label, path, logo, logoDark } in data.packages"
+        :href="path"
         class="package-logo"
-        :aria-label="`Read more about: ${name} package`"
-        @click.prevent="go(`/guide/packages/${name}`)"
+        @click.prevent="go(path)"
       >
         <img
           :src="logo"
           :class="{ light: logoDark, 'image-logo': true }"
-          :alt="`${name} logo`"
+          :alt="label"
           loading="lazy"
         />
-
         <img
           v-if="logoDark"
           :src="logoDark"
-          :alt="`${name} logo`"
+          :alt="label"
           class="image-logo dark"
           loading="lazy"
         />

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

@@ -50,7 +50,7 @@ onMounted(() => {
         absoluteStrokeWidth
       />
     </IconButton>
-    <VPDocAsideCarbonAds :carbon-ads="theme.carbonAds" />
+    <VPDocAsideCarbonAds :carbon-ads="theme.carbonAds" overlay />
   </div>
 </template>
 

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

@@ -1,4 +1,3 @@
-import { getAllData } from '../../../lib/icons';
 import { getAllCategoryFiles, mapCategoryIconCount } from '../../../lib/categories';
 import iconsMetaData from '../../../data/iconMetaData';
 

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

@@ -7,10 +7,14 @@ import { useActiveAnchor } from '../../composables/useActiveAnchor'
 import { data } from './CategoryList.data'
 import CategoryListItem from './CategoryListItem.vue'
 import SidebarTitle from './SidebarTitle.vue'
-import { useCategoryView } from '../../composables/useCategoryView'
+import { useCategoryViewSync } from '../../composables/useCategoryView'
 
 const { page } = useData()
-const { categoryCounts } = useCategoryView();
+const { categoryCounts, selectedCategory } = useCategoryViewSync();
+
+function onCategoriesClick() {
+  selectedCategory.value = '';
+}
 
 const categoriesIsActive = computed(() => {
   return isActive(page.value.relativePath, '/icons/categories');
@@ -53,7 +57,7 @@ watch(headers, () => {
     <VPLink class="sidebar-link sidebar-text" href="/icons/" :class="{ 'active': overviewIsActive } ">
       All
     </VPLink>
-    <VPLink class="sidebar-link sidebar-text" href="/icons/categories" :class="{ 'active': categoriesIsActive } ">
+    <VPLink class="sidebar-link sidebar-text" href="/icons/categories" :class="{ 'active': categoriesIsActive }" @click="onCategoriesClick">
       Categories
     </VPLink>
     <div class="content">

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

@@ -28,7 +28,10 @@ function onClick(categoryName: string) {
   const heading = document.querySelector<HTMLAnchorElement>(categoryName);
   heading?.focus();
 
-  window.history.pushState({}, '', `/icons/categories#${categoryName}`)
+  const url = new URL(window.location.href);
+  url.pathname = '/icons/categories';
+  url.hash = categoryName;
+  window.history.pushState({}, '', url);
 }
 </script>
 
@@ -85,6 +88,7 @@ function onClick(categoryName: string) {
 
 .outline-link.inactive {
   color: var(--vp-c-text-4);
+  pointer-events: none;
 }
 
 .outline-link.nested {

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

@@ -188,7 +188,7 @@ const deprecatedTitle = computed(() => {
   -ms-overflow-style: none;
   scrollbar-width: none;
   scrollbar-width: thin; /* can also be normal, or none, to not render scrollbar */
-  scrollbar-color: currentColor transparent; /* foreground background */
+  scrollbar-color: var(--vp-c-text-4) transparent; /* foreground background */
 }
 .horizontal-scroller::-webkit-scrollbar {
   width: 0;

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

@@ -3,6 +3,7 @@ import type { IconEntity } from '../../types';
 import { computed, ref } from 'vue';
 import createLucideIcon from '@lucide/vue/src/createLucideIcon';
 import { useIconStyleContext } from '../../composables/useIconStyle';
+import { squarePen } from '../../../data/iconNodes';
 
 const props = defineProps<{
   name: IconEntity['name'];
@@ -19,6 +20,31 @@ const iconComponent = computed(() => {
   if (!props.name || !props.iconNode) return null;
   return createLucideIcon(props.name, props.iconNode);
 });
+
+const SquarePenIcon = createLucideIcon('SquarePen', squarePen);
+
+const innerSvg = computed(() => {
+  if (!props.iconNode) return '';
+
+  const string = props.iconNode
+    .map(([tag, attrs]) => {
+      const attributes = Object.entries(attrs)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ');
+      return `<${tag} ${attributes}/>`;
+    })
+    .join('');
+
+  return string
+    .replace(/>[\r\n ]+</g, '><')
+    .replace(/(<.*?>)|\s+/g, (m, $1) => $1 || ' ')
+    .trim();
+});
+
+const base64InnerSvg = computed(() => {
+  if (typeof window === 'undefined') return '';
+  return btoa(innerSvg.value);
+});
 </script>
 
 <template>
@@ -57,6 +83,16 @@ const iconComponent = computed(() => {
         />
       </g>
     </svg>
+    <a
+      :href="`https://studio.lucide.dev/edit?value=${encodeURIComponent(base64InnerSvg)}&name=${name}&utm_source=lucide.dev&utm_medium=icon-detail-preview`"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="studio-button"
+      title="Open in Lucide Studio"
+      aria-label="Open in Lucide Studio"
+    >
+      <SquarePenIcon :size="14" />
+    </a>
   </div>
 </template>
 
@@ -75,6 +111,8 @@ const iconComponent = computed(() => {
   position: relative;
   background: var(--vp-c-bg-alt);
   border-radius: 8px;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 .icon-container > :deep(svg:not(.icon-grid)) {
   width: 100%;
@@ -85,6 +123,34 @@ const iconComponent = computed(() => {
   opacity: 0.8;
 }
 
+.studio-button {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vp-c-text-2);
+  opacity: 0;
+  transition: opacity 0.2s, color 0.2s, background-color 0.2s;
+  z-index: 2;
+}
+
+.icon-container:hover .studio-button,
+.studio-button:focus-visible {
+  opacity: 1;
+}
+
+.studio-button:hover,
+.studio-button:focus-visible {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+}
+
 .icon-component.customizable {
   will-change: width, height, stroke-width, stroke;
   /* color: var(--customize-color, currentColor);

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, onMounted } from 'vue';
+import { ref, computed, watch, defineAsyncComponent, onMounted } from 'vue';
 import type { IconEntity, Category } from '../../types';
 import useSearch from '../../composables/useSearch';
 import InputSearch from '../base/InputSearch.vue';
@@ -12,6 +12,7 @@ import useFetchCategories from '../../composables/useFetchCategories';
 import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
 import chunkArray from '../../utils/chunkArray';
 import useScrollToCategory from '../../composables/useScrollToCategory';
+import { useCategoryView } from '../../composables/useCategoryView';
 import CarbonAdOverlay from './CarbonAdOverlay.vue';
 import useSearchPlaceholder from '../../utils/useSearchPlaceholder.ts';
 
@@ -26,8 +27,15 @@ const props = defineProps<{
 
 const activeIconName = ref(null);
 const { searchInput, searchQuery, searchQueryDebounced } = useSearchInput();
+const { selectedCategory } = useCategoryView();
 const isSearching = computed(() => !!searchQuery.value);
 
+watch(searchQueryDebounced, (searchString) => {
+  if (searchString !== '') {
+    selectedCategory.value = '';
+  }
+});
+
 const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => {
   searchInput.value?.focus();
 });
@@ -36,8 +44,12 @@ function setActiveIconName(name: string) {
   activeIconName.value = name;
 }
 
-const { execute: fetchTags, data: tags } = useFetchTags();
-const { execute: fetchCategories, data: categoriesMap } = useFetchCategories();
+const { execute: fetchTags, data: tags, isFetching: isFetchingTags } = useFetchTags();
+const {
+  execute: fetchCategories,
+  data: categoriesMap,
+  isFetching: isFetchingCategories,
+} = useFetchCategories();
 
 const overviewEl = ref<HTMLElement | null>(null);
 const { width: containerWidth } = useElementSize(overviewEl);
@@ -109,6 +121,9 @@ const categoriesList = computed(() => {
     }, []);
 });
 const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
+const isSearchMetadataLoading = computed(
+  () => searchQuery.value.length > 0 && (tags.value == null || categoriesMap.value == null),
+);
 
 const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(categoriesList, {
   itemHeight: ICON_SIZE + ICON_GRID_GAP,
@@ -127,22 +142,39 @@ onMounted(() => {
   useEventListener(window, 'scroll', containerProps.onScroll);
 });
 
-function onFocusSearchInput() {
-  if (tags.value == null) {
-    fetchTags();
+function loadSearchMetadata() {
+  if (tags.value == null && !isFetchingTags.value) {
+    void fetchTags();
   }
-  if (categoriesMap.value == null) {
-    fetchCategories();
+  if (categoriesMap.value == null && !isFetchingCategories.value) {
+    void fetchCategories();
   }
 }
 
+watch(searchQuery, (searchString) => {
+  if (searchString !== '') {
+    loadSearchMetadata();
+  }
+});
+
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
 
 function handleCloseDrawer() {
   setActiveIconName('');
 
-  window.history.pushState({}, '', '/icons/categories');
+  const url = new URL(window.location);
+  url.pathname = '/icons/categories';
+
+  if (searchQueryDebounced.value) {
+    url.searchParams.set('search', searchQueryDebounced.value);
+  }
+
+  if (selectedCategory.value) {
+    url.hash = selectedCategory.value;
+  }
+
+  window.history.pushState({}, '', url);
 }
 </script>
 
@@ -150,6 +182,7 @@ function handleCloseDrawer() {
   <div
     ref="overviewEl"
     class="overview-container"
+    :class="{ 'icon-drawer-open': activeIconName }"
   >
     <StickyBar class="category-search">
       <InputSearch
@@ -158,11 +191,11 @@ function handleCloseDrawer() {
         :shortcut="kbdSearchShortcut"
         class="input-wrapper"
         ref="searchInput"
-        @focus="onFocusSearchInput"
+        @focus="loadSearchMetadata"
       />
     </StickyBar>
     <NoResults
-      v-if="searchPlaceholder.isNoResults"
+      v-if="searchPlaceholder.isNoResults && !isSearchMetadataLoading"
       :searchQuery="searchPlaceholder.query"
       :isBrandSearch="searchPlaceholder.isBrand"
       @clear="searchQuery = ''"

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

@@ -4,6 +4,7 @@ import type { IconEntity } from '../../types';
 import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
 import { useRoute } from 'vitepress';
 import IconGrid from './IconGrid.vue';
+import Select from '../base/Select.vue';
 import InputSearch from '../base/InputSearch.vue';
 import useSearch from '../../composables/useSearch';
 import useSearchInput from '../../composables/useSearchInput';
@@ -14,9 +15,26 @@ import useFetchCategories from '../../composables/useFetchCategories';
 import chunkArray from '../../utils/chunkArray';
 import CarbonAdOverlay from './CarbonAdOverlay.vue';
 import useSearchPlaceholder from '../../utils/useSearchPlaceholder.ts';
+import Icon from '@lucide/vue/src/Icon';
+import { listSortDescending } from '~/.vitepress/data/iconNodes';
 
 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
+const SORTING = [
+  {
+    name: 'Popularity',
+    value: 'popularity',
+  },
+  {
+    name: 'Release date',
+    value: 'release-date',
+  },
+  {
+    name: 'Name',
+    value: 'name',
+  },
+]
+
 
 const initialGridItems = computed(() => {
   if (containerWidth.value === 0) return 120;
@@ -32,9 +50,14 @@ const props = defineProps<{
 }>();
 
 const activeIconName = ref(null);
+const selectedSort = ref(SORTING[0])
 
-const { execute: fetchTags, data: tags } = useFetchTags();
-const { execute: fetchCategories, data: categories } = useFetchCategories();
+const { execute: fetchTags, data: tags, isFetching: isFetchingTags } = useFetchTags();
+const {
+  execute: fetchCategories,
+  data: categories,
+  isFetching: isFetchingCategories,
+} = useFetchCategories();
 
 const overviewEl = ref<HTMLElement | null>(null);
 const { width: containerWidth } = useElementSize(overviewEl);
@@ -43,12 +66,29 @@ const columnSize = computed(() => {
   return Math.floor(containerWidth.value / (ICON_SIZE + ICON_GRID_GAP));
 });
 
+const sortedIcons = computed(() => {
+  switch (selectedSort.value.value) {
+    case 'popularity':
+      return [...props.icons].sort((a, b) => (b.popularity || 0) - (a.popularity || 0));
+    case 'release-date':
+      return [...props.icons].sort((a, b) => {
+        const aDate = a.createdRelease?.date ? new Date(a.createdRelease.date).getTime() : 0;
+        const bDate = b.createdRelease?.date ? new Date(b.createdRelease.date).getTime() : 0;
+        return bDate - aDate;
+      });
+    case 'name':
+      return [...props.icons].sort((a, b) => a.name.localeCompare(b.name));
+    default:
+      return props.icons;
+  }
+});
+
 const mappedIcons = computed(() => {
   if (tags.value == null) {
-    return props.icons;
+    return sortedIcons.value;
   }
 
-  return props.icons.map((icon) => {
+  return sortedIcons.value.map((icon) => {
     const iconTags = tags.value[icon.name];
     const iconCategories = categories.value?.[icon.name] ?? [];
 
@@ -68,11 +108,15 @@ const { shortcutText: kbdSearchShortcut } = useSearchShortcut(() => {
 
 const searchResults = useSearch(searchQueryDebounced, mappedIcons, [
   { name: 'name', weight: 3 },
-  { name: 'aliases', weight: 3 },
+  { name: 'aliases', weight: 8 },
   { name: 'tags', weight: 2 },
   { name: 'categories', weight: 1 },
 ]);
+
 const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
+const isSearchMetadataLoading = computed(
+  () => searchQuery.value.length > 0 && (tags.value == null || categories.value == null),
+);
 
 const chunkedIcons = computed(() => {
   return chunkArray(searchResults.value, columnSize.value);
@@ -98,15 +142,21 @@ function setActiveIconName(name: string) {
   activeIconName.value = name;
 }
 
-function onFocusSearchInput() {
-  if (tags.value == null) {
-    fetchTags();
+function loadSearchMetadata() {
+  if (tags.value == null && !isFetchingTags.value) {
+    void fetchTags();
   }
-  if (categories.value == null) {
-    fetchCategories();
+  if (categories.value == null && !isFetchingCategories.value) {
+    void fetchCategories();
   }
 }
 
+watch(searchQuery, (searchString) => {
+  if (searchString !== '') {
+    loadSearchMetadata();
+  }
+});
+
 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
@@ -118,7 +168,14 @@ watch(searchQueryDebounced, () => {
 function handleCloseDrawer() {
   setActiveIconName('');
 
-  window.history.pushState({}, '', '/icons/');
+  const url = new URL(window.location);
+  url.pathname = '/icons/';
+
+  if (searchQueryDebounced.value) {
+    url.searchParams.set('search', searchQueryDebounced.value);
+  }
+
+  window.history.pushState({}, '', url);
 }
 </script>
 
@@ -126,6 +183,7 @@ function handleCloseDrawer() {
   <div
     ref="overviewEl"
     class="overview-container"
+    :class="{ 'icon-drawer-open': activeIconName }"
   >
     <StickyBar>
       <InputSearch
@@ -134,11 +192,25 @@ function handleCloseDrawer() {
         ref="searchInput"
         :shortcut="kbdSearchShortcut"
         class="input-wrapper"
-        @focus="onFocusSearchInput"
+        @focus="loadSearchMetadata"
       />
+
+      <Select
+        id="sort-select"
+        :items="SORTING"
+        v-model="selectedSort"
+      >
+        <template #start-icon>
+          <Icon
+            :iconNode="listSortDescending"
+            class="chevron-icon"
+            aria-hidden="true"
+          />
+        </template>
+      </Select>
     </StickyBar>
     <NoResults
-      v-if="searchPlaceholder.isNoResults"
+      v-if="searchPlaceholder.isNoResults && !isSearchMetadataLoading"
       :searchQuery="searchPlaceholder.query"
       :isBrandSearch="searchPlaceholder.isBrand"
       @clear="searchQuery = ''"

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

@@ -73,13 +73,11 @@ const customizingActive = computed(() => {
       id="icon-color"
       label="Color"
     >
-      <template #display>
-        <ColorPicker
-          v-model="color"
-          id="icon-color"
-          class="color-picker"
-        />
-      </template>
+      <ColorPicker
+        v-model="color"
+        id="icon-color"
+        class="color-picker"
+      />
     </InputField>
 
     <InputField
@@ -161,6 +159,6 @@ const customizingActive = computed(() => {
 }
 
 .color-picker {
-  margin-left: auto;
+  width: 100%;
 }
 </style>

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

@@ -9,20 +9,63 @@
   margin-bottom: 16px;
   position: sticky;
   z-index: 10;
-  top: 48px;
-  padding-top: 24px;
-  margin-top: -32px;
+  top: var(--vp-layout-top-height);
   width: 100%;
   display: flex;
   margin-bottom: 32px;
   background: var(--vp-c-bg);
   box-shadow: 0 16px 24px var(--vp-c-bg);
+  gap: 16px;
+}
+
+.search-bar :deep(.select-button) {
+  padding: 11px 14px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  flex-shrink: 0;
+  flex: 1;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.search-bar :deep(.select-button):hover,
+.search-bar :deep(.select-button):focus {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-alt);
+}
+
+.search-bar :deep(.select-options) {
+  min-width: 160px;
+}
+
+.search-bar :deep(.select-option) {
+  padding-right: 36px;
+  padding-left: 8px;
+}
+
+.search-bar :deep(.select-icon) {
+  display: none;
+}
+
+.search-bar :deep(.select-button) .select-text {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .search-bar :deep(.select-button) {
+    padding: 11px 16px 11px 16px;
+  }
+
+  .search-bar :deep(.select-button) .select-text {
+    display: block;
+  }
 }
 
 @media (min-width: 960px) {
   .search-bar {
     padding-top: 32px;
-    top: 64px;
+    margin-top: calc((var(--vp-layout-top-height, 0px) + 32px) * -1);
+    top: calc(var(--vp-layout-top-height, 0px) + 64px);
   }
 }
 </style>

docs/.vitepress/theme/components/overrides/VPCarbonAds.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { ref, watch, onMounted } from 'vue'
+import { useAside } from 'vitepress/dist/client/theme-default/composables/aside.js'
+import { useData } from 'vitepress/dist/client/theme-default/composables/data.js'
+
+const { page } = useData()
+const props = defineProps<{
+  carbonAds: DefaultTheme.CarbonAdsOptions
+  overlay?: boolean
+}>()
+
+const carbonOptions = props.carbonAds
+
+const { isAsideEnabled } = useAside()
+const container = ref()
+
+let isInitialized = false
+
+function init() {
+  if (!isInitialized) {
+    isInitialized = true
+    const params = new URLSearchParams({
+      serve: carbonOptions.code,
+      placement: carbonOptions.placement,
+      format: 'responsive',
+    })
+    const s = document.createElement('script')
+    s.id = '_carbonads_js'
+    s.src = `//cdn.carbonads.com/carbon.js?${params.toString()}`
+    s.async = true
+    container.value.appendChild(s)
+  }
+}
+
+watch(() => page.value.relativePath, () => {
+  if (isInitialized && isAsideEnabled.value) {
+    ;(window as any)._carbonads?.refresh()
+  }
+})
+
+// no need to account for option changes during dev, we can just
+// refresh the page
+if (carbonOptions) {
+  onMounted(() => {
+    // if the page is loaded when aside is active, load carbon directly.
+    // otherwise, only load it if the page resizes to wide enough. this avoids
+    // loading carbon at all on mobile where it's never shown
+    if (isAsideEnabled.value || props.overlay) {
+      init()
+    } else {
+      watch(isAsideEnabled, (wide) => wide && init())
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="VPCarbonAds" ref="container" />
+</template>
+
+<style scoped>
+.VPCarbonAds {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  border-radius: 12px;
+  min-height: 256px;
+  text-align: center;
+  line-height: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: var(--vp-carbon-ads-bg-color);
+}
+
+.VPCarbonAds :deep(img) {
+  margin: 0 auto;
+  border-radius: 6px;
+}
+
+.VPCarbonAds :deep(.carbon-text) {
+  display: block;
+  margin: 0 auto;
+  padding-top: 12px;
+  color: var(--vp-carbon-ads-text-color);
+  transition: color 0.25s;
+}
+
+.VPCarbonAds :deep(.carbon-text:hover) {
+  color: var(--vp-carbon-ads-hover-text-color);
+}
+.VPCarbonAds :deep(#carbon-responsive .carbon-poweredby),
+.VPCarbonAds :deep(.carbon-poweredby) {
+  display: block;
+  padding-bottom: 2px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--vp-carbon-ads-poweredby-color);
+  text-transform: uppercase;
+  transition: color 0.25s;
+}
+.VPCarbonAds :deep(#carbon-responsive) {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+}
+
+.VPCarbonAds :deep(#carbon-responsive .carbon-poweredby) {
+  text-align: left;
+}
+
+.VPCarbonAds :deep(#carbon-responsive .carbon-poweredby:hover),
+.VPCarbonAds :deep(.carbon-poweredby:hover) {
+  color: var(--vp-carbon-ads-hover-poweredby-color);
+}
+
+.VPCarbonAds :deep(> div) {
+  display: none;
+}
+
+.VPCarbonAds :deep(> div:first-of-type) {
+  display: block;
+}
+
+.VPCarbonAds :deep(#carbon-responsive) {
+  flex-direction: column-reverse;
+}
+
+.VPCarbonAds :deep(#carbon-responsive .carbon-responsive-wrap) {
+  border-radius: 10px;
+}
+</style>

docs/.vitepress/theme/components/overrides/VPFooter.vue

@@ -3,6 +3,7 @@ import { useData } from 'vitepress';
 import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar';
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
 import { computed } from 'vue';
+import SurveyAskOverlay from '../SurveyAskOverlay.vue';
 
 const { theme } = useData();
 const { hasSidebar } = useSidebar();

docs/.vitepress/theme/composables/useCategoryView.ts

@@ -1,5 +1,5 @@
 import { useRoute } from 'vitepress';
-import { ref, inject, Ref, onMounted, watch } from 'vue';
+import { ref, inject, Ref, onMounted, onUnmounted, watch } from 'vue';
 
 export const CATEGORY_VIEW_CONTEXT = Symbol('categoryView');
 
@@ -13,25 +13,53 @@ export const categoryViewContext = {
   categoryCounts: ref({}),
 };
 
+const CATEGORIES_PATH = '/icons/categories';
+
 export function useCategoryView(): CategoryViewContext {
   const context = inject<CategoryViewContext>(CATEGORY_VIEW_CONTEXT);
-  const route = useRoute();
 
   if (!context) {
     throw new Error('useCategoryView must be used with categoryView context');
   }
 
-  onMounted(() => {
-    if (window.location.hash) {
-      context.selectedCategory.value = decodeURIComponent(window.location.hash.slice(1));
+  return context;
+}
+
+export function useCategoryViewSync(): CategoryViewContext {
+  const context = useCategoryView();
+  const route = useRoute();
+
+  function syncCategoryFromLocation() {
+    if (!window.location.pathname.startsWith(CATEGORIES_PATH)) {
+      context.selectedCategory.value = '';
+      context.categoryCounts.value = {};
+      return;
     }
+
+    context.selectedCategory.value = window.location.hash
+      ? decodeURIComponent(window.location.hash.slice(1))
+      : '';
+  }
+
+  onMounted(() => {
+    syncCategoryFromLocation();
+    window.addEventListener('hashchange', syncCategoryFromLocation);
+    window.addEventListener('popstate', syncCategoryFromLocation);
+  });
+
+  onUnmounted(() => {
+    window.removeEventListener('hashchange', syncCategoryFromLocation);
+    window.removeEventListener('popstate', syncCategoryFromLocation);
   });
 
   watch(route, (currentRoute) => {
-    if (currentRoute.path !== '/icons/categories') {
+    if (currentRoute.path !== CATEGORIES_PATH) {
       context.selectedCategory.value = '';
       context.categoryCounts.value = {};
+      return;
     }
+
+    syncCategoryFromLocation();
   });
 
   return context;

docs/.vitepress/theme/composables/useExternalLibs.ts

@@ -16,7 +16,7 @@ export const externalLibContext = {
 };
 
 const externalLibIconNodesAPI = {
-  lab: 'https://lab.lucide.dev/api/icon-details',
+  lab: `${import.meta.env.DEV ? 'http://localhost:3000' : ''}/api/lab/icon-details`,
 };
 
 export function useExternalLibs(): ExternalLibContext {
@@ -32,13 +32,15 @@ export function useExternalLibs(): ExternalLibContext {
           newExternalIconNodes[lib] = savedIconNodes[lib];
         } else {
           const response = await fetch(externalLibIconNodesAPI[lib]);
-          const iconNodes = await response.json();
+          const iconDetails = await response.json();
 
-          if (iconNodes) {
-            newExternalIconNodes[lib] = Object.values(iconNodes).map((iconEntity: IconEntity) => ({
-              ...iconEntity,
-              externalLibrary: lib,
-            }));
+          if (iconDetails) {
+            newExternalIconNodes[lib] = Object.values(iconDetails).map((iconEntity: IconEntity) => {
+              return {
+                ...iconEntity,
+                externalLibrary: lib,
+              };
+            });
           }
         }
       }

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

@@ -1,5 +1,3 @@
-/* eslint-disable no-console */
-
 import { ref, inject, Ref } from 'vue';
 
 export const ICON_STYLE_CONTEXT = Symbol('style');

docs/.vitepress/theme/composables/useScrollToCategory.ts

@@ -34,7 +34,13 @@ export default function useScrollToCategory({
     }
   }
 
-  watch(selectedCategory, scrollToSelectedCategory);
+  watch(selectedCategory, (value) => {
+    if (value) {
+      scrollToSelectedCategory(value);
+    } else {
+      scrollTo(0);
+    }
+  });
 
   onMounted(() => {
     setTimeout(() => {
@@ -43,7 +49,11 @@ export default function useScrollToCategory({
   });
 
   watch(searchQueryDebounced, () => {
-    scrollTo(0);
+    if (selectedCategory.value) {
+      scrollToSelectedCategory(selectedCategory.value);
+    } else {
+      scrollTo(0);
+    }
   });
 
   watch(categories, (items) => {

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

@@ -20,16 +20,6 @@ const useSearch = <T>(
       return index.value.search(query.value).map((result) => result.item);
     }
 
-    if (keys.length !== 0) {
-      const mainKey = keys[0].name;
-
-      return collection.value.sort((a, b) => {
-        const aString = a[mainKey as keyof T] as string;
-        const bString = b[mainKey as keyof T] as string;
-        return aString.localeCompare(bString);
-      });
-    }
-
     return collection.value;
   });
 

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

@@ -1,5 +1,5 @@
 import { useDebounce } from '@vueuse/core';
-import { nextTick, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 const useSearchInput = () => {
   const searchInput = ref();
@@ -13,11 +13,10 @@ const useSearchInput = () => {
       newUrl.searchParams.delete('search');
     } else {
       newUrl.searchParams.set('search', searchString);
+      newUrl.hash = '';
     }
 
-    nextTick(() => {
-      window.history.replaceState({}, '', newUrl);
-    });
+    window.history.replaceState({}, '', newUrl);
   });
 
   onMounted(() => {

docs/.vitepress/theme/index.ts

@@ -7,7 +7,6 @@ import IconsSidebarNavAfter from './layouts/IconsSidebarNavAfter.vue';
 import HomeHeroIconsCard from './components/home/HomeHeroIconsCard.vue';
 import HomeHeroAfter from './components/home/HomeHeroAfter.vue';
 import HomeHeroInfoBefore from './components/home/HomeHeroInfoBefore.vue';
-import LayoutTop from './components/base/LayoutTop.vue';
 import { ICON_STYLE_CONTEXT, iconStyleContext } from './composables/useIconStyle';
 import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from './composables/useCategoryView';
 import { EXTERNAL_LIBS_CONTEXT, externalLibContext } from './composables/useExternalLibs';
@@ -23,7 +22,8 @@ const theme: Partial<Theme> = {
       'sidebar-nav-after': () => h(IconsSidebarNavAfter),
       'home-hero-image': () => h(HomeHeroIconsCard),
       'home-hero-actions-after': () => h(HomeHeroAfter),
-      'layout-top': () => h(LayoutTop),
+      // Keep this here for now, we might want to add more things to the top bar in the future
+      // 'layout-top': () => h(LayoutTop),
     });
   },
   enhanceApp({ app }) {

docs/.vitepress/theme/style.css

@@ -67,6 +67,10 @@
   animation: .3s transition 0s ease;
 } */
 
+html {
+  scrollbar-gutter: stable;
+}
+
 .VPHome {
   overflow-x: hidden;
 }
@@ -117,6 +121,10 @@
   padding-left: 0;
 }
 
+.overview-container.icon-drawer-open {
+  padding-bottom: 288px;
+}
+
 .VPHomeHero .container {
   flex-direction: column-reverse;
 }
@@ -154,3 +162,24 @@
   margin: 0 auto 48px;
   max-width: 480px;
 }
+
+.VPSidebar {
+  /* Hide Scrollbar */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  scrollbar-width: thin; /* can also be normal, or none, to not render scrollbar */
+  scrollbar-color: var(--vp-c-text-4) transparent; /* foreground background */
+}
+.VPSidebar::-webkit-scrollbar {
+  width: 0;
+  display: none;
+}
+
+.VPSidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.VPSidebar::-webkit-scrollbar-thumb {
+  background: transparent;
+  border: none;
+}

docs/.vitepress/theme/types.ts

@@ -18,6 +18,7 @@ export interface IconEntity extends IconMetaData {
   externalLibrary?: ExternalLibs;
   createdRelease?: Release;
   changedRelease?: Release;
+  popularity?: number;
 }
 
 export interface Category {

docs/.vitepress/transformPageData.ts

@@ -0,0 +1,79 @@
+import { type PageData } from 'vitepress';
+import getStructuredData from './getStructuredData';
+import { createGeneralOGImage, createIconOGImage } from './createOGImage';
+
+export async function transformPageData(pageData: PageData) {
+  pageData.frontmatter.head ??= [];
+  if (
+    pageData.relativePath.startsWith('icons/') &&
+    !pageData.relativePath.startsWith('icons/lab/') &&
+    pageData.params?.name
+  ) {
+    const iconName = pageData.params.name;
+    pageData.title = `${iconName} icon details`;
+
+    const taggedAs = pageData.params?.tags?.length
+      ? `Tagged as: ${pageData.params.tags.join(', ')}.`
+      : '';
+    const categorizedIn = pageData.params?.category?.length
+      ? `Categorized in: ${pageData.params.category.join(', ')}.`
+      : '';
+
+    pageData.description =
+      `Details and related icons for ${iconName} icon. ${taggedAs} ${categorizedIn}`.trim();
+
+    const structuredData = await getStructuredData(iconName, pageData);
+
+    const ogPath = await createIconOGImage(iconName, pageData.params?.tags || []);
+
+    if (ogPath) {
+      const content = `https://lucide.dev${ogPath}`;
+      pageData.frontmatter.head.push(
+        [
+          'meta',
+          {
+            property: 'og:image',
+            content,
+          },
+        ],
+        [
+          'meta',
+          {
+            property: 'twitter:image',
+            content,
+          },
+        ],
+      );
+    }
+
+    pageData.frontmatter.head.push([
+      'script',
+      { type: 'application/ld+json' },
+      JSON.stringify(structuredData),
+    ]);
+  }
+
+  if (pageData.relativePath.startsWith('guide/')) {
+    const ogPath = await createGeneralOGImage(pageData);
+
+    if (ogPath) {
+      const content = `https://lucide.dev${ogPath}`;
+      pageData.frontmatter.head.push(
+        [
+          'meta',
+          {
+            property: 'og:image',
+            content,
+          },
+        ],
+        [
+          'meta',
+          {
+            property: 'twitter:image',
+            content,
+          },
+        ],
+      );
+    }
+  }
+}

docs/.vitepress/types.d.ts

@@ -6,13 +6,13 @@ declare module '*.vue' {
 }
 
 declare module '*.data.ts' {
-  const data: any;
+  const data: unknown;
 
   export { data };
 }
 
 declare module '*.data' {
-  const data: any;
+  const data: unknown;
 
   export { data };
 }
@@ -46,5 +46,43 @@ declare global {
        */
       append(container: Element): void;
     };
+    Tally: {
+      // From https://tally.so/help/developer-resources#2f676e40530a460ea6a634b8441f6001
+      openPopup: (
+        formId: string,
+        options?: {
+          key?: string; // This is used as a unique identifier used for the "Show only once" and "Don't show after submit" functionality
+          layout?: 'default' | 'modal';
+          width?: number;
+          alignLeft?: boolean;
+          hideTitle?: boolean;
+          overlay?: boolean;
+          emoji?: {
+            text: string;
+            animation:
+              | 'none'
+              | 'wave'
+              | 'tada'
+              | 'heart-beat'
+              | 'spin'
+              | 'flash'
+              | 'bounce'
+              | 'rubber-band'
+              | 'head-shake';
+          };
+          autoClose?: number; // in milliseconds
+          showOnce?: boolean;
+          doNotShowAfterSubmit?: boolean;
+          customFormUrl?: string; // when you want to load the form via it's custom domain URL
+          hiddenFields?: {
+            [key: string]: unknown;
+          };
+          onOpen?: () => void;
+          onClose?: () => void;
+          onPageView?: (page: number) => void;
+          onSubmit?: (payload: SubmissionPayload) => void;
+        },
+      ) => void;
+    };
   }
 }

docs/contribute/icon-design-guide.md

@@ -158,7 +158,7 @@ For each icon these attributes are applied, corresponding to the above rules.
 ### Minify paths
 
 The code of paths can sometimes get quite large. To reduce file size we like to minify the code.
-We recommend to use [Lucide Studio](https://studio.lucide.dev/) to tidy paths to 3 points of precision.
+We recommend to use [Lucide Studio](https://studio.lucide.dev/?utm_source=lucide.dev&utm_medium=design-guide) to tidy paths to 3 points of precision.
 
 ### Allowed elements