fix(packages): extract vitest and jsdom to root devDependencies

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

.cspell/custom-words.txt

@@ -9,9 +9,3 @@ strikethrough
 touchpad
 ungroup
 toc
-
-# Brands
-codepen
-codesandbox
-dribbble
-x.com

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -13,16 +13,19 @@ body:
       description: Which Lucide packages are affected? You may select more than one.
       options:
         - label: lucide
-        - label: lucide-angular
+        - label: lucide-angular (old version)
+        - label: '@lucide/angular (new version)'
+        - label: '@lucide/astro'
         - label: lucide-flutter
         - label: lucide-preact
         - label: lucide-react
         - label: lucide-react-native
         - label: lucide-solid
-        - label: lucide-svelte
+        - label: lucide-static
+        - label: lucide-svelte (old version)
+        - label: '@lucide/svelte (new version)'
         - label: lucide-vue
         - label: lucide-vue-next
-        - label: lucide-astro
         - label: Figma plugin
         - label: source/main
         - label: other/not relevant

.github/ISSUE_TEMPLATE/04_feature_request.yml

@@ -13,19 +13,23 @@ 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
+        - label: lucide-angular (old version)
+        - label: '@lucide/angular (new version)'
+        - label: '@lucide/astro'
         - label: lucide-flutter
         - label: lucide-preact
         - label: lucide-react
         - label: lucide-react-native
         - label: lucide-solid
-        - label: lucide-svelte
+        - label: lucide-static
+        - label: lucide-svelte (old version)
+        - label: '@lucide/svelte (new version)'
         - label: lucide-vue
         - label: lucide-vue-next
-        - label: lucide-astro
         - label: Figma plugin
         - label: all JS packages
         - label: site
+        - label: other/not relevant
     validations:
       required: true
   - type: textarea

.github/labeler.yml

@@ -59,6 +59,7 @@
 🅰️ angular package:
   - changed-files:
       - any-glob-to-any-file:
+          - 'packages/angular/*'
           - 'packages/lucide-angular/*'
 
 # For changes in the lucide preact package

.github/workflows/angular.yml

@@ -0,0 +1,41 @@
+name: Lucide Angular checks
+
+on:
+  pull_request:
+    paths:
+      - packages/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/ci.yml

@@ -36,25 +36,19 @@ jobs:
         id: latest-tag
         run: echo "LATEST_TAG=$(git describe --tags `git rev-list --tags --max-count=1`)" >> $GITHUB_OUTPUT
 
+      - name: Log latest tag
+        run: echo '${{ steps.latest-tag.outputs.LATEST_TAG }}'
+
       - name: Check if we can patch
-        run: .github/workflows/version-up.sh --minor
+        run: pnpm semver $LATEST_TAG -i minor
+        env:
+          LATEST_TAG: ${{ steps.latest-tag.outputs.LATEST_TAG }}
 
       - name: Create new version
         id: new-version
-        run: echo "NEW_VERSION=$(.github/workflows/version-up.sh --minor)" >> $GITHUB_OUTPUT
-
-      - name: Create change log
-        id: change-log
-        run: |
-          CHANGE_LOG=$(pnpm run generate:changelog --old-tag=${{ steps.latest-tag.outputs.LATEST_TAG }})
-          CHANGE_LOG=$(tail -n +5 <<< $CHANGE_LOG)
-          echo $CHANGE_LOG
-          EOF=$(dd if=/dev/urandom bs=15 count=1 status=none | base64)
-          echo "CHANGE_LOG<<$EOF" >> $GITHUB_OUTPUT
-          echo "$CHANGE_LOG" >> $GITHUB_OUTPUT
-          echo "$EOF" >> $GITHUB_OUTPUT
+        run: echo "NEW_VERSION=$(pnpm semver $LATEST_TAG -i minor)" >> $GITHUB_OUTPUT
         env:
-          GITHUB_API_KEY: ${{ secrets.GITHUB_TOKEN }}
+          LATEST_TAG: ${{ steps.latest-tag.outputs.LATEST_TAG }}
 
       - name: Check output
         run: |
@@ -68,38 +62,6 @@ jobs:
           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@v6
-
-      - 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'
     needs: create-release

.github/workflows/lucide-vue.yml

@@ -0,0 +1,43 @@
+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@v4
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'pnpm'
+          node-version-file: 'package.json'
+
+      - 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@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'pnpm'
+          node-version-file: 'package.json'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Test
+        run: pnpm --filter @lucide/vue test

.github/workflows/release.yml

@@ -20,7 +20,7 @@ on:
 
 permissions:
   id-token: write # Required for OIDC
-  contents: read
+  contents: write
 
 jobs:
   pre-release:
@@ -58,8 +58,10 @@ jobs:
             'lucide-preact',
             'lucide-solid',
             'lucide-svelte',
+            '@lucide/angular',
             '@lucide/astro',
             '@lucide/svelte',
+            '@lucide/vue',
           ]
     steps:
       - uses: actions/checkout@v6
@@ -72,9 +74,6 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Set Auth Token
-        run: npm config set //registry.npmjs.org/:_authToken ${{ inputs.NPM_TOKEN || secrets.NPM_TOKEN }}
-
       - name: Set new version
         run: pnpm --filter ${{ matrix.package }} version --new-version ${{ needs.pre-release.outputs.VERSION }} --no-git-tag-version
 
@@ -109,9 +108,6 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Set Auth Token
-        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
-
       - name: Set new version
         run: pnpm --filter lucide-static version --new-version ${{ needs.pre-release.outputs.VERSION }} --no-git-tag-version
 
@@ -157,7 +153,9 @@ jobs:
     if: github.repository == 'lucide-icons/lucide'
     runs-on: ubuntu-latest
     needs: [pre-release, lucide-font]
-
+    permissions:
+      id-token: write # Required for OIDC
+      contents: write
     steps:
       - uses: actions/checkout@v6
       - uses: actions/download-artifact@v4

.github/workflows/version-up.sh

@@ -1,284 +0,0 @@
-#!/usr/bin/env bash
-## Copyright (C) 2017, Oleksandr Kucherenko
-## Last revisit: 2017-09-29
-
-## get highest version tag for all branches
-function highest_tag(){
-  local TAG=$(git describe --tags `git rev-list --tags --max-count=1`)
-  echo "$TAG"
-}
-
-## extract current branch name
-function current_branch(){
-  ## expected: heads/{branch_name}
-  ## expected: {branch_name}
-    local BRANCH=$(git rev-parse --abbrev-ref HEAD | cut -d"/" -f2)
-    echo "$BRANCH"
-}
-
-## get latest/head commit hash number
-function head_hash(){
-  local COMMIT_HASH=$(git rev-parse --verify HEAD)
-  echo "$COMMIT_HASH"
-}
-
-## extract tag commit hash code, tag name provided by argument
-function tag_hash(){
-  local TAG_HASH=$(git log -1 --format=format:"%H" $1 2>/dev/null | tail -n1)
-  echo "$TAG_HASH"
-}
-
-## get latest revision number
-function latest_revision(){
-  local REV=$(git rev-list --count HEAD 2>/dev/null)
-  echo "$REV"
-}
-
-## parse last found tag, extract it PARTS
-function parse_last(){
-  local position=$(($1-1))
-
-  # two parts found only
-  local SUBS=( ${PARTS[$position]//-/ } )
-  #echo ${SUBS[@]}, size: ${#SUBS}
-
-  # found NUMBER
-  PARTS[$position]=${SUBS[0]}
-  #echo ${PARTS[@]}
-
-  # found SUFFIX
-  if [[ ${#SUBS} -ge 1 ]]; then
-    PARTS[4]=${SUBS[1],,} #lowercase
-    #echo ${PARTS[@]}, ${SUBS[@]}
-  fi
-}
-
-## increment REVISION part, don't touch STAGE
-function increment_revision(){
-  PARTS[3]=$(( PARTS[3] + 1 ))
-  IS_DIRTY=1
-}
-
-## increment PATCH part, reset all other lower PARTS, don't touch STAGE
-function increment_patch(){
-  PARTS[2]=$(( PARTS[2] + 1 ))
-  PARTS[3]=0
-  IS_DIRTY=1
-}
-
-## increment MINOR part, reset all other lower PARTS, don't touch STAGE
-function increment_minor(){
-    PARTS[1]=$(( PARTS[1] + 1 ))
-    PARTS[2]=0
-    PARTS[3]=0
-    IS_DIRTY=1
-}
-
-## increment MAJOR part, reset all other lower PARTS, don't touch STAGE
-function incremet_major(){
-  PARTS[0]="v$(( PARTS[0] + 1 ))"
-  PARTS[1]=0
-  PARTS[2]=0
-  PARTS[3]=0
-  IS_DIRTY=1
-}
-
-## increment the number only of last found PART: REVISION --> PATCH --> MINOR. don't touch STAGE
-function increment_last_found(){
-  if [[ "${#PARTS[3]}" == 0 || "${PARTS[3]}" == "0" ]]; then
-    if [[ "${#PARTS[2]}" == 0 || "${PARTS[2]}" == "0" ]]; then
-      increment_minor
-    else
-      increment_patch
-    fi
-  else
-    increment_revision
-  fi
-
-  # stage part is not EMPTY
-  if [[ "${#PARTS[4]}" != 0 ]]; then
-    IS_SHIFT=1
-  fi
-}
-
-## compose version from PARTS
-function compose(){
-  MAJOR="${PARTS[0]}"
-  MINOR=".${PARTS[1]}"
-  PATCH=".${PARTS[2]}"
-  REVISION=".${PARTS[3]}"
-  SUFFIX="-${PARTS[4]}"
-
-  if [[ "${#PATCH}" == 1 ]]; then # if empty {PATCH}
-    PATCH=""
-  fi
-
-  if [[ "${#REVISION}" == 1 ]]; then # if empty {REVISION}
-    REVISION=""
-  fi
-
-  if [[ "${PARTS[3]}" == "0" ]]; then # if revision is ZERO
-    REVISION=""
-  fi
-
-  # shrink patch and revision
-  if [[ -z "${REVISION// }" ]]; then
-    if [[ "${PARTS[2]}" == "0" ]]; then
-      PATCH=".0"
-    fi
-  else # revision is not EMPTY
-    if [[ "${#PATCH}" == 0 ]]; then
-      PATCH=".0"
-    fi
-  fi
-
-  # remove suffix if we don't have a alpha/beta/rc
-  if [[ "${#SUFFIX}" == 1 ]]; then
-    SUFFIX=""
-  fi
-
-
-  echo "${MAJOR}${MINOR}${PATCH}${REVISION}${SUFFIX}" #full format
-}
-
-# initial version used for repository without tags
-INIT_VERSION=0.0.0.0-alpha
-
-# do GIT data extracting
-TAG=$(highest_tag)
-REVISION=$(latest_revision)
-BRANCH=$(current_branch)
-TAG_HASH=$(tag_hash $TAG)
-HEAD_HASH=$(head_hash)
-
-# if tag and branch commit hashes are different, than print info about that
-#echo $HEAD_HASH vs $TAG_HASH
-if [[ "$@" == "" ]]; then
-    if [[ "$TAG_HASH" == "$HEAD_HASH" ]]; then
-      echo "Tag $TAG and HEAD are aligned. We will stay on the TAG version."
-      echo ""
-      NO_ARGS_VALUE='--stay'
-    else
-      PATTERN="^[0-9]+.[0-9]+(.[0-9]+)*(-(alpha|beta|rc))*$"
-
-      if [[ "$BRANCH" =~ $PATTERN ]]; then
-        echo "Detected version branch '$BRANCH'. We will auto-increment the last version PART."
-        echo ""
-        NO_ARGS_VALUE='--default'
-      else
-        echo "Detected branch name '$BRANCH' than does not match version pattern. We will increase MINOR."
-        echo ""
-        NO_ARGS_VALUE='--minor'
-      fi
-    fi
-fi
-
-#
-# {MAJOR}.{MINOR}[.{PATCH}[.{REVISION}][-(.*)]
-#
-#  Suffix: alpha, beta, rc
-#    No Suffix --> {NEW_VERSION}-alpha
-#    alpha --> beta
-#    beta --> rc
-#    rc --> {VERSION}
-#
-PARTS=( ${TAG//./ } )
-parse_last ${#PARTS[@]} # array size as argument
-#echo ${PARTS[@]}
-
-# if no parameters than emulate --default parameter
-if [[ "$@" == "" ]]; then
-  set -- $NO_ARGS_VALUE
-fi
-
-# parse input parameters
-for i in "$@"
-do
-  key="$i"
-
-  case $key in
-    -a|--alpha)                 # switched to ALPHA
-    PARTS[4]="alpha"
-    IS_SHIFT=1
-    ;;
-    -b|--beta)                  # switched to BETA
-    PARTS[4]="beta"
-    IS_SHIFT=1
-    ;;
-    -c|--release-candidate)     # switched to RC
-    PARTS[4]="rc"
-    IS_SHIFT=1
-    ;;
-    -r|--release)               # switched to RELEASE
-    PARTS[4]=""
-    IS_SHIFT=1
-    ;;
-    -p|--patch)                 # increment of PATCH
-    increment_patch
-    ;;
-    -e|--revision)              # increment of REVISION
-    increment_revision
-    ;;
-    -g|--git-revision)          # use git revision number as a revision part§
-    PARTS[3]=$(( REVISION ))
-    IS_DIRTY=1
-    ;;
-    -i|--minor)                 # increment of MINOR by default
-    increment_minor
-    ;;
-    --default)                 # stay on the same stage, but increment only last found PART of version code
-    increment_last_found
-    ;;
-    -m|--major)                 # increment of MAJOR
-    incremet_major
-    ;;
-    -s|--stay)                  # extract version info
-    IS_DIRTY=1
-    NO_APPLY_MSG=1
-    ;;
-    -t|--tag-only)                  # extract version info
-    TAG_ONLY=1
-    ;;
-    --apply)
-    DO_APPLY=1
-    ;;
-    -h|--help)
-    help
-    ;;
-  esac
-  shift
-done
-
-# detected shift, but no increment
-if [[ "$IS_SHIFT" == "1" ]]; then
-    # temporary disable stage shift
-    stage=${PARTS[4]}
-    PARTS[4]=''
-
-    # detect first run on repository, INIT_VERSION was used
-    if [[ "$(compose)" == "0.0" ]]; then
-        increment_minor
-    fi
-
-    PARTS[4]=$stage
-fi
-
-# no increment applied yet and no shift of state, do minor increase
-if [[ "$IS_DIRTY$IS_SHIFT" == "" ]]; then
-    increment_minor
-fi
-
-compose
-
-# is proposed tag in conflict with any other TAG
-PROPOSED_HASH=$(tag_hash $(compose))
-if [[ "${#PROPOSED_HASH}" -gt 0 && "$NO_APPLY_MSG" == "" ]]; then
-  echo -e "\033[31mERROR:\033[0m "
-  echo -e "\033[31mERROR:\033[0m Found conflict with existing tag \033[32m$(compose)\033[0m / $PROPOSED_HASH"
-  echo -e "\033[31mERROR:\033[0m Only manual resolving is possible now."
-  echo -e "\033[31mERROR:\033[0m "
-  echo -e "\033[31mERROR:\033[0m To Resolve try to add --revision or --patch modifier."
-  echo -e "\033[31mERROR:\033[0m "
-  echo ""
-  exit 1
-fi

