Updated icons/brackets.svg (#2863)

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

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

@@ -1,44 +0,0 @@
-name: 'Build and Test'
-description: 'Builds and test a package'
-
-inputs:
-  name:
-    description: “Name of the package”
-    required: true
-
-runs:
-  using: 'composite'
-  steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 16
-
-    - uses: pnpm/action-setup@v2
-      name: Install pnpm
-      id: pnpm-install
-      with:
-        version: 8
-        run_install: false
-
-    - name: Get pnpm store directory
-      id: pnpm-cache
-      run: |
-        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-    - uses: actions/cache@v3
-      name: Setup pnpm cache
-      with:
-        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-pnpm-store-
-
-    - name: Install dependencies
-      run: pnpm install --filter lucide-preact
-
-    - name: Build
-      run: pnpm --filter lucide-preact build
-
-    - name: Test
-      run: pnpm --filter lucide-preact test

.github/actions/check-icons.yml

@@ -1,41 +0,0 @@
-name: 'Check icons'
-description: 'Cross-checks icon and category references in JSON descriptors'
-
-inputs:
-  name:
-    description: “Name of the package”
-    required: true
-
-runs:
-  using: 'composite'
-  steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 16
-
-    - uses: pnpm/action-setup@v2
-      name: Install pnpm
-      id: pnpm-install
-      with:
-        version: 8
-        run_install: false
-
-    - name: Get pnpm store directory
-      id: pnpm-cache
-      run: |
-        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-    - uses: actions/cache@v3
-      name: Setup pnpm cache
-      with:
-        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-pnpm-store-
-
-    - name: Install dependencies
-      run: pnpm install --filter .
-
-    - name: Check icons and categories
-      run: pnpm checkIcons

.github/workflows/ci.yml

@@ -9,17 +9,16 @@ on:
 
 jobs:
   create-release:
-    if: github.repository == 'lucide-icons/lucide'
+    if: github.repository == 'lucide-icons/lucide' && ${{ !startsWith(github.event.head_commit.message, 'fix(icons):') }}
     runs-on: ubuntu-latest
     outputs:
       VERSION: ${{ steps.new-version.outputs.NEW_VERSION }}
 
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -61,8 +60,40 @@ jobs:
         uses: softprops/action-gh-release@v1
         with:
           tag_name: ${{ steps.new-version.outputs.NEW_VERSION }}
-          name: New icons ${{ steps.new-version.outputs.NEW_VERSION }}
-          body: ${{ steps.change-log.outputs.CHANGE_LOG }}
+          name: Version ${{ steps.new-version.outputs.NEW_VERSION }}
+          generate_release_notes: true
+
+  test-semantic-release:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Semantic Release
+        id: semantic
+        uses: cycjimmy/semantic-release-action@v4
+        with:
+          tag_format: ${version}
+          branches: |
+            ['new-release-workflow']
+          extends: |
+            semantic-release-monorepo
+          extra_plugins: |
+            @semantic-release/github
+            @semantic-release/git
+            @semantic-release/release-notes-generator
+            conventional-changelog-conventionalcommits
+
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Log output
+        if: steps.semantic.outputs.new_release_published == 'true'
+        run: |
+          echo ${{ steps.semantic.outputs.new_release_version }}
+          echo ${{ steps.semantic.outputs.new_release_major_version }}
+          echo ${{ steps.semantic.outputs.new_release_minor_version }}
+          echo ${{ steps.semantic.outputs.new_release_patch_version }}
 
   start-release:
     if: github.repository == 'lucide-icons/lucide'

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

@@ -11,7 +11,7 @@ jobs:
       issues: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Check for blocked phrases in issue title
         run: |

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

@@ -0,0 +1,58 @@
+name: Icon preview comment
+
+on:
+  workflow_run:
+    workflows: ['Pull request icon preview']
+    types:
+      - completed
+
+jobs:
+  upload:
+    runs-on: ubuntu-latest
+    if: >
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success'
+    steps:
+      - name: 'Download artifact'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            let allArtifacts = await github.rest.actions.listWorkflowRunArtifacts({
+               owner: context.repo.owner,
+               repo: context.repo.repo,
+               run_id: context.payload.workflow_run.id,
+            });
+            let matchArtifact = allArtifacts.data.artifacts.filter((artifact) => {
+              return artifact.name == "pr_number"
+            })[0];
+            let download = await github.rest.actions.downloadArtifact({
+               owner: context.repo.owner,
+               repo: context.repo.repo,
+               artifact_id: matchArtifact.id,
+               archive_format: 'zip',
+            });
+            const fs = require('fs');
+            fs.writeFileSync('${{github.workspace}}/pr_number.zip', Buffer.from(download.data));
+
+      - name: 'Unzip artifact'
+        run: unzip pr_number.zip
+
+      - name: 'Get PR number'
+        run: echo "number=$(cat NR)" >> $GITHUB_OUTPUT
+        id: pr-number
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v2
+        id: pr-comment
+        with:
+          issue-number: ${{ steps.pr-number.outputs.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: Added or changed icons
+
+      - name: Create or update comment
+        uses: peter-evans/create-or-update-comment@v3
+        with:
+          comment-id: ${{ steps.pr-comment.outputs.comment-id }}
+          issue-number: ${{ steps.pr-number.outputs.number }}
+          body-path: comment-markup.md
+          edit-mode: replace

.github/workflows/lint-code.yml

@@ -1,19 +1,16 @@
-name: Linting
+name: Linting PR
 
 on:
   pull_request:
-    branches:
-      - '**'
 
 jobs:
-  linting:
+  lint-code:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install Dependencies

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

@@ -0,0 +1,32 @@
+name: Linting PR
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - reopened
+
+jobs:
+  lint-pr-title:
+    name: PR Title Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          types: |
+            fix
+            feat
+            perf
+            refactor
+            test
+            style
+            docs
+            ci
+            build
+          requireScope: true
+          ignoreLabels: |
+            bot

.github/workflows/linting-icons.yml

@@ -1,58 +1,55 @@
-name: Add Changed Icons comment
+name: Linting Icons
 
 on:
-  pull_request_target:
+  pull_request:
     paths:
       - 'icons/*'
-    branches:
-      - main
-      - fix-icon-preview
 
 jobs:
   lint-filenames:
+    name: Lint Filenames
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     permissions:
       contents: read
     steps:
       - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: refs/pull/${{ github.event.pull_request.number }}/merge
       - name: Get changed files
         id: changed-files
         uses: tj-actions/changed-files@v41
         with:
           files: icons/*
+
       - name: Generate annotations
         run: node ./scripts/lintFilenames.mjs
         env:
           CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
 
   lint-contributors:
+    name: Lint Contributors
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     permissions:
       contents: read
     steps:
       - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: refs/pull/${{ github.event.pull_request.number }}/merge
       - name: Get changed files
         id: changed-files
         uses: tj-actions/changed-files@v41
         with:
           files: icons/*
+
       - uses: actions/setup-node@v4
       - name: Install simple-git (safer and faster than installing all deps)
         run: npm install simple-git
+
       - name: Generate annotations
         run: node ./scripts/updateContributors.mjs
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           FETCH_DEPTH: ${{ github.event.pull_request.commits }}
           CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
+
       - name: Generate annotations
         env:
           ANNOTATION_SEVERITY: notice
@@ -77,47 +74,3 @@ jobs:
       - uses: actions/checkout@v4
       - name: Check Uniqueness of Aliases
         run: "! cat <(printf \"%s\\n\" icons/*.json | while read -r name; do basename \"$name\" .json; done) <(jq -cr 'select(.aliases) | .aliases[] | if type==\"string\" then . else .name end' icons/*.json) | sort | uniq -c | grep -ve '^\\s*1 '"
-
-  generate-changed-icons-comment:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: write
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: refs/pull/${{ github.event.pull_request.number }}/merge
-
-      - name: Get changed files
-        id: changed-files
-        uses: tj-actions/changed-files@v41
-        with:
-          files: icons/*.svg
-
-      - name: Find Comment
-        uses: peter-evans/find-comment@v2
-        id: pr-comment
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          comment-author: 'github-actions[bot]'
-          body-includes: Added or changed icons
-
-      - uses: actions/setup-node@v4
-      - name: Install svgson for code preview (safer and faster than installing all deps)
-        run: npm install svgson
-
-      - name: Generate comment markup
-        run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> comment-markup.md
-        id: comment-markup
-        env:
-          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
-
-      - name: Create or update comment
-        uses: peter-evans/create-or-update-comment@v3
-        with:
-          comment-id: ${{ steps.pr-comment.outputs.comment-id }}
-          issue-number: ${{ github.event.pull_request.number }}
-          body-path: ./comment-markup.md
-          edit-mode: replace

.github/workflows/lucide-angular.yml

@@ -12,10 +12,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -27,11 +26,10 @@ 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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/lucide-font.yml

@@ -12,10 +12,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -28,7 +27,7 @@ jobs:
         run: pnpm build:font
 
       - name: 'Upload to Artifacts'
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: lucide-font
           path: lucide-font

.github/workflows/lucide-preact.yml

@@ -14,10 +14,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies

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

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

.github/workflows/lucide-react.yml

@@ -15,10 +15,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -30,11 +29,10 @@ 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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/lucide-shared.yml

@@ -10,11 +10,10 @@ 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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/lucide-solid.yml

@@ -14,10 +14,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -29,11 +28,10 @@ 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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/lucide-static.yml

@@ -12,10 +12,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/lucide-svelte.yml

@@ -14,10 +14,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -29,11 +28,10 @@ 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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -14,10 +14,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -29,11 +28,10 @@ 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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/lucide-vue.yml

@@ -1,43 +0,0 @@
-name: Lucide Vue checks
-
-on:
-  pull_request:
-    paths:
-      - packages/lucide-vue/**
-      - packages/shared/**
-      - tools/build-icons/**
-      - tools/rollup-plugins/**
-      - pnpm-lock.yaml
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm --filter lucide-vue build
-
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3.8.1
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Test
-        run: pnpm --filter lucide-vue test

.github/workflows/lucide.yml

@@ -13,10 +13,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -28,11 +27,10 @@ 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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies

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

@@ -0,0 +1,43 @@
+name: Pull request icon preview
+
+on:
+  pull_request:
+    paths:
+      - 'icons/*.svg'
+
+jobs:
+  generate-changed-icons-comment:
+    name: Generate Changed Icons Comment
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v41
+        with:
+          files: icons/*.svg
+
+      - uses: actions/setup-node@v4
+      - name: Install svgson for code preview (safer and faster than installing all deps)
+        run: npm install svgson
+
+      - name: Save PR number
+        run: |
+          mkdir -p ./pr
+          echo ${{ github.event.number }} > ./pr/NR
+
+      - name: Generate comment markup
+        run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> ./pr/comment-markup.md
+        id: comment-markup
+        env:
+          CHANGED_FILES: ${{ steps.changed-files.outputs.all_changed_files }}
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: pr_number
+          path: pr/

.github/workflows/release.yml

@@ -55,10 +55,9 @@ jobs:
           ]
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -85,11 +84,10 @@ jobs:
     needs: [pre-release, lucide-font]
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/download-artifact@v3
-      - uses: pnpm/action-setup@v2
+      - uses: actions/download-artifact@v4
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -116,10 +114,9 @@ jobs:
     needs: pre-release
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -132,7 +129,7 @@ jobs:
         run: pnpm build:font
 
       - name: 'Upload to Artifacts'
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: lucide-font
           path: lucide-font
@@ -144,14 +141,14 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v4
       - name: Zip font and icons
         run: |
           zip -r lucide-font-${{ needs.pre-release.outputs.VERSION }}.zip lucide-font
           zip -r lucide-icons-${{ needs.pre-release.outputs.VERSION }}.zip icons
 
       - name: Release zip and fonts
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         with:
           tag_name: ${{ needs.pre-release.outputs.VERSION }}
           files: |

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

@@ -38,6 +38,7 @@ const value = computed({
   <Input
     ref="input"
     type="search"
+    autofocus
     v-bind="$attrs"
     v-model="value"
     class="input-wrapper"

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

@@ -9,6 +9,8 @@ import {useData, useRouter} from 'vitepress';
 import { computed } from 'vue';
 import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
 import { diamond }  from '../../../data/iconNodes'
+import deprecationReasonTemplate from '../../../../../tools/build-icons/utils/deprecationReasonTemplate.mjs';
+
 
 const props = defineProps<{
   icon: IconEntity
@@ -24,6 +26,15 @@ const tags = computed(() => {
 })
 
 const DiamondIcon = createLucideIcon('Diamond', diamond)
+
+const deprecatedTitle = computed(() => {
+  if (!props.icon.deprecationReason) return '';
+  return deprecationReasonTemplate(props.icon.deprecationReason, {
+    componentName: props.icon.name,
+    iconName: props.icon.name,
+    toBeRemovedInVersion: props.icon.toBeRemovedInVersion,
+  });
+});
 </script>
 
 <template>
@@ -36,6 +47,13 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
         <DiamondIcon fill="currentColor" :size="12"/>
         {{ icon.externalLibrary }}
       </div>
+      <Badge
+        v-if="icon.deprecated"
+        class="deprecated-badge"
+        :title="deprecatedTitle"
+      >
+        Deprecated
+      </Badge>
     </div>
     <div class="tags-scroller" v-if="tags.length">
       <p class="icon-tags horizontal-scroller">
@@ -98,6 +116,16 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
   align-items: center;
 }
 
+.deprecated-badge {
+  background-color: var(--vp-c-brand-5);
+  margin-left: 40px;
+  opacity: .8;
+}
+
+.deprecated-badge:hover {
+  background-color: var(--vp-c-brand-2);
+}
+
 .icon-tags {
   font-size: 16px;
   color: var(--vp-c-text-2);

docs/.vitepress/theme/types.ts

@@ -6,6 +6,9 @@ export interface IconMetaData {
   categories: string[];
   contributors: string[];
   aliases?: string[];
+  deprecated?: boolean;
+  deprecationReason?: string;
+  toBeRemovedInVersion?: string;
 }
 
 export type ExternalLibs = 'lab';

docs/guide/packages/lucide.md

@@ -126,11 +126,23 @@ import { createElement, Menu } from 'lucide';
 
 const menuIcon = createElement(Menu); // Returns HTMLElement (svg)
 
-// set custom attributes with browser native functions
-menuIcon.setAttribute('stroke', '#333');
-menuIcon.classList.add('my-icon-class');
+// Append HTMLElement in the DOM
+const myApp = document.getElementById('app');
+myApp.appendChild(menuIcon);
+```
 
-// Append HTMLElement in webpage
+#### Custom Element binding with custom attributes
+
+```js
+import { createElement, Menu } from 'lucide';
+
+const menuIcon = createElement(Menu, {
+  class: ['my-custom-class', 'icon'],
+  'stroke-width': 1,
+  stroke: '#333'
+}); // Returns HTMLElement (svg)
+
+// Append HTMLElement in the DOM
 const myApp = document.getElementById('app');
 myApp.appendChild(menuIcon);
 ```

docs/images/24px-24px.svg

@@ -48,10 +48,12 @@
     <path d="M340 120v240" stroke="#D8D8D9" stroke-width=".5"/>
     <path d="M120 350h240" stroke="#D8D8D9" stroke-width=".5"/>
     <path d="M350 120v240" stroke="#D8D8D9" stroke-width=".5"/>
-  </g>
-  <path d="m240 140-100 50 100 50 100-50-100-50Z" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="m140 290 100 50 100-50" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="m140 240 100 50 100-50" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g id="embed-lucide-layers" stroke="#3C3C43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(120 120), scale(10)">
+  <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z" />
+  <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" />
+  <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" />
+</g>
   <g opacity=".5" stroke="#fff" stroke-width="3">
     <path d="M120 92v16"/>
     <path d="M360 92v16"/>

docs/images/curvature-smooth.svg

@@ -53,9 +53,13 @@
 <path d="M350 120V360" stroke="#D8D8D9" stroke-width="0.5"/>
 </g>
 <g clip-path="url(#clip1_1612_15659)">
-<path d="M310 260C324.9 245.4 340 227.9 340 205C340 190.413 334.205 176.424 323.891 166.109C313.576 155.795 299.587 150 285 150C267.4 150 255 155 240 170C225 155 212.6 150 195 150C180.413 150 166.424 155.795 156.109 166.109C145.795 176.424 140 190.413 140 205C140 228 155 245.5 170 260L240 330L310 260Z" stroke="#F56565" stroke-width="60" stroke-linejoin="round" stroke-dasharray="0.2 0.4"/>
+<g id="embed-lucide-heart" stroke="#F56565" stroke-width="7" stroke-dasharray="0.04 0.08" stroke-linejoin="round" transform="translate(120 120), scale(10)">
+  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+</g>
+</g>
+<g id="embed-lucide-heart" stroke="#3C3C43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(120 120), scale(10)">
+  <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
 </g>
-<path d="M310 260C324.9 245.4 340 227.9 340 205C340 190.413 334.205 176.424 323.891 166.109C313.576 155.795 299.587 150 285 150C267.4 150 255 155 240 170C225 155 212.6 150 195 150C180.413 150 166.424 155.795 156.109 166.109C145.795 176.424 140 190.413 140 205C140 228 155 245.5 170 260L240 330L310 260Z" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
 <defs>
 <clipPath id="clip0_1612_15659">
 <rect x="120" y="120" width="240" height="240" rx="8" fill="white"/>

docs/images/density-ideal.svg

@@ -52,16 +52,18 @@
 <path d="M120 350H360" stroke="#D8D8D9" stroke-width="0.5"/>
 <path d="M350 120V360" stroke="#D8D8D9" stroke-width="0.5"/>
 </g>
-<path d="M310 160H170C158.954 160 150 168.954 150 180V320C150 331.046 158.954 340 170 340H310C321.046 340 330 331.046 330 320V180C330 168.954 321.046 160 310 160Z" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M280 140V180" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M200 140V180" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M150 220H330" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M200 260H200.1" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M240 260H240.1" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M280 260H280.1" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M200 300H200.1" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M240 300H240.1" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M280 300H280.1" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="embed-lucide-calendar-days" stroke="#3C3C43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(120 120), scale(10)">
+  <path d="M8 2v4" />
+  <path d="M16 2v4" />
+  <rect width="18" height="18" x="3" y="4" rx="2" />
+  <path d="M3 10h18" />
+  <path d="M8 14h.01" />
+  <path d="M12 14h.01" />
+  <path d="M16 14h.01" />
+  <path d="M8 18h.01" />
+  <path d="M12 18h.01" />
+  <path d="M16 18h.01" />
+</g>
 <defs>
 <clipPath id="clip0_1612_15298">
 <rect x="120" y="120" width="240" height="240" rx="8" fill="white"/>

docs/images/optical-volume-ideal.svg

@@ -54,10 +54,12 @@
 </g>
 <circle opacity="0.17" cx="240" cy="240" r="100" stroke="#F56565" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
 <rect opacity="0.17" x="150" y="150" width="180" height="180" rx="20" stroke="#F56565" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M330 330L270 270M330 330V282M330 330H282" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M150 282V330M150 330H198M150 330L210 270" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M330 198V150M330 150H282M330 150L270 210" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M150 198V150M150 150H198M150 150L210 210" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="embed-lucide-expand" stroke="#3C3C43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(120 120), scale(10)">
+  <path d="m21 21-6-6m6 6v-4.8m0 4.8h-4.8" />
+  <path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
+  <path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
+  <path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
+</g>
 <circle opacity="0.5" cx="240" cy="240" r="100" stroke="#F56565" stroke-dasharray="1 1"/>
 <rect opacity="0.5" x="150" y="150" width="180" height="180" rx="20" stroke="#F56565" stroke-dasharray="1 1"/>
 <defs>

docs/images/visually-centered-bad.svg

@@ -54,7 +54,9 @@
 <path d="M120 350H360" stroke="#D8D8D9" stroke-width="0.5"/>
 <path d="M350 120V360" stroke="#D8D8D9" stroke-width="0.5"/>
 </g>
-<path d="M150 150L220.7 320L245.8 246.1L320 220.7L150 150Z" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="embed-lucide-mouse-pointer-2" stroke="#3C3C43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(110 110), scale(10)">
+  <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
+</g>
 <path opacity="0.5" d="M240 120V360M360 240H120" stroke="#F56565" stroke-dasharray="1 1"/>
 </g>
 <defs>

docs/images/visually-centered.svg

@@ -53,7 +53,9 @@
 <path d="M120 350H360" stroke="#D8D8D9" stroke-width="0.5"/>
 <path d="M350 120V360" stroke="#D8D8D9" stroke-width="0.5"/>
 </g>
-<path d="M160 160L230.7 330L255.8 256.1L330 230.7L160 160Z" stroke="#3C3C43" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
+<g id="embed-lucide-mouse-pointer-2" stroke="#3C3C43" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="translate(120 120), scale(10)">
+  <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
+</g>
 <path opacity="0.5" d="M240 120V360M360 240H120" stroke="#F56565" stroke-dasharray="1 1"/>
 </g>
 <defs>

docs/scripts/writeIconDetails.mjs

@@ -27,7 +27,7 @@ import iconNode from '../iconNodes/${iconName}.node.json'
 import metaData from '../../../../icons/${iconName}.json'
 import releaseData from '../releaseMetadata/${iconName}.json'
 
-const { tags, categories, contributors, aliases } = metaData
+const { tags, categories, contributors, aliases, deprecated, deprecationReason, toBeRemovedInVersion } = metaData
 
 const iconDetails = {
   name: '${iconName}',
@@ -36,6 +36,9 @@ const iconDetails = {
   tags,
   categories,
   aliases,
+  deprecated,
+  deprecationReason,
+  toBeRemovedInVersion,
   ...releaseData,
 }
 

icons/beef.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M16.4 13.7A6.5 6.5 0 1 0 6.28 6.6c-1.1 3.13-.78 3.9-3.18 6.08A3 3 0 0 0 5 18c4 0 8.4-1.8 11.4-4.3" />
+  <path d="m18.5 6 2.19 4.5a6.48 6.48 0 0 1-2.29 7.2C15.4 20.2 11 22 7 22a3 3 0 0 1-2.68-1.66L2.4 16.5" />
   <circle cx="12.5" cy="8.5" r="2.5" />
-  <path d="M12.5 2a6.5 6.5 0 0 0-6.22 4.6c-1.1 3.13-.78 3.9-3.18 6.08A3 3 0 0 0 5 18c4 0 8.4-1.8 11.4-4.3A6.5 6.5 0 0 0 12.5 2Z" />
-  <path d="m18.5 6 2.19 4.5a6.48 6.48 0 0 1 .31 2 6.49 6.49 0 0 1-2.6 5.2C15.4 20.2 11 22 7 22a3 3 0 0 1-2.68-1.66L2.4 16.5" />
 </svg>

icons/brackets.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M16 3h3v18h-3" />
-  <path d="M8 21H5V3h3" />
+  <path d="M16 3h2a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-2" />
+  <path d="M8 21H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h2" />
 </svg>

icons/circle-slash-2.json

@@ -6,7 +6,7 @@
   "tags": [
     "diameter",
     "zero",
-    "Ø",
+    "ø",
     "nothing",
     "null",
     "void",
@@ -16,7 +16,12 @@
     "division",
     "half",
     "split",
-    "/"
+    "/",
+    "average",
+    "avg",
+    "mean",
+    "median",
+    "normal"
   ],
   "categories": [
     "shapes",

icons/circle-slash-2.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <circle cx="12" cy="12" r="10" />
   <path d="M22 2 2 22" />
+  <circle cx="12" cy="12" r="10" />
 </svg>

icons/dam.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "AndreasSas"
+    "AnnaSasDev"
   ],
   "tags": [
     "electricity",

icons/logs.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "AndreasSas"
+    "AnnaSasDev"
   ],
   "tags": [
     "options",

icons/save-off.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "AndreasSas"
+    "AnnaSasDev"
   ],
   "tags": [
     "floppy disk",

icons/shield-user.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "sebinemeth",
+    "ksk3110",
+    "karsa-mistmere",
+    "colebemis"
+  ],
+  "tags": [
+    "shield",
+    "user",
+    "admin",
+    "protection",
+    "protected",
+    "safety",
+    "guard"
+  ],
+  "categories": [
+    "account",
+    "security",
+    "development"
+  ]
+}

icons/shield-user.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+  <path d="M6.376 18.91a6 6 0 0 1 11.249.003" />
+  <circle cx="12" cy="11" r="4" />
+</svg>

icons/signature.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "AndreasSas",
+    "AnnaSasDev",
     "jguddas"
   ],
   "tags": [

icons/square-round-corner.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "liamb13",
+    "jguddas"
+  ],
+  "tags": [
+    "border",
+    "radius",
+    "style",
+    "design",
+    "corner",
+    "layout",
+    "round",
+    "rounded"
+  ],
+  "categories": [
+    "design",
+    "development",
+    "layout"
+  ]
+}

icons/square-round-corner.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M21 11a8 8 0 0 0-8-8" />
+  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+</svg>

package.json

@@ -67,6 +67,9 @@
     "svgson": "^5.3.1",
     "yargs": "^17.7.2"
   },
+  "engines": {
+    "node": ">=23.0.0"
+  },
   "packageManager": "pnpm@9.7.1+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247",
   "pnpm": {
     "packageExtensions": {

packages/lucide-preact/package.json

@@ -53,7 +53,7 @@
     "rollup": "^4.22.4",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^5.3.3",
-    "vite": "5.4.13",
+    "vite": "5.4.14",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-react-native/package.json

@@ -59,7 +59,7 @@
     "rollup": "^4.22.4",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^4.8.4",
-    "vite": "5.4.13",
+    "vite": "5.4.14",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-react/package.json

@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.1.6",
     "@testing-library/react": "^14.1.2",
     "@types/react": "^18.2.37",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "jest-serializer-html": "^7.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -65,7 +65,7 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "typescript": "^4.9.5",
-    "vite": "5.4.13",
+    "vite": "5.4.14",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-solid/package.json

@@ -76,15 +76,15 @@
     "@lucide/rollup-plugins": "workspace:*",
     "@lucide/shared": "workspace:*",
     "@rollup/plugin-babel": "^6.0.4",
-    "@solidjs/testing-library": "^0.8.6",
+    "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^6.4.2",
     "babel-preset-solid": "^1.8.12",
     "jest-serializer-html": "^7.1.0",
     "rollup": "^4.22.4",
-    "solid-js": "^1.8.7",
+    "solid-js": "^1.9.4",
     "typescript": "^4.9.4",
-    "vite": "5.4.13",
-    "vite-plugin-solid": "^2.10.1",
+    "vite": "5.4.14",
+    "vite-plugin-solid": "^2.11.6",
     "vitest": "^1.1.1",
     "esbuild": "^0.25.0"
   },

packages/lucide-svelte/package.json

@@ -70,7 +70,7 @@
     "svelte-check": "^3.4.4",
     "svelte-preprocess": "^5.0.4",
     "typescript": "^5.1.6",
-    "vite": "5.4.13",
+    "vite": "5.4.14",
     "vitest": "^1.1.1"
   },
   "peerDependencies": {

packages/lucide-vue-next/package.json

@@ -54,8 +54,8 @@
     "@vue/test-utils": "2.4.5",
     "rollup": "^4.22.4",
     "rollup-plugin-dts": "^6.1.0",
-    "vite": "5.4.13",
-    "vitest": "^1.4.0",
+    "vite": "5.4.14",
+    "vitest": "^1.1.1",
     "vue": "^3.4.21"
   },
   "peerDependencies": {

packages/lucide-vue/package.json

@@ -52,8 +52,8 @@
     "@vue/test-utils": "1.3.0",
     "rollup": "^3.29.5",
     "typescript": "^4.9.5",
-    "vite": "5.4.13",
-    "vitest": "^0.32.2",
+    "vite": "5.4.14",
+    "vitest": "^1.1.1",
     "vue": "2.7.14",
     "vue-template-compiler": "2.7.14"
   },

packages/lucide/package.json

@@ -51,7 +51,7 @@
     "rollup": "^4.22.4",
     "rollup-plugin-dts": "^6.1.0",
     "typescript": "^4.9.3",
-    "vite": "5.4.13",
+    "vite": "5.4.14",
     "vitest": "^1.1.1"
   }
 }

packages/lucide/src/createElement.ts

@@ -1,15 +1,16 @@
+import defaultAttributes from './defaultAttributes';
 import { IconNode, SVGProps } from './types';
 
-type CreateElementParams = [tag: string, attrs: SVGProps, children?: IconNode];
+type CreateSVGElementParams = [tag: string, attrs: SVGProps, children?: IconNode];
 
 /**
- * Creates a new HTMLElement from icon node
- * @param {string} tag
- * @param {object} attrs
- * @param {array} children
- * @returns {HTMLElement}
+ * Creates a new SVGElement
+ * @param {string} tag - Tag name of the element
+ * @param {object} attrs - Attributes of the element
+ * @param {array} children - Children of the element
+ * @returns {SVGElement}
  */
-const createElement = ([tag, attrs, children]: CreateElementParams) => {
+const createSVGElement = ([tag, attrs, children]: CreateSVGElementParams) => {
   const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
 
   Object.keys(attrs).forEach((name) => {
@@ -18,7 +19,7 @@ const createElement = ([tag, attrs, children]: CreateElementParams) => {
 
   if (children?.length) {
     children.forEach((child) => {
-      const childElement = createElement(child);
+      const childElement = createSVGElement(child);
 
       element.appendChild(childElement);
     });
@@ -27,4 +28,20 @@ const createElement = ([tag, attrs, children]: CreateElementParams) => {
   return element;
 };
 
+/**
+ * Creates a new HTMLElement from icon node
+ * @param {array} iconNode - Icon node to be converted to an element
+ * @param {object} customAttrs - Custom attributes to be added to the element
+ * @returns {HTMLElement}
+ */
+const createElement = (iconNode: IconNode, customAttrs: SVGProps = {}) => {
+  const tag = 'svg';
+  const attrs = {
+    ...defaultAttributes,
+    ...customAttrs,
+  };
+
+  return createSVGElement([tag, attrs, iconNode]);
+};
+
 export default createElement;

packages/lucide/src/replaceElement.ts

@@ -98,7 +98,7 @@ const replaceElement = (element: Element, { nameAttr, icons, attrs }: ReplaceEle
     });
   }
 
-  const svgElement = createElement(['svg', iconAttrs, iconNode]);
+  const svgElement = createElement(iconNode, iconAttrs);
 
   return element.parentNode?.replaceChild(svgElement, element);
 };

packages/lucide/tests/__snapshots__/createElement.spec.ts.snap

@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`createElement > should match the snapshot 1`] = `
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="24"
+     height="24"
+     viewbox="0 0 24 24"
+     fill="none"
+     stroke="currentColor"
+     stroke-width="2"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+>
+  <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8">
+  </path>
+  <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">
+  </path>
+</svg>
+`;

packages/lucide/tests/createElement.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect } from 'vitest';
+import { House, createElement } from '../src/lucide';
+import { getOriginalSvg } from './helpers';
+
+describe('createElement', () => {
+  it('should create SVG Element', () => {
+    const HomeSVG = createElement(House);
+
+    expect(HomeSVG.tagName).toBe('svg');
+  });
+
+  it('should match the snapshot', () => {
+    const HomeSVG = createElement(House);
+
+    expect(HomeSVG.outerHTML).toMatchSnapshot();
+  });
+
+  it('should create SVG Element with attributes', () => {
+    const HomeSVG = createElement(House, { fill: 'red' });
+
+    expect(HomeSVG.getAttribute('fill')).toBe('red');
+  });
+
+  it('should create SVG Element with class name', () => {
+    const HomeSVG = createElement(House, { class: 'icon' });
+
+    expect(HomeSVG.getAttribute('class')).toBe('icon');
+  });
+
+  it('should create the correct svg element', () => {
+    const HomeSVG = createElement(House);
+
+    const svg = getOriginalSvg('house', undefined, false);
+
+    expect(HomeSVG.outerHTML).toBe(svg);
+  });
+});

packages/lucide/tests/helpers.ts

@@ -0,0 +1,17 @@
+import fs from 'fs';
+import path from 'path';
+import { parseSync, stringify } from 'svgson';
+
+const ICONS_DIR = path.resolve(__dirname, '../../../icons');
+
+export const getOriginalSvg = (iconName: string, aliasName?: string, setAttrs = true) => {
+  const svgContent = fs.readFileSync(path.join(ICONS_DIR, `${iconName}.svg`), 'utf8');
+  const svgParsed = parseSync(svgContent);
+
+  if (setAttrs) {
+    svgParsed.attributes['data-lucide'] = aliasName ?? iconName;
+    svgParsed.attributes['class'] = `lucide lucide-${aliasName ?? iconName}`;
+  }
+
+  return stringify(svgParsed, { selfClose: false });
+};

packages/lucide/tests/lucide.spec.ts

@@ -1,20 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { createIcons, icons } from '../src/lucide';
-import fs from 'fs';
-import path from 'path';
-import { parseSync, stringify } from 'svgson';
-
-const ICONS_DIR = path.resolve(__dirname, '../../../icons');
-
-const getOriginalSvg = (iconName: string, aliasName?: string) => {
-  const svgContent = fs.readFileSync(path.join(ICONS_DIR, `${iconName}.svg`), 'utf8');
-  const svgParsed = parseSync(svgContent);
-
-  svgParsed.attributes['data-lucide'] = aliasName ?? iconName;
-  svgParsed.attributes['class'] = `lucide lucide-${aliasName ?? iconName}`;
-
-  return stringify(svgParsed, { selfClose: false });
-};
+import { getOriginalSvg } from './helpers';
 
 describe('createIcons', () => {
   it('should read elements from DOM and replace it with icons', () => {

packages/shared/package.json

@@ -13,6 +13,6 @@
     "test:watch": "vitest watch"
   },
   "devDependencies": {
-    "vitest": "^2.1.1"
+    "vitest": "^1.1.1"
   }
 }

scripts/generateChangedIconsCommentMarkup.mjs

@@ -3,6 +3,7 @@ import path from 'path';
 import { parseSync } from 'svgson';
 import {
   shuffleArray,
+  readSvgDirectory,
   getCurrentDirPath,
   minifySvg,
   toPascalCase,
@@ -42,12 +43,13 @@ const getImageTagsByFiles = (files, getBaseUrl, width) =>
     return `<img title="${file}" alt="${file}" ${widthAttr} src="${url}/${base64}.svg"/>`;
   });
 
-const svgFiles = fs.readdirSync(ICONS_DIR).map((file) => `icons/${file}`);
+const svgFiles = await readSvgDirectory(ICONS_DIR);
+const svgFilePaths = svgFiles.map((file) => `icons/${file}`);
 
-const iconsFilteredByName = (search) => svgFiles.filter((file) => file.includes(search));
+const iconsFilteredByName = (search) => svgFilePaths.filter((file) => file.includes(search));
 
 const cohesionRandomImageTags = getImageTagsByFiles(
-  shuffleArray(svgFiles).slice(0, changedFiles.length),
+  shuffleArray(svgFilePaths).slice(0, changedFiles.length),
   () => `${BASE_URL}/stroke-width/2`,
 ).join('');
 

scripts/updateGuidelineIcons.mjs

@@ -0,0 +1,30 @@
+import path from 'path';
+import { readdirSync, readFileSync, writeFileSync } from 'fs';
+
+for (const file of readdirSync(path.join(import.meta.dirname, '../docs/images'))) {
+  if (!file.endsWith('.svg')) continue;
+  const fileName = path.join(import.meta.dirname, '../docs/images', file);
+  const oldFileContent = readFileSync(fileName, 'utf8');
+  const newFileContent = oldFileContent
+    .split('</g>')
+    .map((val) =>
+      val.replace(
+        /(<g id="embed-lucide-([^"]*).*>)(.|\n)*/gm,
+        (_, groupOpeningTag, iconName) =>
+          [
+            groupOpeningTag,
+            ...readFileSync(path.join(import.meta.dirname, `../icons/${iconName}.svg`), 'utf8')
+              .replace(/(<svg)([^>]|\n)*>|<\/svg>/g, '')
+              .split('\n'),
+          ]
+            .map((val) => val.trimEnd())
+            .filter(Boolean)
+            .join('\n') + '\n',
+      ),
+    )
+    .join('</g>');
+  if (oldFileContent !== newFileContent) {
+    console.log(`Updating ${fileName}`);
+    writeFileSync(fileName, newFileContent);
+  }
+}