.npmrc

@@ -1 +0,0 @@
-auto-install-peers=true

brand-stopwords.json

@@ -2,6 +2,7 @@
   "adobe": "Adobe",
   "airplay": "AirPlay",
   "amazon": "Amazon",
+  "android": "Android",
   "angular": "Angular",
   "aws": "AWS",
   "azure": "Azure",

categories/brands.json

@@ -1,5 +0,0 @@
-{
-  "$schema": "../category.schema.json",
-  "title": "Brands",
-  "icon": "facebook"
-}

docs/.vitepress/data/categoriesData.json

@@ -15,10 +15,6 @@
     "name": "arrows",
     "title": "Arrows"
   },
-  {
-    "name": "brands",
-    "title": "Brands"
-  },
   {
     "name": "buildings",
     "title": "Buildings"

docs/.vitepress/data/packageData.json

@@ -31,20 +31,12 @@
       }
     ]
   },
-  "lucide-vue-next": {
+  "@lucide/vue": {
     "order": 2,
-    "icon": "vue-next",
+    "icon": "vue",
+    "docsAlias": "lucide-vue",
+    "packageDirname": "vue",
     "shields": [
-      {
-        "alt": "npm",
-        "src": "https://img.shields.io/npm/v/lucide-vue-next",
-        "href": "https://www.npmjs.com/package/lucide-vue-next"
-      },
-      {
-        "alt": "npm",
-        "src": "https://img.shields.io/npm/dw/lucide-vue-next",
-        "href": "https://www.npmjs.com/package/lucide-vue-next"
-      }
     ]
   },
   "lucide-svelte": {
@@ -95,9 +87,25 @@
       }
     ]
   },
-  "lucide-angular": {
+  "@lucide/angular": {
     "order": 6,
     "icon": "angular",
+    "shields": [
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/v/@lucide/angular",
+        "href": "https://www.npmjs.com/package/@lucide/angular"
+      },
+      {
+        "alt": "npm",
+        "src": "https://img.shields.io/npm/dw/@lucide/angular",
+        "href": "https://www.npmjs.com/package/@lucide/angular"
+      }
+    ]
+  },
+  "lucide-angular": {
+    "order": 7,
+    "icon": "angular",
     "shields": [
       {
         "alt": "npm",
@@ -112,7 +120,7 @@
     ]
   },
   "lucide-preact": {
-    "order": 7,
+    "order": 8,
     "icon": "preact",
     "shields": [
       {
@@ -130,7 +138,7 @@
   "@lucide/astro": {
     "docsAlias": "lucide-astro",
     "packageDirname": "astro",
-    "order": 8,
+    "order": 9,
     "icon": "astro",
     "iconDark": "astro-dark",
     "shields": [
@@ -147,7 +155,7 @@
     ]
   },
   "lucide-static": {
-    "order": 9,
+    "order": 10,
     "icon": "svg",
     "shields": [
       {

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

@@ -9,14 +9,20 @@ type CodeExampleType = {
 const getIconCodes = (): CodeExampleType => {
   return [
     {
-      language: 'js',
+      language: 'html',
       title: 'Vanilla',
       code: `\
-import { createIcons, icons } from 'lucide';
+<script>
+import { createIcons, $CamelCase } from 'lucide';
 
-createIcons({ icons });
+createIcons({
+  icons: {
+    $CamelCase
+  }
+});
+</script>
 
-document.body.append('<i data-lucide="$Name"></i>');\
+<i data-lucide="$Name"></i>\
   `,
     },
     {
@@ -37,7 +43,7 @@ export default App;
       language: 'vue',
       title: 'Vue',
       code: `<script setup>
-import { $PascalCase } from 'lucide-vue-next';
+import { $PascalCase } from '@lucide/vue';
 </script>
 
 <template>

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

@@ -10,10 +10,11 @@ type CodeExampleType = {
 const getIconCodes = (): CodeExampleType => {
   return [
     {
-      language: 'js',
+      language: 'html',
       title: 'Vanilla',
       code: `\
-import { createIcons, icons } from 'lucide';
+<script>
+import { createIcons } from 'lucide';
 import { $CamelCase } from '@lucide/lab';
 
 createIcons({
@@ -21,8 +22,9 @@ createIcons({
     $CamelCase
   }
 });
+</script>
 
-document.body.append('<i data-lucide="$Name"></i>');\
+<i data-lucide="$Name"></i>\
   `,
     },
     {

docs/.vitepress/lib/getFallbackZip.tsx

@@ -1,5 +1,5 @@
 import { createLucideIcon } from 'lucide-react/src/lucide-react';
-import { type LucideProps, type IconNode } from 'lucide-react/src/createLucideIcon';
+import { type LucideProps, type IconNode } from 'lucide-react/src/types';
 import { IconEntity } from '../theme/types';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { IconContent } from './generateZip';

docs/.vitepress/sidebar.ts

@@ -69,39 +69,39 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
           link: '/guide/packages/lucide',
         },
         {
-          text: 'Lucide React',
+          text: 'React',
           link: '/guide/packages/lucide-react',
         },
         {
-          text: 'Lucide Vue',
-          link: '/guide/packages/lucide-vue-next',
+          text: 'Vue',
+          link: '/guide/packages/lucide-vue',
         },
         {
-          text: 'Lucide Svelte',
+          text: 'Svelte',
           link: '/guide/packages/lucide-svelte',
         },
         {
-          text: 'Lucide Solid',
+          text: 'Solid',
           link: '/guide/packages/lucide-solid',
         },
         {
-          text: 'Lucide React Native',
+          text: 'React Native',
           link: '/guide/packages/lucide-react-native',
         },
         {
-          text: 'Lucide Angular',
-          link: '/guide/packages/lucide-angular',
+          text: 'Angular',
+          link: '/guide/packages/angular',
         },
         {
-          text: 'Lucide Preact',
+          text: 'Preact',
           link: '/guide/packages/lucide-preact',
         },
         {
-          text: 'Lucide Astro',
+          text: 'Astro',
           link: '/guide/packages/lucide-astro',
         },
         {
-          text: 'Lucide Static',
+          text: 'Static',
           link: '/guide/packages/lucide-static',
         },
       ],

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

@@ -1,23 +1,31 @@
 <script setup lang="ts">
+import { useData } from 'vitepress';
 import { computed } from 'vue';
 
 const props = defineProps<{
-  modelValue: string
-  id: string
-}>()
+  modelValue: string;
+  id: string;
+}>();
 
-const emit = defineEmits(['update:modelValue'])
+const { isDark } = useData();
+
+const emit = defineEmits(['update:modelValue']);
 
 const value = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+  get: () => {
+    if (props.modelValue == null || props.modelValue === 'currentColor') {
+      return isDark.value ? '#ffffff' : '#000000';
+    }
+
+    return props.modelValue;
+  },
+  set: (val) => emit('update:modelValue', val),
+});
 </script>
 
 <template>
   <div class="color-picker">
     <div class="color-input-wrapper">
-      <!-- TODO: Add currentColor div if value is currentColor -->
       <input
         type="color"
         :id="id"
@@ -33,6 +41,7 @@ const value = computed({
       class="color-input-text"
       aria-label="Color picker input"
       v-model="value"
+      placeholder="[default]"
     />
   </div>
 </template>
@@ -45,27 +54,33 @@ const value = computed({
   top: -5px;
   left: -5px;
 }
+
 .color-input-wrapper {
   height: 24px;
   width: 24px;
   overflow: hidden;
   position: relative;
-  border-radius: 12px;
+  border-radius: 4px;
   flex-shrink: 0;
 }
+
 .color-picker {
   background: var(--color-picker-bg, var(--vp-c-bg-alt));
   border-radius: 8px;
   color: var(--vp-c-text-2);
-  padding: 4px 8px;
+  padding: 3px 8px 3px 3px;
   height: auto;
-  font-size: 14px;
+  font-size: 13px;
   text-align: left;
   border: 1px solid transparent;
   cursor: text;
   display: flex;
   align-items: center;
   gap: 2px;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }
 
 .color-input-text {
@@ -75,19 +90,22 @@ const value = computed({
   border: none;
   background: transparent;
   color: var(--vp-c-text-1);
-  font-size: 14px;
+  font-size: 13px;
   text-align: left;
   border-radius: 8px;
   cursor: text;
-  transition: border-color 0.25s, background 0.4s ease;
+  transition:
+    border-color 0.25s,
+    background 0.4s ease;
+  letter-spacing: 1px;
 }
 
-.color-picker:hover, .color-picker:focus {
+.color-picker:hover,
+.color-picker:focus {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-bg-alt);
 }
 
-.color-input[value="currentColor"] {
-
+.color-input[value='currentColor'] {
 }
 </style>

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

@@ -1,22 +1,27 @@
 <script setup>
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
-import { search }  from '../../../data/iconNodes'
-
-const SearchIcon = createLucideIcon('search', search)
+import Icon from 'lucide-vue-next/src/Icon';
+import { search } from '../../../data/iconNodes';
 
 defineProps({
   shortcut: {
     type: String,
-    required: false
-  }
-})
+    required: false,
+  },
+});
 </script>
 
 <template>
   <button class="fake-input">
-    <component :is="SearchIcon" class="search-icon"/>
+    <Icon
+      :iconNode="search"
+      class="search-icon"
+    />
     <slot />
-    <kbd v-if="shortcut" class="shortcut">{{ shortcut }}</kbd>
+    <kbd
+      v-if="shortcut"
+      class="shortcut"
+      >{{ shortcut }}</kbd
+    >
   </button>
 </template>
 
@@ -34,10 +39,14 @@ defineProps({
   cursor: text;
   display: flex;
   gap: 12px;
-  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }
 
-.fake-input:hover, .fake-input:focus {
+.fake-input:hover,
+.fake-input:focus {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-bg-alt);
 }

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

@@ -5,7 +5,6 @@
 </template>
 
 <style scoped>
-
 .icon-button {
   display: inline-flex;
   border: 1px solid transparent;

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

@@ -1,50 +1,64 @@
 <script lang="ts">
 export default {
   inheritAttrs: false,
-}
+};
 
 export interface InputProps {
-  type: string
-  modelValue: string
-  shortcut?: string
+  type: string;
+  modelValue: string;
+  shortcut?: string;
 }
 </script>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, watch } from 'vue'
+import { ref, onMounted, nextTick, watch } from 'vue';
+import Icon from 'lucide-vue-next/src/Icon';
+import { x } from '../../../data/iconNodes';
+import IconButton from './IconButton.vue';
 
 const props = withDefaults(defineProps<InputProps>(), {
-  type: 'text'
-})
+  type: 'text',
+});
 
-const input = ref()
-const wrapperEl = ref()
-const shortcutEl = ref()
+const input = ref();
+const wrapperEl = ref();
+const shortcutEl = ref();
 
-defineEmits(['change', 'input', 'update:modelValue'])
+const emit = defineEmits(['change', 'input', 'update:modelValue']);
 
 const updateShortcutSpacing = () => {
   nextTick(() => {
     if (shortcutEl.value && wrapperEl.value) {
-      const shortcutWidth = shortcutEl.value.offsetWidth
-      wrapperEl.value.style.setProperty('--shortcut-width', `${shortcutWidth}px`)
-    }
-  })
+      const shortcutWidth = shortcutEl.value.offsetWidth;
+      wrapperEl.value.style.setProperty('--shortcut-width', `${shortcutWidth}px`);
     }
+  });
+};
 
-onMounted(updateShortcutSpacing)
-watch(() => props.shortcut, updateShortcutSpacing)
+onMounted(updateShortcutSpacing);
+watch(() => props.shortcut, updateShortcutSpacing);
+
+function onClear() {
+  emit('update:modelValue', '');
+  input.value.focus();
+}
 
 defineExpose({
   focus: () => {
-    input.value.focus()
-  }
-})
+    input.value.focus();
+  },
+});
 </script>
 
 <template>
-  <div class="input-wrapper" ref="wrapperEl">
-    <slot name="icon" class="icon" />
+  <div
+    class="input-wrapper"
+    ref="wrapperEl"
+  >
+    <slot
+      name="icon"
+      class="icon"
+    />
     <input
       :type="type"
       class="input"
@@ -54,7 +68,23 @@ defineExpose({
       v-bind="$attrs"
       @input="$emit('update:modelValue', $event.target.value)"
     />
-    <kbd v-if="shortcut" class="shortcut" ref="shortcutEl">{{ shortcut }}</kbd>
+    <IconButton
+      @click="onClear"
+      v-if="type === 'search' && modelValue"
+      class="clear-button"
+      aria-label="Clear input"
+    >
+      <Icon
+        :iconNode="x"
+        :size="20"
+      />
+    </IconButton>
+    <kbd
+      v-if="shortcut"
+      class="shortcut"
+      ref="shortcutEl"
+      >{{ shortcut }}</kbd
+    >
   </div>
 </template>
 
@@ -62,6 +92,7 @@ defineExpose({
 .input-wrapper {
   position: relative;
 }
+
 .input {
   justify-content: flex-start;
   border: 1px solid transparent;
@@ -71,13 +102,18 @@ defineExpose({
   height: 40px;
   background-color: var(--vp-c-bg-alt);
   font-size: 14px;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }
 
 .input.has-shortcut {
   padding-right: calc(var(--shortcut-width, 40px) + 22px);
 }
 
-.input:hover, .input:focus {
+.input:hover,
+.input:focus {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-bg-alt);
 }
@@ -86,6 +122,14 @@ defineExpose({
   padding-left: 52px;
 }
 
+.clear-button {
+  position: absolute;
+  right: 56px;
+  top: 9px;
+  padding: 4px;
+  transition: background-color .25s;
+}
+
 .shortcut {
   position: absolute;
   right: 12px;
@@ -111,7 +155,7 @@ defineExpose({
 </style>
 
 <style>
-.input-wrapper svg {
+.input-wrapper > svg {
   position: absolute;
   left: 16px;
   top: 12px;

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

@@ -1,38 +1,36 @@
 <script lang="ts">
 export default {
   inheritAttrs: false,
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import Input from './Input.vue'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
-import { search }  from '../../../data/iconNodes'
-
-const SearchIcon = createLucideIcon('search', search)
+import { computed, ref } from 'vue';
+import Input from './Input.vue';
+import Icon from 'lucide-vue-next/src/Icon';
+import { search } from '../../../data/iconNodes';
 
 interface Props {
-  modelValue: string
-  shortcut?: string
+  modelValue: string;
+  shortcut?: string;
 }
 
-const props = defineProps<Props>()
+const props = defineProps<Props>();
 
-const input = ref()
+const input = ref();
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue']);
 
 defineExpose({
   focus: () => {
-    input.value.focus()
-  }
-})
+    input.value.focus();
+  },
+});
 
 const value = computed({
   get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
-})
+  set: (val) => emit('update:modelValue', val),
+});
 </script>
 
 <template>
@@ -46,7 +44,10 @@ const value = computed({
     class="input-wrapper"
   >
     <template #icon>
-      <component :is="SearchIcon" class="search-icon" />
+      <Icon
+        :iconNode="search"
+        class="search-icon"
+      />
     </template>
   </Input>
 </template>
@@ -62,7 +63,8 @@ const value = computed({
   background-color: var(--vp-c-bg-alt);
 }
 
-.input:hover, .input:focus {
+.input:hover,
+.input:focus {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-bg-alt);
 }

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

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { rotateCw } from '../../../data/iconNodes'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
-import IconButton from "./IconButton.vue";
-
-const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
+import { rotateCw } from '../../../data/iconNodes';
+import Icon from 'lucide-vue-next/src/Icon';
+import IconButton from './IconButton.vue';
 </script>
 
 <template>
   <IconButton class="reset-button">
-    <RotateIcon :size="20"/>
+    <Icon
+      :size="20"
+      :iconNode="rotateCw"
+    />
   </IconButton>
 </template>
 
@@ -32,6 +33,7 @@ const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(359deg);
   }

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

@@ -13,27 +13,27 @@ export default {
           label: 'Lucide documentation for React',
         },
         {
-          name: 'lucide-vue-next',
+          name: 'lucide-vue',
           logo: '/framework-logos/vue.svg',
-          label: 'Lucide documentation for Vue 3',
+          label: 'Lucide documentation for Vue',
         },
         {
           name: 'lucide-svelte',
           logo: '/framework-logos/svelte.svg',
           label: 'Lucide documentation for Svelte',
         },
-        {
-          name: 'lucide-preact',
-          logo: '/framework-logos/preact.svg',
-          label: 'Lucide documentation for Preact',
-        },
         {
           name: 'lucide-solid',
           logo: '/framework-logos/solid.svg',
           label: 'Lucide documentation for Solid',
         },
         {
-          name: 'lucide-angular',
+          name: 'lucide-preact',
+          logo: '/framework-logos/preact.svg',
+          label: 'Lucide documentation for Preact',
+        },
+        {
+          name: 'angular',
           logo: '/framework-logos/angular.svg',
           label: 'Lucide documentation for Angular',
         },
@@ -48,11 +48,6 @@ export default {
           logo: '/framework-logos/react-native.svg',
           label: 'Lucide documentation for React Native',
         },
-        {
-          name: 'lucide-flutter',
-          logo: '/framework-logos/flutter.svg',
-          label: 'Lucide documentation for Flutter',
-        },
       ],
     };
   },

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

@@ -2,45 +2,48 @@
 import { useData } from 'vitepress';
 import { useSessionStorage } from '@vueuse/core';
 import IconButton from '../base/IconButton.vue';
-import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
-import { x } from '../../../data/iconNodes'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue';
+import { x } from '../../../data/iconNodes';
+import Icon from 'lucide-vue-next/src/Icon';
 import { onMounted, ref } from 'vue';
 
-const { theme } = useData()
-const showAd = useSessionStorage('show-carbon-ads', true)
-const carbonLoaded = ref(true)
+const { theme } = useData();
+const showAd = useSessionStorage('show-carbon-ads', true);
+const carbonLoaded = ref(true);
 
 defineProps<{
-  drawerOpen: boolean
-}>()
-
-const CloseIcon = createLucideIcon('Close', x)
+  drawerOpen: boolean;
+}>();
 
 onMounted(() => {
   setTimeout(() => {
     if (window?._carbonads == null) {
-      carbonLoaded.value = false
+      carbonLoaded.value = false;
     }
-  }, 5000)
-})
+  }, 5000);
+});
 </script>
 
 <template>
   <div
     :class="{
       'drawer-open': drawerOpen,
-      'hide-ad': !(showAd && carbonLoaded)
+      'hide-ad': !(showAd && carbonLoaded),
     }"
     class="floating-ad"
     v-if="theme.carbonAds"
   >
-    <IconButton @click="showAd = false" class="hide-button">
-      <component :is="CloseIcon" :size="20" absoluteStrokeWidth />
-    </IconButton>
-    <VPDocAsideCarbonAds
-      :carbon-ads="theme.carbonAds"
+    <IconButton
+      @click="showAd = false"
+      class="hide-button"
+    >
+      <Icon
+        :iconNode="x"
+        :size="20"
+        absoluteStrokeWidth
       />
+    </IconButton>
+    <VPDocAsideCarbonAds :carbon-ads="theme.carbonAds" />
   </div>
 </template>
 
@@ -51,7 +54,9 @@ onMounted(() => {
   bottom: 32px;
   width: 224px;
   right: 32px;
-  transition: opacity 0.5s, transform 0.25s ease;
+  transition:
+    opacity 0.5s,
+    transform 0.25s ease;
 }
 
 .floating-ad.drawer-open {
@@ -67,8 +72,11 @@ onMounted(() => {
   transform: translateY(-288px) translateX(224px);
 }
 
-.floating-ad.drawer-open, .floating-ad.hide-ad {
-  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+.floating-ad.drawer-open,
+.floating-ad.hide-ad {
+  transition:
+    opacity 0.25s,
+    transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
 @media (min-width: 1280px) {

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

@@ -1,70 +1,68 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import ButtonMenu from '../base/ButtonMenu.vue'
+import ButtonMenu from '../base/ButtonMenu.vue';
 import { useIconStyleContext } from '../../composables/useIconStyle';
 import useConfetti from '../../composables/useConfetti';
 import getSVGIcon from '../../utils/getSVGIcon';
 import downloadData from '../../utils/downloadData';
 
-const downloadText = 'Download!'
-const copiedText = 'Copied!'
-const confettiText = ref(copiedText)
+const downloadText = 'Download!';
+const copiedText = 'Copied!';
+const confettiText = ref(copiedText);
 const props = defineProps<{
-  name: string
-  popoverPosition?: 'top' | 'bottom'
-}>()
+  name: string;
+  popoverPosition?: 'top' | 'bottom';
+}>();
 
-const { size } = useIconStyleContext()
+const { size } = useIconStyleContext();
 
-const { animate, confetti } = useConfetti()
+const { animate, confetti } = useConfetti();
 
 function copySVG() {
-  confettiText.value = copiedText
-  const svgString = getSVGIcon()
+  confettiText.value = copiedText;
+  const svgString = getSVGIcon();
 
-  navigator.clipboard.writeText(svgString)
+  navigator.clipboard.writeText(svgString);
 
-  confetti()
+  confetti();
 }
 
 function copyDataUrl() {
-  confettiText.value = copiedText
-  const svgString = getSVGIcon()
+  confettiText.value = copiedText;
+  const svgString = getSVGIcon();
 
   // Create SVG data url
-  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`
-  navigator.clipboard.writeText(dataUrl)
+  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
+  navigator.clipboard.writeText(dataUrl);
 
-  confetti()
+  confetti();
 }
 
 function downloadSVG() {
-  confettiText.value = downloadText
-  const svgString = getSVGIcon()
+  confettiText.value = downloadText;
+  const svgString = getSVGIcon();
 
-  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`)
-  confetti()
+  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`);
+  confetti();
 }
 
 function downloadPNG() {
-  confettiText.value = downloadText
-  const svgString = getSVGIcon()
+  confettiText.value = downloadText;
+  const svgString = getSVGIcon();
 
   const canvas = document.createElement('canvas');
   canvas.width = size.value;
   canvas.height = size.value;
-  const ctx = canvas.getContext("2d");
+  const ctx = canvas.getContext('2d');
 
   const image = new Image();
   image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;
   image.onload = function () {
     ctx.drawImage(image, 0, 0);
-    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'))
-    confetti()
+    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'));
+    confetti();
+  };
 }
-}
-
-
 </script>
 
 <template>

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

@@ -1,20 +1,18 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
-import { copy }  from '../../../data/iconNodes'
+import { copy } from '../../../data/iconNodes';
 import useConfetti from '../../composables/useConfetti';
-const { animate, confetti } = useConfetti()
-const slots = useSlots()
+import Icon from 'lucide-vue-next/src/Icon';
+const { animate, confetti } = useConfetti();
+const slots = useSlots();
 
-const copiedText = computed(() => slots.default?.()[0].children)
+const copiedText = computed(() => slots.default?.()[0].children);
 
 function copyText() {
-  navigator.clipboard.writeText(copiedText.value)
+  navigator.clipboard.writeText(copiedText.value);
 
-  confetti()
+  confetti();
 }
-
-const Copy = createLucideIcon('ChevronUp', copy)
 </script>
 
 <template>
@@ -25,17 +23,22 @@ const Copy = createLucideIcon('ChevronUp', copy)
     @click="copyText"
   >
     <slot />
-    <Copy :size="20" class="copy-icon"/>
+    <Icon
+      :iconNode="copy"
+      :size="20"
+      class="copy-icon"
+    />
   </h1>
 </template>
 
 <style scoped>
 @import './confetti.css';
+
 .icon-name {
   font-size: 24px;
   font-weight: 500;
   line-height: 32px;
-  transition: background ease-in .15s;;
+  transition: background ease-in 0.15s;
   padding: 2px 8px;
   border-radius: 8px;
   width: auto;
@@ -48,7 +51,7 @@ const Copy = createLucideIcon('ChevronUp', copy)
 }
 
 .icon-name:hover .copy-icon {
-  opacity: .9;
+  opacity: 0.9;
 }
 
 .icon-name:before,
@@ -65,10 +68,10 @@ const Copy = createLucideIcon('ChevronUp', copy)
   opacity: 0;
   margin-left: 12px;
   margin-top: 6px;
-  transition:ease .3s opacity;
+  transition: ease 0.3s opacity;
 }
 
 .icon-name:hover .copy-icon:hover {
-  opacity: .6;
+  opacity: 0.6;
 }
 </style>

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

@@ -29,7 +29,12 @@ const props = defineProps<{
 
 const iconComponent = computed(() => {
   if (!props.name || !props.iconNode) return null;
+  try {
     return createLucideIcon(props.name, props.iconNode);
+  } catch (error) {
+    console.warn(`Icon ${props.name} not found, using fallback`);
+    return null;
+  }
 });
 
 const CalendarIcon = createLucideIcon('calendar', Calendar.iconNode);
@@ -61,7 +66,7 @@ const prettyName = props.name
 </script>
 
 <template>
-  <section class="showcase">
+  <section class="showcase" v-if="iconComponent">
     <h2 class="title">See this icon in action</h2>
     <div class="showcase-grid">
       <div class="showcase-item column">

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

@@ -1,75 +1,72 @@
 <script setup lang="ts">
-import { shallowRef, type Ref, watch, computed } from 'vue'
-import { useCssVar, syncRef } from '@vueuse/core'
-import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle'
-import RangeSlider from '../base/RangeSlider.vue'
-import InputField from '../base/InputField.vue'
-import ColorPicker from '../base/ColorPicker.vue'
-import ResetButton from '../base/ResetButton.vue'
-import Switch from '../base/Switch.vue'
+import { shallowRef, type Ref, watch, computed } from 'vue';
+import { useCssVar, syncRef } from '@vueuse/core';
+import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle';
+import RangeSlider from '../base/RangeSlider.vue';
+import InputField from '../base/InputField.vue';
+import ColorPicker from '../base/ColorPicker.vue';
+import ResetButton from '../base/ResetButton.vue';
+import Switch from '../base/Switch.vue';
 
 const props = defineProps<{
-  rootEl?: Ref<HTMLElement>
-}>()
+  rootEl?: Ref<HTMLElement>;
+}>();
 
-const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext()
-const documentRef = shallowRef<HTMLElement | undefined>(typeof document !== 'undefined' ? document?.documentElement : undefined)
+const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext();
+const documentRef = shallowRef<HTMLElement | undefined>(
+  typeof document !== 'undefined' ? document?.documentElement : undefined,
+);
 
-const colorCssVar = useCssVar(
-  '--customize-color',
-  props.rootEl?.value ?? documentRef.value,
-  {
-    initialValue: `${STYLE_DEFAULTS.color}`
-  }
-)
+const colorCssVar = useCssVar('--customize-color', props.rootEl?.value ?? documentRef.value, {
+  initialValue: `${STYLE_DEFAULTS.color}`,
+});
 
 const strokeWidthCssVar = useCssVar(
   '--customize-strokeWidth',
   props.rootEl?.value ?? documentRef.value,
   {
-    initialValue: `${STYLE_DEFAULTS.strokeWidth}`
-  }
-)
+    initialValue: `${STYLE_DEFAULTS.strokeWidth}`,
+  },
+);
 
-const sizeCssVar = useCssVar(
-  '--customize-size',
-  props.rootEl?.value ?? documentRef.value,
-  {
-    initialValue: `${STYLE_DEFAULTS.size}`
-  }
-)
+const sizeCssVar = useCssVar('--customize-size', props.rootEl?.value ?? documentRef.value, {
+  initialValue: `${STYLE_DEFAULTS.size}`,
+});
 
-syncRef(color, colorCssVar, { direction: 'ltr' })
-syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' })
-syncRef(size, sizeCssVar, { direction: 'ltr' })
+syncRef(color, colorCssVar, { direction: 'ltr' });
+syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' });
+syncRef(size, sizeCssVar, { direction: 'ltr' });
 
 function resetStyle() {
-  color.value = STYLE_DEFAULTS.color
-  strokeWidth.value = STYLE_DEFAULTS.strokeWidth
-  size.value = STYLE_DEFAULTS.size
-  absoluteStrokeWidth.value = STYLE_DEFAULTS.absoluteStrokeWidth
+  color.value = STYLE_DEFAULTS.color;
+  strokeWidth.value = STYLE_DEFAULTS.strokeWidth;
+  size.value = STYLE_DEFAULTS.size;
+  absoluteStrokeWidth.value = STYLE_DEFAULTS.absoluteStrokeWidth;
 }
 
 watch(absoluteStrokeWidth, (enabled) => {
-  const htmlEl = document.documentElement
+  const htmlEl = document.documentElement;
 
-  htmlEl.classList.toggle('absolute-stroke-width', enabled)
-})
+  htmlEl.classList.toggle('absolute-stroke-width', enabled);
+});
 
 const customizingActive = computed(() => {
-  return color.value !== STYLE_DEFAULTS.color
-    || strokeWidth.value !== STYLE_DEFAULTS.strokeWidth
-    || size.value !== STYLE_DEFAULTS.size
-    || absoluteStrokeWidth.value !== STYLE_DEFAULTS.absoluteStrokeWidth
-})
+  return (
+    color.value !== STYLE_DEFAULTS.color ||
+    strokeWidth.value !== STYLE_DEFAULTS.strokeWidth ||
+    size.value !== STYLE_DEFAULTS.size ||
+    absoluteStrokeWidth.value !== STYLE_DEFAULTS.absoluteStrokeWidth
+  );
+});
 </script>
 
 <template>
-  <div class="customizer-card" :class="{ customized: customizingActive }">
+  <div
+    class="customizer-card"
+    :class="{ customized: customizingActive }"
+  >
     <div class="card-header">
-      <h2 class="card-title">
-        Customizer
-      </h2>
+      <h2 class="card-title">Customizer</h2>
       <ResetButton @click="resetStyle"></ResetButton>
     </div>
     <InputField
@@ -77,7 +74,11 @@ const customizingActive = computed(() => {
       label="Color"
     >
       <template #display>
-        <ColorPicker v-model="color" id="icon-color" class="color-picker"/>
+        <ColorPicker
+          v-model="color"
+          id="icon-color"
+          class="color-picker"
+        />
       </template>
     </InputField>
 
@@ -117,7 +118,7 @@ const customizingActive = computed(() => {
 
     <InputField
       id="absolute-stroke-width"
-      label="Absolute Stroke width"
+      label="Absolute stroke width"
     >
       <Switch
         id="absolute-stroke-width"
@@ -143,6 +144,7 @@ const customizingActive = computed(() => {
   font-size: 16px;
   /* margin-bottom: 12px; */
 }
+
 .customizer-card {
   background: var(--vp-c-bg);
   padding: 12px 24px 24px;
@@ -151,7 +153,7 @@ const customizingActive = computed(() => {
   position: relative;
   z-index: 0;
   border: 1px solid transparent;
-  transition: border-color .4s ease-in-out;
+  transition: border-color 0.4s ease-in-out;
 }
 
 .customizer-card.customized {

docs/.vitepress/theme/utils/useSearchPlaceholder.ts

@@ -29,7 +29,7 @@ export default function useSearchPlaceholder(
         }
       }
       state.value = {
-        isNoResults: query in BRAND_STOPWORDS || (searchResults.length === 0 && query !== ''),
+        isNoResults: query in BRAND_STOPWORDS && searchResults.length === 0 && query !== '',
         isBrand: query in BRAND_STOPWORDS,
         query: BRAND_STOPWORDS[query] ?? query,
       };

docs/.vitepress/types.d.ts

@@ -1,4 +1,4 @@
-import { IconNode } from 'lucide-vue-next/src/createLucideIcon';
+import { type IconNode } from 'lucide-vue-next/src/types';
 import Vue from 'vue';
 
 declare module '*.vue' {
@@ -20,5 +20,6 @@ declare module 'node:module' {
 }
 
 declare module '*.node.json' {
-  export default IconNode;
+  const value: IconNode;
+  export default value;
 }

docs/guide/index.md

@@ -29,7 +29,7 @@ However, not everyone can understand them easily. Read more about [how to use Lu
 
 ## Official Packages
 
-Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
+Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/angular), [Astro](https://lucide.dev/guide/packages/lucide-astro), and [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs).
 
 ## Community
 

docs/guide/installation.md

@@ -64,25 +64,24 @@ Implementation of the lucide icon library for Vue applications.
 ::: code-group
 
 ```sh [pnpm]
-pnpm add lucide-vue-next
+pnpm add @lucide/vue
 ```
 
 ```sh [yarn]
-yarn add lucide-vue-next
+yarn add @lucide/vue
 ```
 
 ```sh [npm]
-npm install lucide-vue-next
+npm install @lucide/vue
 ```
 
 ```sh [bun]
-bun add lucide-vue-next
+bun add @lucide/vue
 ```
 
 :::
 
-For more details, see the [documentation](packages/lucide-vue-next.md).
-For Vue 2 use the `lucide-vue` package.
+For more details, see the [documentation](packages/lucide-vue.md).
 
 ## Svelte
 
@@ -91,22 +90,22 @@ Implementation of the lucide icon library for Svelte applications.
 ::: code-group
 
 ```sh [pnpm]
-pnpm add lucide-svelte
+pnpm add @lucide/svelte
 ```
 
 ```sh [yarn]
-yarn add lucide-svelte
+yarn add @lucide/svelte
 ```
 
 ```sh [npm]
-npm install lucide-svelte
+npm install @lucide/svelte
 ```
 
 ```sh [bun]
-bun add lucide-svelte
+bun add @lucide/svelte
 ```
-
 :::
+> `@lucide/svelte` is only for Svelte 5, for Svelte 4 use the `lucide-svelte` package.
 
 For more details, see the [documentation](packages/lucide-svelte.md).
 

docs/guide/packages/angular.md

@@ -0,0 +1,277 @@
+# `@lucide/angular`
+
+::: warning
+This documentation is for `@lucide/angular`.
+
+To learn about our legacy package for Angular, please refer to [`lucide-angular`](./lucide-angular).
+:::
+
+A standalone, signal-based, zoneless implementation of Lucide icons for Angular.
+
+**What you can accomplish:**
+- Use icons as standalone Angular components with full dependency injection support
+- Configure icons globally through modern Angular providers
+- Integrate with Angular's reactive forms and data binding
+- Build scalable applications with tree-shaken icons and lazy loading support
+
+## Prerequisites
+
+This package requires Angular 17+ and uses standalone components, signals, and zoneless change detection.
+
+## Installation
+
+::: code-group
+
+```sh [pnpm]
+pnpm add @lucide/angular
+```
+
+```sh [yarn]
+yarn add @lucide/angular
+```
+
+```sh [npm]
+npm install @lucide/angular
+```
+
+```sh [bun]
+bun add @lucide/angular
+```
+
+:::
+
+## How to use
+
+### Standalone icons
+
+Every icon can be imported as a ready-to-use standalone component:
+
+```html
+<svg lucideFileText></svg>
+```
+
+```ts{2,7}
+import { Component } from '@angular/core';
+import { LucideFileText } from '@lucide/angular';
+
+@Component({
+  selector: 'app-foobar',
+  templateUrl: './foobar.html',
+  imports: [LucideFileText],
+})
+export class Foobar { }
+```
+
+::: tip
+Standalone icon components use the selector `svg[lucide{PascalCaseIconName}]`.
+
+This ensures minimal bloating of the DOM and the ability to directly manipulate all attributes of the resulting SVG element.
+:::
+
+### Dynamic icon component
+
+You may also use the dynamic `LucideIcon` component to dynamically render icons.
+
+#### With tree-shaken imports
+
+You may pass imported icons directly to the component:
+
+```html{3}
+@for (item of items) {
+  <a navbarItem [routerLink]="item.routerLink">
+    <svg [lucideIcon]="item.icon"></svg>
+    {{ item.title }}
+  </a>
+}
+```
+
+```ts{2,8,14,19}
+import { Component } from '@angular/core';
+import { LucideIcon, LucideHouse, LucideUsersRound } from '@lucide/angular';
+import { NavbarItem, NavbarItemModel } from './navbar-item';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.html',
+  imports: [LucideIcon, NavbarItem],
+})
+export class Navbar {
+  readonly items: NavbarItemModel[] = [
+    {
+      title: 'Home',
+      icon: LucideHouse,
+      routerLink: [''],
+    },
+    {
+      title: 'Users',
+      icon: LucideUsersRound,
+      routerLink: ['admin/users'],
+    },
+  ];
+}
+```
+
+#### With icons provided via dependency injection
+
+Alternatively, the component also accepts string inputs.
+
+To use icons this way, first, you have to provide icons via `provideLucideIcons`:
+
+:::code-group
+```ts{7-10} [app.config.ts]
+import { ApplicationConfig } from '@angular/core';
+import { provideLucideIcons, LucideCircleCheck, LucideCircleX } from '@lucide/angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideLucideIcons([
+      LucideCircleCheck,
+      LucideCircleX,
+    ]),
+  ]
+};
+```
+
+```html [foobar.html]
+<svg lucideIcon="circle-check"></svg>
+```
+
+```ts{7} [foobar.ts]
+import { Component } from '@angular/core';
+import { LucideIcon } from '@lucide/angular';
+
+@Component({
+  selector: 'app-foobar',
+  templateUrl: './template-url',
+  imports: [LucideIcon],
+})
+export class Foobar { }
+```
+:::
+
+::: tip
+For optimal bundle size, provide icons at the highest appropriate level in your application.
+
+Providing all icons at the root level may increase your initial bundle size, while providing them at feature module level enables better code splitting.
+:::
+
+::: warning
+While you may provide your icons at any level of the dependency injection tree, be aware that [Angular's DI system is hierarchical](https://angular.dev/guide/di/defining-dependency-providers#injector-hierarchy-in-angular): `LucideIcon` will only have access to the icons provided closest to it in the tree.
+:::
+
+## Accessible labels
+
+You can use the `title` input property to set the [accessible name element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/title) on the SVG:
+
+```html
+<svg lucideIcon="house" title="Go to dashboard"></svg>
+```
+
+This will result in the following output:
+
+```html{2}
+<svg class="lucide lucide-house" ...>
+  <title>Go to dashboard</title>
+  <!-- SVG paths -->
+</svg>
+```
+
+## Props
+
+You can pass additional props to adjust the icon appearance.
+
+| name                  | type      | default      |
+|-----------------------|-----------|--------------|
+| `size`                | *number*  | 24           |
+| `color`               | *string*  | currentColor |
+| `strokeWidth`         | *number*  | 2            |
+| `absoluteStrokeWidth` | *boolean* | false        |
+
+```html
+<svg lucideHouse size="48" color="red" strokeWidth="1"></svg>
+```
+
+## Global configuration
+
+You can use `provideLucideConfig` to configure the default property values as defined above:
+
+```ts{2,7-9}
+import { ApplicationConfig } from '@angular/core';
+import { provideLucideConfig } from '@lucide/angular';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideLucideConfig({
+      strokeWidth: 1.5
+    }),
+  ]
+};
+```
+
+## Styling via CSS
+
+Icons can also be styled by using custom CSS classes:
+
+```html
+<svg lucideHousePlus class="my-icon"></svg>
+```
+
+```css
+svg.my-icon {
+    width: 12px;
+    height: 12px;
+    stroke-width: 3;
+}
+```
+
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+
+While they aren't provided as standalone components, they can be still be passed to the `LucideIcon` component the same way as official icons:
+
+```html
+<!-- Directly as LucideIconData: -->
+<svg [lucideIcon]="CoconutIcon"></svg>
+
+<!-- As a provided icon by name: -->
+<svg lucideIcon="coconut"></svg>
+```
+
+```ts{2,6-7,11-12}
+import { provideLucideIcons } from '@lucide/angular';
+import { coconut } from '@lucide/lab';
+
+@Component({
+  templateUrl: './foobar.html',
+  // For using by name via provider:
+  providers: [provideLucideIcons({ coconut })],
+  imports: [LucideIcon]
+})
+export class Foobar {
+  // For passing directly as LucideIconData:
+  readonly CoconutIcon = coconut;
+}
+```
+
+## Troubleshooting
+
+### The icon is not being displayed
+If using per-icon-components:
+1. Ensure that the icon component is being imported, if using per-icon-components
+2. Check that the icon name matches exactly (case-sensitive)
+
+If using the dynamic component:
+1. Ensure the icon is provided via `provideLucideIcons()` if using string names
+2. Verify the icon is imported from `@lucide/angular` and not the legacy package
+
+### TypeScript errors?
+Make sure you're importing from `@lucide/angular` and not `lucide-angular`.
+
+### Icons render with wrong defaults
+Ensure `provideLucideConfig()` is used at the right level.
+
+## Migration guide
+Migrating from `lucide-angular`? Read our [comprehensive migration guide](https://github.com/lucide-icons/lucide/blob/main/packages/angular/MIGRATION.md).

docs/guide/packages/lucide-angular.md

@@ -1,5 +1,11 @@
 # Lucide Angular
 
+::: warning
+This documentation is for our legacy package for Angular.
+
+For our modern, standalone-first implementation, please refer to [`@lucide/angular`](./angular).
+:::
+
 Angular components and services for Lucide icons that integrate with Angular's dependency injection and component system. Provides both traditional module-based and modern standalone component approaches for maximum flexibility in Angular applications.
 
 **What you can accomplish:**

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

@@ -102,10 +102,16 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
 
 ### Icon Component Example
 
-```jsx
-import { icons } from 'lucide-react-native';
+```tsx
+import * as icons from 'lucide-react-native/icons';
 
-const Icon = ({ name, color, size }) => {
+interface IconProps {
+  name: keyof typeof icons;
+  color?: string;
+  size?: number;
+}
+
+const Icon = ({ name, color, size }: IconProps) => {
   const LucideIcon = icons[name];
 
   return <LucideIcon color={color} size={size} />;
@@ -116,11 +122,11 @@ export default Icon;
 
 #### Using the Icon Component
 
-```jsx
+```tsx
 import Icon from './Icon';
 
 const App = () => {
-  return <Icon name="house" />;
+  return <Icon name="House" />;
 };
 
 export default App;

docs/guide/packages/lucide-static.md

@@ -30,14 +30,7 @@ This package includes the following implementations of Lucide icons:
 
 SVG sprites and icon fonts include **all icons**, which can significantly increase your app's bundle size and load time.
 
-For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using:
-
-- [lucide](lucide)
-- [lucide-react](lucide-react)
-- [lucide-vue](lucide-vue)
-- [lucide-vue-next](lucide-vue-next)
-- [lucide-angular](lucide-angular)
-- [lucide-preact](lucide-preact)
+For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using one of the framework-specific [packages](../../packages).
 :::
 
 ## Installation

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

@@ -1,148 +0,0 @@
-# Lucide Vue Next
-
-Vue 3 components for Lucide icons that leverage the Composition API and modern Vue features. Each icon is a reactive Vue component that renders as an inline SVG, providing excellent performance and developer experience in Vue 3 applications.
-
-**What you can accomplish:**
-- Use icons as Vue 3 components with full reactivity and TypeScript support
-- Bind icon properties to reactive data and computed values
-- Customize icons with props, slots, and Vue's powerful templating system
-- Integrate seamlessly with Vue 3's Composition API and script setup syntax
-- Build dynamic interfaces where icons respond to application state changes
-
-## Installation
-
-::: code-group
-
-```sh [pnpm]
-pnpm add lucide-vue-next
-```
-
-```sh [yarn]
-yarn add lucide-vue-next
-```
-
-```sh [npm]
-npm install lucide-vue-next
-```
-
-```sh [bun]
-bun add lucide-vue-next
-```
-
-:::
-
-## How to use
-
-Lucide is built with ES Modules, so it's completely tree-shakable.
-
-Each icon can be imported as a Vue component, which renders an inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
-
-### Example
-
-You can pass additional props to adjust the icon.
-
-```vue
-<script setup>
-import { Camera } from 'lucide-vue-next';
-</script>
-
-<template>
-  <Camera
-    color="red"
-    :size="32"
-  />
-</template>
-```
-
-## Props
-
-|  name                   |   type    |  default     |
-| ----------------------- | --------- | ------------ |
-| `size`                  | *number*  | 24           |
-| `color`                 | *string*  | currentColor |
-| `stroke-width`          | *number*  | 2            |
-| `absoluteStrokeWidth`   | *boolean* | false        |
-| `default-class`         | *string*  | lucide-icon  |
-
-### Applying props
-
-To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
-
-```vue
-<template>
-  <Camera fill="red" />
-</template>
-```
-
-## With Lucide lab or custom icons
-
-[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
-
-They can be used by using the `Icon` component.
-All props like regular lucide icons can be passed to adjust the icon appearance.
-
-### Using the `Icon` component
-
-This creates a single icon based on the iconNode passed and renders a Lucide icon component.
-
-```vue
-<script setup>
-import { Icon } from 'lucide-vue-next';
-import { baseball } from '@lucide/lab';
-</script>
-
-<template>
-  <Icon :iconNode="baseball" />
-</template>
-```
-
-## One generic icon component
-
-It is possible to create one generic icon component to load icons, but it is not recommended.
-
-::: danger
-The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
-:::
-
-### Icon Component Example
-
-```vue
-<script setup>
-import { computed } from 'vue';
-import * as icons from "lucide-vue-next";
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true
-  },
-  size: Number,
-  color: String,
-  strokeWidth: Number,
-  defaultClass: String
-})
-
-const icon = computed(() => icons[props.name]);
-</script>
-
-<template>
-  <component
-    :is="icon"
-    :size="size"
-    :color="color"
-    :stroke-width="strokeWidth" :default-class="defaultClass"
-  />
-</template>
-```
-
-### Using the Icon Component
-
-All other props listed above also work on the `Icon` Component.
-
-```vue
-<template>
-  <div id="app">
-    <Icon name="Airplay" />
-  </div>
-</template>
-```

docs/guide/packages/lucide-vue.md

@@ -9,28 +9,24 @@ Vue 2 components for Lucide icons that integrate with Vue's Options API and temp
 - Build applications using Vue 2's familiar syntax and patterns
 - Bridge the gap while planning migration to Vue 3
 
-::: danger
-This package is deprecated. Vue 2 is EOF  See [Announcement](https://v2.vuejs.org/eol/). Migrate to Vue 3.
-:::
-
 ## Installation
 
 ::: code-group
 
 ```sh [pnpm]
-pnpm add lucide-vue
+pnpm add @lucide/vue
 ```
 
 ```sh [yarn]
-yarn add lucide-vue
+yarn add @lucide/vue
 ```
 
 ```sh [npm]
-npm install lucide-vue
+npm install @lucide/vue
 ```
 
 ```sh [bun]
-bun add lucide-vue
+bun add @lucide/vue
 ```
 
 :::
@@ -43,21 +39,19 @@ Each icon can be imported as a Vue component, which renders an inline SVG Elemen
 
 ### Example
 
-Additional props can be passed to adjust the icon:
+You can pass additional props to adjust the icon.
 
 ```vue
-<template>
-  <Camera color="red" :size="32" />
-</template>
-
-<script>
-  import { Camera } from 'lucide-vue';
-
-  export default {
-    name: 'My Component',
-    components: { Camera }
-  };
+<script setup>
+import { Camera } from '@lucide/vue';
 </script>
+
+<template>
+  <Camera
+    color="red"
+    :size="32"
+  />
+</template>
 ```
 
 ## Props
@@ -80,6 +74,28 @@ To customize the appearance of an icon, you can pass custom properties as props
 </template>
 ```
 
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+
+They can be used by using the `Icon` component.
+All props like regular lucide icons can be passed to adjust the icon appearance.
+
+### Using the `Icon` component
+
+This creates a single icon based on the iconNode passed and renders a Lucide icon component.
+
+```vue
+<script setup>
+import { Icon } from '@lucide/vue';
+import { baseball } from '@lucide/lab';
+</script>
+
+<template>
+  <Icon :iconNode="baseball" />
+</template>
+```
+
 ## One generic icon component
 
 It is possible to create one generic icon component to load icons, but it is not recommended.
@@ -91,30 +107,37 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
 ### Icon Component Example
 
 ```vue
-<template>
-  <component :is="icon" />
-</template>
+<script setup>
+import { computed } from 'vue';
+import * as icons from "@lucide/vue";
 
-<script>
-  import * as icons from 'lucide-vue';
-
-  export default {
-    props: {
+const props = defineProps({
   name: {
     type: String,
     required: true
-      }
   },
-    computed: {
-      icon() {
-        return icons[this.name];
-      }
-    }
-  };
+  size: Number,
+  color: String,
+  strokeWidth: Number,
+  defaultClass: String
+})
+
+const icon = computed(() => icons[props.name]);
 </script>
+
+<template>
+  <component
+    :is="icon"
+    :size="size"
+    :color="color"
+    :stroke-width="strokeWidth" :default-class="defaultClass"
+  />
+</template>
 ```
 
-#### Using the Icon Component
+### Using the Icon Component
+
+All other props listed above also work on the `Icon` Component.
 
 ```vue
 <template>

docs/package.json

@@ -9,14 +9,14 @@
     "docs:build": "pnpm run /^prebuild:.*/ && vitepress build",
     "docs:preview": "vitepress preview",
     "build:docs": "vitepress build",
-    "prebuild:iconNodes": "node --experimental-strip-types ./scripts/writeIconNodes.mjs",
-    "prebuild:metaJson": "node --experimental-strip-types ./scripts/writeIconMetaIndex.mjs",
-    "prebuild:releaseJson": "node --experimental-strip-types ./scripts/writeReleaseMetadata.mjs",
-    "prebuild:categoriesJson": "node --experimental-strip-types ./scripts/writeCategoriesMetadata.mjs",
-    "prebuild:relatedIcons": "node --experimental-strip-types ./scripts/writeIconRelatedIcons.mjs",
-    "prebuild:iconDetails": "node --experimental-strip-types ./scripts/writeIconDetails.mjs",
-    "prebuild:brandStopwords": "node --experimental-strip-types ./scripts/writeBrandStopwords.mjs",
-    "postbuild:vercelJson": "node --experimental-strip-types ./scripts/writeVercelOutput.mjs",
+    "prebuild:iconNodes": "node ./scripts/writeIconNodes.mjs",
+    "prebuild:metaJson": "node ./scripts/writeIconMetaIndex.mjs",
+    "prebuild:releaseJson": "node ./scripts/writeReleaseMetadata.mjs",
+    "prebuild:categoriesJson": "node ./scripts/writeCategoriesMetadata.mjs",
+    "prebuild:relatedIcons": "node ./scripts/writeIconRelatedIcons.mjs",
+    "prebuild:iconDetails": "node ./scripts/writeIconDetails.mjs",
+    "prebuild:brandStopwords": "node ./scripts/writeBrandStopwords.mjs",
+    "postbuild:vercelJson": "node ./scripts/writeVercelOutput.mjs",
     "dev": "npx nitropack dev",
     "prebuild:api": "npx nitropack prepare",
     "build:api": "npx nitropack build",

docs/vercel.json

@@ -34,6 +34,11 @@
       ],
       "destination": "/icons",
       "permanent": false
+    },
+    {
+      "source": "/guide/packages/lucide-vue-next",
+      "destination": "/guide/packages/lucide-vue",
+      "permanent": false
     }
   ],
   "headers": [

icon.schema.json

@@ -56,7 +56,6 @@
           "account",
           "animals",
           "arrows",
-          "brands",
           "buildings",
           "charts",
           "communication",
@@ -134,7 +133,7 @@
   "$defs": {
     "iconDeprecationReasons": {
       "type": "string",
-      "enum": ["icon.brand"]
+      "enum": ["icon.renamed"]
     },
     "aliasDeprecationReasons": {
       "type": "string",

icons/airplay.json

@@ -16,8 +16,6 @@
   ],
   "categories": [
     "multimedia",
-    "connectivity",
-    "devices",
-    "brands"
+    "connectivity"
   ]
 }

icons/balloon.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "peteruithoven"
+  ],
+  "tags": [
+    "party",
+    "festival",
+    "congratulations",
+    "celebration",
+    "decoration",
+    "colorful",
+    "floating",
+    "fun",
+    "birthday",
+    "event",
+    "entertainment"
+  ],
+  "categories": [
+    "emoji"
+  ]
+}

icons/balloon.svg

@@ -9,5 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M5 16V9h14V2H5l14 14h-7m-7 0 7 7v-7m-7 0h7" />
+  <path d="M12 16v1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v1" />
+  <path d="M12 6a2 2 0 0 1 2 2" />
+  <path d="M18 8c0 4-3.5 8-6 8s-6-4-6-8a6 6 0 0 1 12 0" />
 </svg>

icons/bitcoin.json

@@ -10,7 +10,6 @@
     "payment"
   ],
   "categories": [
-    "brands",
     "development",
     "finance"
   ]

icons/brush-cleaning.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "jguddas"
   ],
   "tags": [
     "cleaning",

icons/brush-cleaning.svg

@@ -10,7 +10,7 @@
   stroke-linejoin="round"
 >
   <path d="m16 22-1-4" />
-  <path d="M19 13.99a1 1 0 0 0 1-1V12a2 2 0 0 0-2-2h-3a1 1 0 0 1-1-1V4a2 2 0 0 0-4 0v5a1 1 0 0 1-1 1H6a2 2 0 0 0-2 2v.99a1 1 0 0 0 1 1" />
-  <path d="M5 14h14l1.973 6.767A1 1 0 0 1 20 22H4a1 1 0 0 1-.973-1.233z" />
+  <path d="M19 14a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2h-3a1 1 0 0 1-1-1V4a2 2 0 0 0-4 0v5a1 1 0 0 1-1 1H6a2 2 0 0 0-2 2v1a1 1 0 0 0 1 1" />
+  <path d="M19 14H5l-1.973 6.767A1 1 0 0 0 4 22h16a1 1 0 0 0 .973-1.233z" />
   <path d="m8 22 1-4" />
 </svg>

icons/cannabis-off.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "nickveles"
+  ],
+  "tags": [
+    "cannabis",
+    "weed",
+    "leaf"
+  ],
+  "categories": [
+    "nature"
+  ]
+}

icons/cannabis-off.svg

@@ -0,0 +1,18 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 22v-4c1.5 1.5 3.5 3 6 3 0-1.5-.5-3.5-2-5" />
+  <path d="M13.988 8.327C13.902 6.054 13.365 3.82 12 2a9.3 9.3 0 0 0-1.445 2.9" />
+  <path d="M17.375 11.725C18.882 10.53 21 7.841 21 6c-2.324 0-5.08 1.296-6.662 2.684" />
+  <path d="m2 2 20 20" />
+  <path d="M21.024 15.378A15 15 0 0 0 22 15c-.426-1.279-2.67-2.557-4.25-2.907" />
+  <path d="M6.995 6.992C5.714 6.4 4.29 6 3 6c0 2 2.5 5 4 6-1.5 0-4.5 1.5-5 3 3.5 1.5 6 1 6 1-1.5 1.5-2 3.5-2 5 2.5 0 4.5-1.5 6-3" />
+</svg>

icons/chromium.json

@@ -1,25 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "ericfennis"
-  ],
-  "tags": [
-    "browser",
-    "logo"
-  ],
-  "categories": [
-    "brands"
-  ],
-  "aliases": [
-    {
-      "name": "chrome",
-      "deprecated": true,
-      "deprecationReason": "alias.name",
-      "toBeRemovedInVersion": "v1.0"
-    }
-  ]
-}

icons/circle-pile.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "colebemis",
+    "nathan-de-pachtere"
+  ],
+  "tags": [
+    "off",
+    "zero",
+    "record",
+    "shape",
+    "circle-pile",
+    "circle",
+    "pile",
+    "stack",
+    "layer",
+    "structure",
+    "form",
+    "group",
+    "collection",
+    "stock",
+    "inventory",
+    "materials",
+    "warehouse"
+  ],
+  "categories": [
+    "shapes"
+  ]
+}

icons/circle-pile.svg

@@ -0,0 +1,9 @@
+<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">
+  <circle cx="12" cy="19" r="2" />
+  <circle cx="12" cy="5" r="2" />
+  <circle cx="16" cy="12" r="2" />
+  <circle cx="20" cy="19" r="2" />
+  <circle cx="4" cy="19" r="2" />
+  <circle cx="8" cy="12" r="2" />
+</svg>

icons/cloud-backup.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "ericfennis",
+    "jguddas",
+    "danielbayley",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "storage",
+    "memory",
+    "bytes",
+    "servers",
+    "backup",
+    "timemachine",
+    "rotate",
+    "synchronize",
+    "synchronise",
+    "refresh",
+    "reconnect",
+    "transfer",
+    "data",
+    "security",
+    "upload",
+    "save",
+    "remote",
+    "safety"
+  ],
+  "categories": [
+    "arrows",
+    "files"
+  ]
+}

icons/cloud-backup.svg

@@ -9,9 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M10.88 21.94 15.46 14" />
-  <path d="M21.17 8H12" />
-  <path d="M3.95 6.06 8.54 14" />
-  <circle cx="12" cy="12" r="10" />
-  <circle cx="12" cy="12" r="4" />
+  <path d="M21 15.251A4.5 4.5 0 0 0 17.5 8h-1.79A7 7 0 1 0 3 13.607" />
+  <path d="M7 11v4h4" />
+  <path d="M8 19a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5 4.82 4.82 0 0 0-3.41 1.41L7 15" />
 </svg>

icons/cloud-sync.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "colebemis",
+    "csandman",
+    "ericfennis",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "synchronize",
+    "synchronise",
+    "refresh",
+    "reconnect",
+    "transfer",
+    "backup",
+    "storage",
+    "upload",
+    "download",
+    "connection",
+    "network",
+    "data"
+  ],
+  "categories": [
+    "arrows",
+    "files"
+  ]
+}

icons/cloud-sync.svg

@@ -0,0 +1,17 @@
+<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="m17 18-1.535 1.605a5 5 0 0 1-8-1.5" />
+  <path d="M17 22v-4h-4" />
+  <path d="M20.996 15.251A4.5 4.5 0 0 0 17.495 8h-1.79a7 7 0 1 0-12.709 5.607" />
+  <path d="M7 10v4h4" />
+  <path d="m7 14 1.535-1.605a5 5 0 0 1 8 1.5" />
+</svg>

icons/codepen.json

@@ -1,17 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "ericfennis"
-  ],
-  "tags": [
-    "logo"
-  ],
-  "categories": [
-    "brands",
-    "development"
-  ]
-}

icons/codepen.svg

@@ -1,17 +0,0 @@
-<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"
->
-  <polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2" />
-  <line x1="12" x2="12" y1="22" y2="15.5" />
-  <polyline points="22 8.5 12 15.5 2 8.5" />
-  <polyline points="2 15.5 12 8.5 22 15.5" />
-  <line x1="12" x2="12" y1="2" y2="8.5" />
-</svg>

icons/codesandbox.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "csandman",
-    "ericfennis"
-  ],
-  "tags": [
-    "logo"
-  ],
-  "categories": [
-    "brands",
-    "development"
-  ]
-}

icons/codesandbox.svg

@@ -1,18 +0,0 @@
-<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 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
-  <polyline points="7.5 4.21 12 6.81 16.5 4.21" />
-  <polyline points="7.5 19.79 7.5 14.6 3 12" />
-  <polyline points="21 12 16.5 14.6 16.5 19.79" />
-  <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-  <line x1="12" x2="12" y1="22.08" y2="12" />
-</svg>

icons/dribbble.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "ahtohbi4"
-  ],
-  "tags": [
-    "design",
-    "social"
-  ],
-  "categories": [
-    "brands",
-    "social",
-    "design"
-  ]
-}

icons/dribbble.svg

@@ -1,16 +0,0 @@
-<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"
->
-  <circle cx="12" cy="12" r="10" />
-  <path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94" />
-  <path d="M21.75 12.84c-6.62-1.41-12.14 1-16.38 6.32" />
-  <path d="M8.56 2.75c4.37 6 6 9.42 8 17.72" />
-</svg>

icons/facebook.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "csandman",
-    "ericfennis"
-  ],
-  "tags": [
-    "logo",
-    "social"
-  ],
-  "categories": [
-    "social",
-    "brands"
-  ]
-}

icons/figma.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "csandman",
-    "mittalyashu",
-    "ericfennis"
-  ],
-  "tags": [
-    "logo",
-    "design",
-    "tool"
-  ],
-  "categories": [
-    "brands",
-    "design"
-  ]
-}

icons/figma.svg

@@ -1,17 +0,0 @@
-<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="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
-  <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
-  <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
-  <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
-  <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
-</svg>

icons/fishing-hook.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "7ender",
+    "jguddas",
+    "karsa-mistmere",
+    "jamiemlaw"
+  ],
+  "tags": [
+    "sea",
+    "boating",
+    "angler",
+    "bait",
+    "reel",
+    "tackle",
+    "marine",
+    "outdoors",
+    "fish",
+    "fishing",
+    "hook",
+    "sports",
+    "travel"
+  ],
+  "categories": [
+    "sports",
+    "travel"
+  ]
+}

icons/fishing-hook.svg

@@ -9,5 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
+  <path d="m17.586 11.414-5.93 5.93a1 1 0 0 1-8-8l3.137-3.137a.707.707 0 0 1 1.207.5V10" />
+  <path d="M20.414 8.586 22 7" />
+  <circle cx="19" cy="10" r="2" />
 </svg>

icons/framer.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "csandman",
-    "mittalyashu",
-    "ericfennis"
-  ],
-  "tags": [
-    "logo",
-    "design",
-    "tool"
-  ],
-  "categories": [
-    "brands",
-    "design"
-  ]
-}

icons/github.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "csandman",
-    "ericfennis",
-    "karsa-mistmere"
-  ],
-  "tags": [
-    "logo",
-    "version control"
-  ],
-  "categories": [
-    "brands",
-    "development"
-  ]
-}

icons/github.svg

@@ -1,14 +0,0 @@
-<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 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
-  <path d="M9 18c-4.51 2-5-2-7-2" />
-</svg>

icons/gitlab.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "csandman",
-    "ericfennis",
-    "karsa-mistmere"
-  ],
-  "tags": [
-    "logo",
-    "version control"
-  ],
-  "categories": [
-    "brands",
-    "development"
-  ]
-}

icons/gitlab.svg

@@ -1,13 +0,0 @@
-<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="m22 13.29-3.33-10a.42.42 0 0 0-.14-.18.38.38 0 0 0-.22-.11.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18l-2.26 6.67H8.32L6.1 3.26a.42.42 0 0 0-.1-.18.38.38 0 0 0-.26-.08.39.39 0 0 0-.23.07.42.42 0 0 0-.14.18L2 13.29a.74.74 0 0 0 .27.83L12 21l9.69-6.88a.71.71 0 0 0 .31-.83Z" />
-</svg>

icons/hd.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "ahtohbi4",
+    "jamiemlaw",
+    "karsa-mistmere",
+    "jguddas"
+  ],
+  "tags": [
+    "tv",
+    "resolution",
+    "video",
+    "high definition",
+    "720p",
+    "1080p"
+  ],
+  "categories": [
+    "devices",
+    "multimedia"
+  ]
+}

icons/hd.svg

@@ -0,0 +1,17 @@
+<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="M10 12H6" />
+  <path d="M10 15V9" />
+  <path d="M14 14.5a.5.5 0 0 0 .5.5h1a2.5 2.5 0 0 0 2.5-2.5v-1A2.5 2.5 0 0 0 15.5 9h-1a.5.5 0 0 0-.5.5z" />
+  <path d="M6 15V9" />
+  <rect x="2" y="5" width="20" height="14" rx="2" />
+</svg>

icons/hexagon.json

@@ -12,7 +12,6 @@
   ],
   "categories": [
     "shapes",
-    "brands",
     "development"
   ]
 }

icons/instagram.json

@@ -1,21 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "csandman",
-    "ericfennis"
-  ],
-  "tags": [
-    "logo",
-    "camera",
-    "social"
-  ],
-  "categories": [
-    "brands",
-    "social",
-    "photography"
-  ]
-}

icons/instagram.svg

@@ -1,15 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
-  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-  <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
-</svg>

icons/layers-plus.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "juanisidoro",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "stack",
+    "layers",
+    "add",
+    "new",
+    "increase",
+    "create",
+    "positive",
+    "copy",
+    "upgrade"
+  ],
+  "categories": [
+    "design",
+    "layout"
+  ]
+}

icons/layers-plus.svg

@@ -0,0 +1,17 @@
+<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="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 .83.18 2 2 0 0 0 .83-.18l8.58-3.9a1 1 0 0 0 0-1.831z" />
+  <path d="M16 17h6" />
+  <path d="M19 14v6" />
+  <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 .825.178" />
+  <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l2.116-.962" />
+</svg>

icons/linkedin.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "okcoker",
-    "csandman",
-    "ericfennis"
-  ],
-  "tags": [
-    "logo",
-    "social media",
-    "social"
-  ],
-  "categories": [
-    "social",
-    "brands"
-  ]
-}

icons/linkedin.svg

@@ -1,15 +0,0 @@
-<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="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
-  <rect width="4" height="12" x="2" y="9" />
-  <circle cx="4" cy="4" r="2" />
-</svg>

icons/memory-stick.svg

@@ -9,13 +9,15 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M6 19v-3" />
-  <path d="M10 19v-3" />
-  <path d="M14 19v-3" />
-  <path d="M18 19v-3" />
-  <path d="M8 11V9" />
-  <path d="M16 11V9" />
-  <path d="M12 11V9" />
-  <path d="M2 15h20" />
-  <path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.837Z" />
+  <path d="M12 12v-2" />
+  <path d="M12 18v-2" />
+  <path d="M16 12v-2" />
+  <path d="M16 18v-2" />
+  <path d="M2 11h1.5" />
+  <path d="M20 18v-2" />
+  <path d="M20.5 11H22" />
+  <path d="M4 18v-2" />
+  <path d="M8 12v-2" />
+  <path d="M8 18v-2" />
+  <rect x="2" y="6" width="20" height="10" rx="2" />
 </svg>

icons/microchip.svg

@@ -9,15 +9,14 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
+  <path d="M10 12h4" />
+  <path d="M10 17h4" />
+  <path d="M10 7h4" />
   <path d="M18 12h2" />
-  <path d="M18 16h2" />
-  <path d="M18 20h2" />
-  <path d="M18 4h2" />
-  <path d="M18 8h2" />
+  <path d="M18 18h2" />
+  <path d="M18 6h2" />
   <path d="M4 12h2" />
-  <path d="M4 16h2" />
-  <path d="M4 20h2" />
-  <path d="M4 4h2" />
-  <path d="M4 8h2" />
-  <path d="M8 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-1.5c-.276 0-.494.227-.562.495a2 2 0 0 1-3.876 0C9.994 2.227 9.776 2 9.5 2z" />
+  <path d="M4 18h2" />
+  <path d="M4 6h2" />
+  <rect x="6" y="2" width="12" height="20" rx="2" />
 </svg>

icons/paint-bucket.svg

@@ -9,8 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z" />
-  <path d="m5 2 5 5" />
-  <path d="M2 13h15" />
-  <path d="M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z" />
+  <path d="M11 7 6 2" />
+  <path d="M18.992 12H2.041" />
+  <path d="M21.145 18.38A3.34 3.34 0 0 1 20 16.5a3.3 3.3 0 0 1-1.145 1.88c-.575.46-.855 1.02-.855 1.595A2 2 0 0 0 20 22a2 2 0 0 0 2-2.025c0-.58-.285-1.13-.855-1.595" />
+  <path d="m8.5 4.5 2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33" />
 </svg>

icons/pocket.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "csandman",
-    "ericfennis"
-  ],
-  "tags": [
-    "logo",
-    "save"
-  ],
-  "categories": [
-    "brands"
-  ]
-}

icons/pocket.svg

@@ -1,14 +0,0 @@
-<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 3a2 2 0 0 1 2 2v6a1 1 0 0 1-20 0V5a2 2 0 0 1 2-2z" />
-  <path d="m8 10 4 4 4-4" />
-</svg>

icons/rail-symbol.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "contributors": [
-    "danielbayley"
-  ],
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "tags": [
-    "railway",
-    "train",
-    "track",
-    "line"
-  ],
-  "categories": [
-    "transportation",
-    "navigation"
-  ]
-}

icons/search-alert.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "colebemis",
+    "ericfennis",
+    "jguddas",
+    "Veatec22"
+  ],
+  "tags": [
+    "find",
+    "scan",
+    "magnifier",
+    "magnifying glass",
+    "stop",
+    "warning",
+    "alert",
+    "error",
+    "anomaly",
+    "lens"
+  ],
+  "categories": [
+    "text",
+    "social"
+  ]
+}

icons/search-alert.svg

@@ -9,7 +9,8 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M5 15h14" />
-  <path d="M5 9h14" />
-  <path d="m14 20-5-5 6-6-5-5" />
+  <circle cx="11" cy="11" r="8" />
+  <path d="m21 21-4.3-4.3" />
+  <path d="M11 7v4" />
+  <path d="M11 15h.01" />
 </svg>

icons/slack.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "../icon.schema.json",
-  "deprecated": true,
-  "deprecationReason": "icon.brand",
-  "toBeRemovedInVersion": "v1.0",
-  "contributors": [
-    "colebemis",
-    "ashygee",
-    "wojtekmaj",
-    "mittalyashu",
-    "ericfennis"
-  ],
-  "tags": [
-    "logo"
-  ],
-  "categories": [
-    "account",
-    "social",
-    "brands",
-    "development"
-  ]
-}

icons/slack.svg

@@ -1,20 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <rect width="3" height="8" x="13" y="2" rx="1.5" />
-  <path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5" />
-  <rect width="3" height="8" x="8" y="14" rx="1.5" />
-  <path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5" />
-  <rect width="8" height="3" x="14" y="13" rx="1.5" />
-  <path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5" />
-  <rect width="8" height="3" x="2" y="8" rx="1.5" />
-  <path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5" />
-</svg>

icons/stone.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "Alportan",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "mineral",
+    "geology",
+    "nature",
+    "solid",
+    "pebble",
+    "crystal",
+    "ore",
+    "hard",
+    "coal",
+    "stone",
+    "rock",
+    "boulder"
+  ],
+  "categories": [
+    "nature"
+  ]
+}

icons/stone.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="M11.264 2.205A4 4 0 0 0 6.42 4.211l-4 8a4 4 0 0 0 1.359 5.117l6 4a4 4 0 0 0 4.438 0l6-4a4 4 0 0 0 1.576-4.592l-2-6a4 4 0 0 0-2.53-2.53z" />
+  <path d="M11.99 22 14 12l7.822 3.184" />
+  <path d="M14 12 8.47 2.302" />
+</svg>

icons/target.json

@@ -13,7 +13,6 @@
     "productivity"
   ],
   "categories": [
-    "brands",
     "gaming"
   ]
 }

icons/thumbs-down.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M17 14V2" />
   <path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" />
+  <path d="M17 14V2" />
 </svg>

icons/thumbs-up.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7 10v12" />
   <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" />
+  <path d="M7 10v12" />
 </svg>

icons/tickets-plane.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "jguddas"
+    "jguddas",
+    "karsa-mistmere"
   ],
   "tags": [
     "plane",

icons/tickets-plane.svg

@@ -11,7 +11,7 @@
 >
   <path d="M10.5 17h1.227a2 2 0 0 0 1.345-.52L18 12" />
   <path d="m12 13.5 3.75.5" />
-  <path d="m4.5 8 10.58-5.06a1 1 0 0 1 1.342.488L18.5 8" />
+  <path d="m3.173 8.18 11-5a2 2 0 0 1 2.647.993L18.56 8" />
   <path d="M6 10V8" />
   <path d="M6 14v1" />
   <path d="M6 19v2" />