fix(packages/angular-next): added angular-next package keeping original package intact

# Conflicts:
#	packages/lucide-angular/package.json
#	packages/lucide-angular/scripts/exportTemplate.mts
#	pnpm-lock.yaml
#	tools/build-icons/building/generateExportsFile.ts
#	tools/build-icons/building/generateIconFiles.ts

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ on:
 
 permissions:
   id-token: write # Required for OIDC
-  contents: read
+  contents: write
 
 jobs:
   create-release:
@@ -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/close-issue-with-banned-phrases.yml

@@ -1,4 +1,4 @@
-name: Close Issue with Banned Phrases
+name: Close Icon Requests with Brand Terms
 
 on:
   issues:
@@ -13,23 +13,36 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
-      - name: Check for blocked phrases in issue title
+      - name: Load stopwords from JSON & check issue title & body
+        if: contains(github.event.issue.labels.*.name, '🙌 icon request')
         run: |
           ISSUE_TITLE=$(jq -r '.issue.title' "$GITHUB_EVENT_PATH")
-          BLOCKED_PHRASES=("twitter" "whatsapp" "logo" "google" "tiktok" "facebook" "slack" "discord" "bluesky" "spotify" "behance" "pix" "x.com" "telegram")
+          ISSUE_BODY=$(jq -r '.issue.body // ""' "$GITHUB_EVENT_PATH")
+          ICON_NAME_SECTION=$(printf '%s\n' "$ISSUE_BODY" | awk '/### Icon name/{flag=1; next} /^### /{flag=0} flag')
 
-          # Check title and body for blocked phrases
-          for PHRASE in "${BLOCKED_PHRASES[@]}"
-          do
-            if echo "$ISSUE_TITLE" | grep -i "$PHRASE"; then
-              gh issue close ${{ github.event.issue.number }} --reason "not planned" --comment "This looks like a duplicate, use the [search](https://github.com/lucide-icons/lucide/issues?q=is%3Aissue+$PHRASE) to find similar issues.
+          jq -r 'to_entries[] | "\(.key) \(.value)"' brand-stopwords.json | while read -r KEY VALUE; do
+            SAFE_KEY=$(printf '%s\n' "$KEY" | sed 's/[][\.^$*]/\\&/g')
+            SAFE_VALUE=$(printf '%s\n' "$VALUE" | sed 's/[][\.^$*]/\\&/g')
 
-          Read [our official statement about brand logos in Lucide](https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md).
+            if echo "$ISSUE_TITLE" | grep -iqE "$SAFE_KEY|$SAFE_VALUE" || \
+              { [ -n "$ICON_NAME_SECTION" ] && echo "$ICON_NAME_SECTION" | grep -iqE "$SAFE_KEY|$SAFE_VALUE"; }; then
+
+              gh issue close ${{ github.event.issue.number }} \
+                --reason "not_planned" \
+                --comment "It looks like this request is about **${VALUE}**, which is a brand logo.
+
+          Lucide **does not accept** brand logos, and we do not plan to add them in the future. This is due to a combination of **legal restrictions**, **design consistency concerns**, and **practical maintenance reasons**.
+
+          [Click here to read our official statement about brand logos in Lucide.](./BRAND_LOGOS_STATEMENT.md)
+
+          You can [search for similar issues.](https://github.com/lucide-icons/lucide/issues?q=is%3Aissue+${VALUE})
+
+          We’re always happy to help on [Discord](https://discord.gg/EH6nSts)."
 
-          Always happy to help on [Discord](https://discord.gg/EH6nSts)."
               gh issue lock ${{ github.event.issue.number }} --reason spam
-              exit 1
+              exit 0
             fi
           done
-        env:
+
+env:
   GH_TOKEN: ${{ github.token }}

.github/workflows/release.yml

@@ -20,7 +20,7 @@ on:
 
 permissions:
   id-token: write # Required for OIDC
-  contents: read
+  contents: write
 
 jobs:
   pre-release:
@@ -72,9 +72,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 +106,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 +151,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

.gitignore

@@ -44,7 +44,7 @@ docs/.vitepress/data/releaseMetaData
 docs/.vitepress/data/categoriesData.json
 docs/.vitepress/data/iconDetails
 docs/.vitepress/data/relatedIcons.json
+docs/.vitepress/data/brandStopwords.json
 docs/.vercel
 docs/.nitro
 .gitignore
-

.npmrc

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

brand-stopwords.json

@@ -0,0 +1,149 @@
+{
+  "adobe": "Adobe",
+  "airplay": "AirPlay",
+  "amazon": "Amazon",
+  "angular": "Angular",
+  "aws": "AWS",
+  "azure": "Azure",
+  "bandcamp": "Bandcamp",
+  "behance": "Behance",
+  "bitbucket": "Bitbucket",
+  "blender": "Blender",
+  "bluesky": "BlueSky",
+  "bootstrap": "Bootstrap",
+  "brave": "Brave",
+  "chakra": "Chakra UI",
+  "chrome": "Chrome",
+  "codepen": "Codepen",
+  "codesandbox": "CodeSandbox",
+  "csharp": "C#",
+  "cypress": "Cypress",
+  "dart": "Dart",
+  "deezer": "Deezer",
+  "deno": "Deno",
+  "discord": "Discord",
+  "docker": "Docker",
+  "dribbble": "Dribbble",
+  "dropbox": "Dropbox",
+  "edge": "Edge",
+  "ember": "Ember",
+  "epic": "Epic Games",
+  "erlang": "Erlang",
+  "esbuild": "esbuild",
+  "eslint": "ESLint",
+  "facebook": "Facebook",
+  "figjam": "FigJam",
+  "figma": "Figma",
+  "firebase": "Firebase",
+  "firefox": "Firefox",
+  "framer": "Framer",
+  "gatsby": "Gatsby",
+  "gcp": "Google Cloud",
+  "github": "GitHub",
+  "gitlab": "GitLab",
+  "golang": "GoLang",
+  "google": "Google",
+  "gmail": "Gmail",
+  "gravatar": "Gravatar",
+  "haskell": "Haskell",
+  "instagram": "Instagram",
+  "java": "Java",
+  "javascript": "JavaScript",
+  "jest": "Jest",
+  "jira": "Jira",
+  "kotlin": "Kotlin",
+  "kubernetes": "Kubernetes",
+  "less": "Less",
+  "leetcode": "LeetCode",
+  "leet-code": "LeetCode",
+  "line": "LINE",
+  "linkedin": "LinkedIn",
+  "lua": "Lua",
+  "mariadb": "MariaDB",
+  "mcp": "MCP",
+  "messenger": "Messenger",
+  "microsoft": "Microsoft",
+  "mongodb": "MongoDB",
+  "mui": "Material UI",
+  "mysql": "MySQL",
+  "nestjs": "NestJS",
+  "netflix": "Netflix",
+  "netlify": "Netlify",
+  "next": "Next.js",
+  "nodejs": "Node.js",
+  "notion": "Notion",
+  "nostr": "Nostr",
+  "npm": "npm",
+  "nuxt": "Nuxt",
+  "opera": "Opera",
+  "oracle": "Oracle",
+  "patreon": "Patreon",
+  "paypal": "PayPal",
+  "perl": "Perl",
+  "php": "PHP",
+  "pinterest": "Pinterest",
+  "pix": "PiX",
+  "playstation": "PlayStation",
+  "playwright": "Playwright",
+  "pnpm": "pnpm",
+  "postcss": "PostCSS",
+  "postgresql": "PostgreSQL",
+  "prettier": "Prettier",
+  "prisma": "Prisma",
+  "python": "Python",
+  "qwik": "Qwik",
+  "react": "React",
+  "reddit": "Reddit",
+  "redis": "Redis",
+  "rollup": "Rollup",
+  "rust": "Rust",
+  "safari": "Safari",
+  "sass": "Sass",
+  "scala": "Scala",
+  "scss": "Sass",
+  "semantic": "Semantic UI",
+  "shopify": "Shopify",
+  "skype": "Skype",
+  "slack": "Slack",
+  "solid": "SolidJS",
+  "soundcloud": "SoundCloud",
+  "spotify": "Spotify",
+  "sqlite": "SQLite",
+  "squarespace": "Squarespace",
+  "steam": "Steam",
+  "stripe": "Stripe",
+  "substack": "Substack",
+  "supabase": "Supabase",
+  "surge": "Surge",
+  "svelte": "Svelte",
+  "swift": "Swift",
+  "tailwind": "Tailwind CSS",
+  "telegram": "Telegram",
+  "terraform": "Terraform",
+  "tesla": "Tesla",
+  "tidal": "Tidal",
+  "tiktok": "TikTok",
+  "trello": "Trello",
+  "twitch": "Twitch",
+  "twitter": "Twitter",
+  "typescript": "TypeScript",
+  "unity": "Unity",
+  "unreal": "Unreal Engine",
+  "vercel": "Vercel",
+  "vimeo": "Vimeo",
+  "vite": "Vite",
+  "vitest": "Vitest",
+  "vue": "Vue",
+  "webpack": "Webpack",
+  "wechat": "WeChat",
+  "whatsapp": "WhatsApp",
+  "windows": "Windows",
+  "wix": "Wix",
+  "x.com": "X.com",
+  "x-social": "X.com",
+  "xbox": "Xbox",
+  "yarn": "Yarn",
+  "youtube": "YouTube",
+  "zig": "Zig",
+  "zoom": "Zoom"
+}

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

@@ -0,0 +1,55 @@
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { renderToString } from 'react-dom/server';
+import { createElement } from 'react';
+import Diff from '../../../lib/SvgPreview/Diff.tsx';
+
+export default eventHandler((event) => {
+  const { params } = event.context;
+
+  const pathData = params.data.split('/');
+  const data = pathData.at(-1).slice(0, -4);
+  const [operation] = pathData;
+
+  const newSrc = Buffer.from(data, 'base64')
+    .toString('utf8')
+    .replaceAll('\n', '')
+    .replace(/<svg[^>]*>|<\/svg>/g, '');
+
+  const width = parseInt(
+    (newSrc.includes('<svg ') ? newSrc.match(/width="(\d+)"/)?.[1] : null) ?? '24',
+  );
+  const height = parseInt(
+    (newSrc.includes('<svg ') ? newSrc.match(/height="(\d+)"/)?.[1] : null) ?? '24',
+  );
+
+  const children = [];
+
+  let oldSrc = '';
+  if (operation.startsWith('rotate-')) {
+    const degrees = parseInt(operation.replace('rotate-', ''));
+    if (isNaN(degrees)) return '';
+    oldSrc = `<g transform="rotate(${degrees} ${width / 2} ${height / 2})">${newSrc}</g>`;
+  } else if (operation === 'flip-horizontal') {
+    oldSrc = `<g transform="scale(1, -1) translate(0, -${height})">${newSrc}</g>`;
+  } else if (operation === 'flip-vertical') {
+    oldSrc = `<g transform="scale(-1, 1) translate(-${width}, 0)">${newSrc}</g>`;
+  } else if (operation === 'flip-backslash') {
+    oldSrc = `<g transform="rotate(90, ${width / 2}, ${height / 2}) scale(1, -1) translate(0, -${height})">${newSrc}</g>`;
+  } else if (operation === 'flip-slash') {
+    oldSrc = `<g transform="rotate(90, ${width / 2}, ${height / 2}) scale(-1, 1) translate(-${width}, 0)">${newSrc}</g>`;
+  } else {
+    return '';
+  }
+
+  const svg = Buffer.from(
+    // We can't use jsx here, is not supported here by nitro.
+    renderToString(
+      createElement(Diff, { oldSrc, newSrc, showGrid: true, height, width }, children),
+    ),
+  ).toString('utf8');
+
+  defaultContentType(event, 'image/svg+xml');
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+
+  return svg;
+});

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>\
   `,
     },
     {

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/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"/>
-    <slot/>
-    <kbd v-if="shortcut" class="shortcut">{{ shortcut }}</kbd>
+    <Icon
+      :iconNode="search"
+      class="search-icon"
+    />
+    <slot />
+    <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,60 +1,90 @@
 <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"
-      :class="{'has-icon': $slots.icon, 'has-shortcut': shortcut}"
+      :class="{ 'has-icon': $slots.icon, 'has-shortcut': shortcut }"
       ref="input"
       :value="modelValue"
       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

@@ -22,16 +22,16 @@ export default {
           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-preact',
+          logo: '/framework-logos/preact.svg',
+          label: 'Lucide documentation for Preact',
+        },
         {
           name: 'lucide-angular',
           logo: '/framework-logos/angular.svg',
@@ -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() {
+  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>
@@ -75,10 +73,10 @@ function downloadPNG() {
     :data-confetti-text="confettiText"
     :popoverPosition="popoverPosition"
     :options="[
-      { text: 'Copy SVG' , onClick: copySVG },
-      { text: 'Copy Data URL' , onClick: copyDataUrl },
-      { text: 'Download SVG' , onClick: downloadSVG },
-      { text: 'Download PNG' , onClick: downloadPNG },
+      { text: 'Copy SVG', onClick: copySVG },
+      { text: 'Copy Data URL', onClick: copyDataUrl },
+      { text: 'Download SVG', onClick: downloadSVG },
+      { text: 'Download PNG', onClick: downloadPNG },
     ]"
   />
 </template>

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

@@ -1,41 +1,44 @@
 <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>
   <h1
     class="icon-name confetti-button"
-    :class="{animate}"
+    :class="{ animate }"
     data-confetti-text="Copied!"
     @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/IconsCategoryOverview.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, onMounted, watch, watchEffect } from 'vue';
+import { ref, computed, defineAsyncComponent, onMounted } from 'vue';
 import type { IconEntity, Category } from '../../types';
 import useSearch from '../../composables/useSearch';
 import InputSearch from '../base/InputSearch.vue';
 import useSearchInput from '../../composables/useSearchInput';
 import useSearchShortcut from '../../utils/useSearchShortcut';
 import StickyBar from './StickyBar.vue';
-import IconsCategory from './IconsCategory.vue';
+import IconsCategory, { CategoryRow } from './IconsCategory.vue';
 import useFetchTags from '../../composables/useFetchTags';
 import useFetchCategories from '../../composables/useFetchCategories';
 import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
 import chunkArray from '../../utils/chunkArray';
-import { CategoryRow } from './IconsCategory.vue';
 import useScrollToCategory from '../../composables/useScrollToCategory';
 import CarbonAdOverlay from './CarbonAdOverlay.vue';
+import useSearchPlaceholder from '../../utils/useSearchPlaceholder.ts';
 
 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
@@ -40,10 +40,10 @@ const { execute: fetchTags, data: tags } = useFetchTags();
 const { execute: fetchCategories, data: categoriesMap } = useFetchCategories();
 
 const overviewEl = ref<HTMLElement | null>(null);
-const { width: containerWidth } = useElementSize(overviewEl)
+const { width: containerWidth } = useElementSize(overviewEl);
 
 const columnSize = computed(() => {
-  return Math.floor((containerWidth.value) / ((ICON_SIZE + ICON_GRID_GAP)));
+  return Math.floor(containerWidth.value / (ICON_SIZE + ICON_GRID_GAP));
 });
 
 const mappedIcons = computed(() => {
@@ -71,17 +71,18 @@ const searchResults = useSearch(searchQueryDebounced, mappedIcons, [
 const categories = computed(() => {
   if (!props.categories?.length || !props.icons?.length) return [];
 
-  return props.categories
-    .map(({ name, title }) => {
+  return props.categories.map(({ name, title }) => {
     const categoryIcons = props.icons.filter((icon) => {
-        const iconCategories = icon?.externalLibrary ? icon.categories : props.iconCategories[icon.name]
+      const iconCategories = icon?.externalLibrary
+        ? icon.categories
+        : props.iconCategories[icon.name];
 
       return iconCategories?.includes(name);
     });
 
     const searchedCategoryIcons = isSearching
       ? categoryIcons.filter((icon) =>
-            searchResults.value.some((item) => item?.name === icon?.name)
+          searchResults.value.some((item) => item?.name === icon?.name),
         )
       : categoryIcons;
 
@@ -90,7 +91,7 @@ const categories = computed(() => {
       name,
       icons: searchedCategoryIcons,
     };
-    })
+  });
 });
 
 const categoriesList = computed(() => {
@@ -107,26 +108,24 @@ const categoriesList = computed(() => {
       return acc;
     }, []);
 });
+const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
 
-const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
-  categoriesList,
-  {
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(categoriesList, {
   itemHeight: ICON_SIZE + ICON_GRID_GAP,
-    overscan: 10
-  },
-)
+  overscan: 10,
+});
 
 useScrollToCategory({
   categories,
   categoriesList,
   scrollTo,
   searchQueryDebounced,
-})
+});
 
 onMounted(() => {
   containerProps.ref.value = document.documentElement;
-  useEventListener(window, 'scroll', containerProps.onScroll)
-})
+  useEventListener(window, 'scroll', containerProps.onScroll);
+});
 
 function onFocusSearchInput() {
   if (tags.value == null) {
@@ -145,16 +144,13 @@ function handleCloseDrawer() {
 
   window.history.pushState({}, '', '/icons/categories');
 }
-
-watchEffect(() => {
-
-  console.log(props.icons.find((icon) => icon.name === 'burger'));
-
-});
 </script>
 
 <template>
-  <div ref="overviewEl" class="overview-container">
+  <div
+    ref="overviewEl"
+    class="overview-container"
+  >
     <StickyBar class="category-search">
       <InputSearch
         :placeholder="`Search ${icons.length} icons ...`"
@@ -166,8 +162,9 @@ watchEffect(() => {
       />
     </StickyBar>
     <NoResults
-      v-if="categories.length === 0"
-      :searchQuery="searchQuery"
+      v-if="searchPlaceholder.isNoResults"
+      :searchQuery="searchPlaceholder.query"
+      :isBrandSearch="searchPlaceholder.isBrand"
       @clear="searchQuery = ''"
     />
     <div v-bind="wrapperProps">
@@ -208,8 +205,4 @@ watchEffect(() => {
 .icons {
   margin-bottom: 8px;
 }
-
-.overview-container {
-  padding-bottom: 288px;
-}
 </style>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, onMounted, onBeforeUnmount, watch } from 'vue';
+import { ref, computed, defineAsyncComponent, onMounted, watch } from 'vue';
 import type { IconEntity } from '../../types';
 import { useElementSize, useEventListener, useVirtualList } from '@vueuse/core';
 import { useRoute } from 'vitepress';
@@ -13,6 +13,7 @@ import useFetchTags from '../../composables/useFetchTags';
 import useFetchCategories from '../../composables/useFetchCategories';
 import chunkArray from '../../utils/chunkArray';
 import CarbonAdOverlay from './CarbonAdOverlay.vue';
+import useSearchPlaceholder from '../../utils/useSearchPlaceholder.ts';
 
 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
@@ -36,10 +37,10 @@ const { execute: fetchTags, data: tags } = useFetchTags();
 const { execute: fetchCategories, data: categories } = useFetchCategories();
 
 const overviewEl = ref<HTMLElement | null>(null);
-const { width: containerWidth } = useElementSize(overviewEl)
+const { width: containerWidth } = useElementSize(overviewEl);
 
 const columnSize = computed(() => {
-  return Math.floor((containerWidth.value) / ((ICON_SIZE + ICON_GRID_GAP)));
+  return Math.floor(containerWidth.value / (ICON_SIZE + ICON_GRID_GAP));
 });
 
 const mappedIcons = computed(() => {
@@ -71,29 +72,27 @@ const searchResults = useSearch(searchQueryDebounced, mappedIcons, [
   { name: 'tags', weight: 2 },
   { name: 'categories', weight: 1 },
 ]);
+const searchPlaceholder = useSearchPlaceholder(searchQuery, searchResults);
 
 const chunkedIcons = computed(() => {
   return chunkArray(searchResults.value, columnSize.value);
 });
 
-const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
-  chunkedIcons,
-  {
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(chunkedIcons, {
   itemHeight: ICON_SIZE + ICON_GRID_GAP,
-    overscan: 10
-  },
-)
+  overscan: 10,
+});
 
 onMounted(() => {
   containerProps.ref.value = document.documentElement;
-  useEventListener(window, 'scroll', containerProps.onScroll)
+  useEventListener(window, 'scroll', containerProps.onScroll);
 
   // Check if we should focus the search input from URL parameter
-  const route = useRoute()
+  const route = useRoute();
   if (route.data?.relativePath && window.location.search.includes('focus')) {
-    searchInput.value?.focus()
+    searchInput.value?.focus();
   }
-})
+});
 
 function setActiveIconName(name: string) {
   activeIconName.value = name;
@@ -113,8 +112,8 @@ const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
 
 watch(searchQueryDebounced, () => {
-  scrollTo(0)
-})
+  scrollTo(0);
+});
 
 function handleCloseDrawer() {
   setActiveIconName('');
@@ -124,7 +123,10 @@ function handleCloseDrawer() {
 </script>
 
 <template>
-  <div ref="overviewEl" class="overview-container">
+  <div
+    ref="overviewEl"
+    class="overview-container"
+  >
     <StickyBar>
       <InputSearch
         :placeholder="`Search ${icons.length} icons ...`"
@@ -136,8 +138,9 @@ function handleCloseDrawer() {
       />
     </StickyBar>
     <NoResults
-      v-if="searchResults.length === 0 && searchQuery !== ''"
-      :searchQuery="searchQuery"
+      v-if="searchPlaceholder.isNoResults"
+      :searchQuery="searchPlaceholder.query"
+      :isBrandSearch="searchPlaceholder.isBrand"
       @clear="searchQuery = ''"
     />
     <IconGrid
@@ -183,8 +186,4 @@ function handleCloseDrawer() {
 .input-wrapper {
   width: 100%;
 }
-
-.overview-container {
-  padding-bottom: 288px;
-}
 </style>

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

@@ -1,56 +1,218 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { bird, squirrel, rabbit } from '../../../data/iconNodes'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
-import {useEventListener} from '@vueuse/core'
-import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
-import { IconNode } from '../../types'
+import { ref, onMounted, computed, markRaw, shallowReadonly, watch } from 'vue';
+import {
+  bird,
+  squirrel,
+  rabbit,
+  ghost,
+  castle,
+  drama,
+  dog,
+  cat,
+  wandSparkles,
+  save,
+  snowflake,
+  cake,
+  fish,
+  turtle,
+  rat,
+  worm,
+  testTubeDiagonal,
+  sword,
+} from '../../../data/iconNodes';
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import { useEventListener } from '@vueuse/core';
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
+import { IconNode } from '../../types';
 
-defineProps<{
-  searchQuery: string
-}>()
+const { searchQuery, isBrandSearch } = defineProps<{
+  searchQuery: string;
+  isBrandSearch: boolean;
+}>();
 
-defineEmits(['clear'])
+defineEmits(['clear']);
 
-const animalIcon = ref<HTMLElement>()
-const randomAnimal = computed<IconNode>(() => {
-  return Math.random() > 0.5 ? squirrel : Math.random() > 0.5 ? rabbit : bird
-})
-const animalComponent = computed(() => createLucideIcon('animal', randomAnimal.value))
-const flip = ref(false)
+interface Placeholder {
+  title: string;
+  message: string;
+  icon: IconNode;
+  finePrint?: string;
+}
+
+const brandPlaceholders: Placeholder[] = shallowReadonly([
+  {
+    title: 'Boooo! What a scary brand logo!',
+    message:
+      '[name] and its friends often haunt this search box, but you won’t ever find them here.',
+    icon: markRaw(ghost),
+  },
+  {
+    title: 'Thank You Mario!',
+    message: 'But [name] is in another castle!',
+    icon: markRaw(castle),
+  },
+  {
+    title: '[name] did audition for our icon set',
+    message: '...but didn’t make the callback.',
+    icon: markRaw(drama),
+  },
+  {
+    title: 'Such Search. Very [name].',
+    message: 'Much not here. So Wow.',
+    icon: markRaw(dog),
+  },
+  {
+    title: 'I Can Has [name]?',
+    message: 'No [name] for you in here.',
+    icon: markRaw(cat),
+  },
+  {
+    title: 'Loading [name]...',
+    message: 'Fatal error: our cartridge contains only open-source pixels.',
+    icon: markRaw(save),
+  },
+  {
+    title: '[name] Shall Not Pass',
+    message: 'Do not look to its coming at first light of any day.',
+    icon: markRaw(wandSparkles),
+  },
+  {
+    title: 'Winter is coming',
+    message: 'But [name] sure isn’t.',
+    icon: markRaw(snowflake),
+  },
+  {
+    title: 'The cake is a lie',
+    message: 'And so is the promise of an icon for [name] at Lucide.',
+    icon: markRaw(cake),
+  },
+  {
+    title: 'It’s not a bug',
+    message: 'Having no [name] icon around is a feature.',
+    icon: markRaw(worm),
+  },
+  {
+    title: 'The lab exploded',
+    message: 'We tried mixing [name] with open-source icons.',
+    icon: markRaw(testTubeDiagonal),
+  },
+  {
+    title: 'It’s Dangerous to Go Alone',
+    message: 'Take this icon instead — it’s not [name], but it might help.',
+    icon: markRaw(sword),
+  },
+]);
+
+const notFoundPlaceholders: Omit<Placeholder, 'title'>[] = shallowReadonly([
+  {
+    message: 'We’ve looked for this icon for a bird’s eye view, but could not find it.',
+    icon: markRaw(bird),
+  },
+  {
+    message: 'We checked every tree. Only acorns, no results.',
+    icon: markRaw(squirrel),
+  },
+  {
+    message: 'You’ve gone too deep into the rabbit hole — this icon doesn’t exist.',
+    icon: markRaw(rabbit),
+  },
+  {
+    message: 'This icon seems to have slipped through the net.',
+    icon: markRaw(fish),
+  },
+  {
+    message: 'This icon might exist in the future… but it hasn’t arrived yet.',
+    icon: markRaw(turtle),
+  },
+  {
+    message: 'Rats! This icon seems to have slipped through the cracks.',
+    icon: markRaw(rat),
+  },
+]);
+
+function randomItem<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+const placeholderIcon = ref<HTMLElement>();
+const placeholder = ref<Placeholder>();
+
+watch(
+  () => isBrandSearch,
+  () => {
+    placeholder.value = isBrandSearch
+      ? {
+          ...randomItem(brandPlaceholders),
+          finePrint:
+            'Lucide does not accept brand logos, and we do not plan to add them in the future. This is due to a combination of legal restrictions, design consistency concerns, and practical maintenance reasons.',
+        }
+      : {
+          title: `No results for “[name]”`,
+          finePrint:
+            'This icon doesn’t seem to exist… yet. Try searching similar terms, browsing existing requests, or opening a new one.',
+          ...randomItem(notFoundPlaceholders),
+        };
+  },
+  { immediate: true },
+);
+const iconComponent = computed(() => createLucideIcon('placeholder', placeholder.value.icon));
+const flip = ref(false);
 
 onMounted(() => {
   useEventListener(document, 'mousemove', (mouseEvent) => {
-    const {width, height, x, y} = animalIcon.value.getBoundingClientRect()
+    const { width, x } = placeholderIcon.value.getBoundingClientRect();
 
-    const centerX = (width / 2) + x
-
-    flip.value = mouseEvent.x < centerX
-  })
-})
+    const centerX = width / 2 + x;
 
+    flip.value = !isBrandSearch && mouseEvent.x < centerX;
+  });
+});
 </script>
 
 <template>
   <div class="no-results">
     <component
-      :is="animalComponent"
-      class="animal-icon"
-      ref="animalIcon"
+      :is="iconComponent"
+      class="placeholder-icon"
+      ref="placeholderIcon"
       :class="{ flip }"
       :strokeWidth="1"
     />
-    <h2 class="no-results-text">
-      No icons found for '{{ searchQuery }}'
-    </h2>
+    <h2 class="no-results-text">{{ placeholder.title.replace('[name]', searchQuery) }}</h2>
+    <p class="no-results-message">
+      {{ placeholder.message.replace('[name]', searchQuery) }}
+    </p>
+    <div class="divider"></div>
+    <p
+      v-if="placeholder.finePrint"
+      class="no-results-fine-print"
+    >
+      {{ placeholder.finePrint }}
+    </p>
     <VPButton
-      text="Clear your search and try again"
-      theme="alt"
+      v-if="isBrandSearch"
+      text="Head over to Simple Icons"
+      theme="brand"
+      :href="`https://simpleicons.org/?q=${searchQuery}`"
+      target="_blank"
+    />
+    <VPButton
+      v-else
+      text="Clear search & try again"
+      theme="brand"
       @click="$emit('clear')"
     />
     <span class="text-divider">or</span>
     <VPButton
-      text="Search on Github issues"
+      v-if="isBrandSearch"
+      text="Read our statement on brand logos"
+      theme="alt"
+      href="https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md"
+      target="_blank"
+    />
+    <VPButton
+      v-else
+      text="Search GitHub issues"
       theme="alt"
       :href="`https://github.com/lucide-icons/lucide/issues?q=is%3Aopen+${searchQuery}`"
       target="_blank"
@@ -63,33 +225,38 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
+  padding-block: 48px;
 }
 
-.animal-icon {
-  width: 160px;
-  height: 160px;
-  color: var(--vp-c-neutral);
-  opacity: 0.8;
-  margin-top: 72px;
+.placeholder-icon {
+  width: 96px;
+  height: 96px;
+  color: var(--vp-c-text-1);
 }
 
-.animal-icon.flip {
+.placeholder-icon.flip {
   transform: rotateY(180deg);
 }
 
-@media (min-width: 960px) {
-  .animal-icon {
-    width: 240px;
-    height: 240px;
-  }
-}
-
 .no-results-text {
-  line-height: 40px;
+  line-height: 1.35;
   font-size: 24px;
   margin-top: 24px;
+  margin-bottom: 8px;
+  text-wrap: balance;
+}
+
+.no-results-message {
+  text-wrap: balance;
+}
+
+.no-results-fine-print {
+  max-inline-size: 60ch;
+  font-size: 14px;
   margin-bottom: 32px;
-  text-align: center;
+  color: var(--vp-c-text-2);
+  text-wrap: balance;
 }
 
 .text-divider {
@@ -97,4 +264,10 @@ onMounted(() => {
   font-size: 16px;
   color: var(--vp-c-neutral);
 }
+.divider {
+  margin: 24px auto 18px;
+  width: 64px;
+  height: 1px;
+  background-color: var(--vp-c-divider);
+}
 </style>

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
+function resetStyle() {
+  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

@@ -0,0 +1,41 @@
+import { ref, Ref, watch } from 'vue';
+import BRAND_STOPWORDS from '../../data/brandStopwords.json' with { type: 'json' };
+
+export default function useSearchPlaceholder(
+  searchQuery: Ref<string, string>,
+  results: Ref<{ name: string }[]>,
+) {
+  const state = ref({
+    isNoResults: false,
+    isBrand: false,
+    query: '',
+  });
+
+  watch(
+    results,
+    () => {
+      const query = searchQuery.value;
+      const searchResults = results.value;
+      if (query.length > 0 && searchResults.length === 0) {
+        for (const stopword of Object.keys(BRAND_STOPWORDS)) {
+          if (stopword.startsWith(query)) {
+            state.value = {
+              isNoResults: true,
+              isBrand: true,
+              query: BRAND_STOPWORDS[stopword],
+            };
+            return;
+          }
+        }
+      }
+      state.value = {
+        isNoResults: query in BRAND_STOPWORDS && searchResults.length === 0 && query !== '',
+        isBrand: query in BRAND_STOPWORDS,
+        query: BRAND_STOPWORDS[query] ?? query,
+      };
+    },
+    { immediate: true },
+  );
+
+  return state;
+}

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/package.json

@@ -9,13 +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",
-    "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/scripts/writeBrandStopwords.mjs

@@ -0,0 +1,15 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+const currentDir = process.cwd();
+const dataDirectory = path.resolve(currentDir, '.vitepress/data');
+const stopwordsSource = path.resolve(currentDir, `../brand-stopwords.json`);
+const stopwordsFile = path.resolve(dataDirectory, `brandStopwords.json`);
+
+fs.copyFile(stopwordsSource, stopwordsFile)
+  .then(() => {
+    console.log('Successfully copied brandStopwords.json file');
+  })
+  .catch((error) => {
+    throw new Error(`Something went wrong generating the brandStopwords.json file,\n ${error}`);
+  });

docs/scripts/writeVercelOutput.mjs

@@ -32,7 +32,7 @@ const vercelRouteConfig = {
     },
     {
       src: '(?<url>/api/.*)',
-      dest: '/__fallback?url=$url',
+      dest: '/__nitro?url=$url',
     },
     ...iconAliasesRedirectRoutes,
   ],

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

@@ -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="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/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/bubbles.json

@@ -2,7 +2,8 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "vqh2602",
-    "jguddas"
+    "jguddas",
+    "karsa-mistmere"
   ],
   "tags": [
     "water",

icons/bubbles.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M7.2 14.8a2 2 0 0 1 2 2" />
+  <path d="M7.001 15.085A1.5 1.5 0 0 1 9 16.5" />
   <circle cx="18.5" cy="8.5" r="3.5" />
   <circle cx="7.5" cy="16.5" r="5.5" />
   <circle cx="7.5" cy="4.5" r="2.5" />

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/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

@@ -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="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/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

@@ -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="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/flashlight-off.json

@@ -4,10 +4,17 @@
     "Andreto",
     "ericfennis",
     "karsa-mistmere",
-    "csandman"
+    "csandman",
+    "jamiemlaw"
   ],
   "tags": [
-    "torch"
+    "torch",
+    "light",
+    "beam",
+    "emergency",
+    "safety",
+    "tool",
+    "bright"
   ],
   "categories": [
     "photography",

icons/flashlight-off.svg

@@ -9,8 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M16 16v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4" />
-  <path d="M7 2h11v4c0 2-2 2-2 4v1" />
-  <line x1="11" x2="18" y1="6" y2="6" />
-  <line x1="2" x2="22" y1="2" y2="22" />
+  <path d="M11.652 6H18" />
+  <path d="M12 13v1" />
+  <path d="M16 16v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-8a4 4 0 0 0-.8-2.4l-.6-.8A3 3 0 0 1 6 7V6" />
+  <path d="m2 2 20 20" />
+  <path d="M7.649 2H17a1 1 0 0 1 1 1v4a3 3 0 0 1-.6 1.8l-.6.8a4 4 0 0 0-.55 1.007" />
 </svg>

icons/flashlight.json

@@ -2,10 +2,17 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "csandman",
-    "ericfennis"
+    "ericfennis",
+    "jamiemlaw"
   ],
   "tags": [
-    "torch"
+    "torch",
+    "light",
+    "beam",
+    "emergency",
+    "safety",
+    "tool",
+    "bright"
   ],
   "categories": [
     "photography",

icons/flashlight.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M18 6c0 2-2 2-2 4v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V10c0-2-2-2-2-4V2h12z" />
-  <line x1="6" x2="18" y1="6" y2="6" />
-  <line x1="12" x2="12" y1="12" y2="12" />
+  <path d="M12 13v1" />
+  <path d="M17 2a1 1 0 0 1 1 1v4a3 3 0 0 1-.6 1.8l-.6.8A4 4 0 0 0 16 12v8a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-8a4 4 0 0 0-.8-2.4l-.6-.8A3 3 0 0 1 6 7V3a1 1 0 0 1 1-1z" />
+  <path d="M6 6h12" />
 </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/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/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/plug.json

@@ -10,7 +10,11 @@
     "energy",
     "electronics",
     "socket",
-    "outlet"
+    "outlet",
+    "power",
+    "voltage",
+    "current",
+    "charger"
   ],
   "categories": [
     "devices",

icons/plug.svg

@@ -10,7 +10,7 @@
   stroke-linejoin="round"
 >
   <path d="M12 22v-5" />
-  <path d="M9 8V2" />
   <path d="M15 8V2" />
-  <path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" />
+  <path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z" />
+  <path d="M9 8V2" />
 </svg>

icons/scooter.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "Ahmed-Dghaies",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "vehicle",
+    "drive",
+    "trip",
+    "journey",
+    "transport",
+    "electric",
+    "ride",
+    "urban",
+    "commute",
+    "speed"
+  ],
+  "categories": [
+    "transportation"
+  ]
+}

icons/scooter.svg

@@ -0,0 +1,16 @@
+<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 4h-3.5l2 11.05" />
+  <path d="M6.95 17h5.142c.523 0 .95-.406 1.063-.916a6.5 6.5 0 0 1 5.345-5.009" />
+  <circle cx="19.5" cy="17.5" r="2.5" />
+  <circle cx="4.5" cy="17.5" r="2.5" />
+</svg>

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

@@ -0,0 +1,16 @@
+<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="11" cy="11" r="8" />
+  <path d="m21 21-4.3-4.3" />
+  <path d="M11 7v4" />
+  <path d="M11 15h.01" />
+</svg>

icons/square-bottom-dashed-scissors.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "eden881"
   ],
   "tags": [
     "cut",

icons/square-bottom-dashed-scissors.svg

@@ -9,12 +9,18 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M4 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2" />
-  <path d="M10 22H8" />
-  <path d="M16 22h-2" />
-  <circle cx="8" cy="8" r="2" />
-  <path d="M9.414 9.414 12 12" />
-  <path d="M14.8 14.8 18 18" />
-  <circle cx="8" cy="16" r="2" />
-  <path d="m18 6-8.586 8.586" />
+  <line x1="5" y1="3" x2="19" y2="3" />
+  <line x1="3" y1="5" x2="3" y2="19" />
+  <line x1="21" y1="5" x2="21" y2="19" />
+  <line x1="9" y1="21" x2="10" y2="21" />
+  <line x1="14" y1="21" x2="15" y2="21" />
+  <path d="M 3 5 A2 2 0 0 1 5 3" />
+  <path d="M 19 3 A2 2 0 0 1 21 5" />
+  <path d="M 5 21 A2 2 0 0 1 3 19" />
+  <path d="M 21 19 A2 2 0 0 1 19 21" />
+  <circle cx="8.5" cy="8.5" r="1.5" />
+  <line x1="9.56066" y1="9.56066" x2="12" y2="12" />
+  <line x1="17" y1="17" x2="14.82" y2="14.82" />
+  <circle cx="8.5" cy="15.5" r="1.5" />
+  <line x1="9.56066" y1="14.43934" x2="17" y2="7" />
 </svg>

icons/square-scissors.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "eden881"
   ],
   "tags": [
     "cut",

icons/square-scissors.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="20" height="20" x="2" y="2" rx="2" />
-  <circle cx="8" cy="8" r="2" />
-  <path d="M9.414 9.414 12 12" />
-  <path d="M14.8 14.8 18 18" />
-  <circle cx="8" cy="16" r="2" />
-  <path d="m18 6-8.586 8.586" />
+  <rect width="18" height="18" x="3" y="3" rx="2" />
+  <circle cx="8.5" cy="8.5" r="1.5" />
+  <line x1="9.56066" y1="9.56066" x2="12" y2="12" />
+  <line x1="17" y1="17" x2="14.82" y2="14.82" />
+  <circle cx="8.5" cy="15.5" r="1.5" />
+  <line x1="9.56066" y1="14.43934" x2="17" y2="7" />
 </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/thermometer-sun.json

@@ -2,7 +2,8 @@
   "$schema": "../icon.schema.json",
   "contributors": [
     "ericfennis",
-    "karsa-mistmere"
+    "karsa-mistmere",
+    "jguddas"
   ],
   "tags": [
     "temperature",

icons/thermometer-sun.svg

@@ -9,10 +9,10 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M12 9a4 4 0 0 0-2 7.5" />
-  <path d="M12 3v2" />
-  <path d="m6.6 18.4-1.4 1.4" />
-  <path d="M20 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z" />
-  <path d="M4 13H2" />
-  <path d="M6.34 7.34 4.93 5.93" />
+  <path d="M12 2v2" />
+  <path d="M12 8a4 4 0 0 0-1.645 7.647" />
+  <path d="M2 12h2" />
+  <path d="M20 14.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z" />
+  <path d="m4.93 4.93 1.41 1.41" />
+  <path d="m6.34 17.66-1.41 1.41" />
 </svg>

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" />

icons/tickets.json

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

icons/tickets.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <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" />

icons/van.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "Ahmed-Dghaies",
+    "karsa-mistmere"
+  ],
+  "tags": [
+    "minivan",
+    "cart",
+    "wagon",
+    "truck",
+    "lorry",
+    "trailer",
+    "camper",
+    "vehicle",
+    "drive",
+    "trip",
+    "journey",
+    "van",
+    "transport",
+    "carriage",
+    "delivery",
+    "travel"
+  ],
+  "categories": [
+    "transportation"
+  ]
+}

icons/van.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="M13 6v5a1 1 0 0 0 1 1h6.102a1 1 0 0 1 .712.298l.898.91a1 1 0 0 1 .288.702V17a1 1 0 0 1-1 1h-3" />
+  <path d="M5 18H3a1 1 0 0 1-1-1V8a2 2 0 0 1 2-2h12c1.1 0 2.1.8 2.4 1.8l1.176 4.2" />
+  <path d="M9 18h5" />
+  <circle cx="16" cy="18" r="2" />
+  <circle cx="7" cy="18" r="2" />
+</svg>

icons/weight-tilde.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "../icon.schema.json",
+  "contributors": [
+    "nathan-de-pachtere"
+  ],
+  "tags": [
+    "measure",
+    "scale",
+    "estimate",
+    "load",
+    "balance",
+    "size",
+    "measurement",
+    "quantity",
+    "mass"
+  ],
+  "categories": [
+    "math"
+  ]
+}

icons/weight-tilde.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="M6.5 8a2 2 0 0 0-1.906 1.46L2.1 18.5A2 2 0 0 0 4 21h16a2 2 0 0 0 1.925-2.54L19.4 9.5A2 2 0 0 0 17.48 8z" />
+  <path d="M7.999 15a2.5 2.5 0 0 1 4 0 2.5 2.5 0 0 0 4 0" />
+  <circle cx="12" cy="5" r="3" />
+</svg>

lint-staged.config.mjs

@@ -7,8 +7,8 @@ const filenamesToAjvOption = (filenames) => filenames.map((filename) => `-d ${fi
 /** @satisfies {import('lint-staged').Config} */
 const config = {
   'icons/*.svg': [
-    'node ./scripts/optimizeStagedSvgs.mjs',
-    'node ./scripts/generateNextJSAliases.mjs',
+    'node ./scripts/optimizeStagedSvgs.mts',
+    'node ./scripts/generateNextJSAliases.mts',
   ],
   'icons/*.json': (filenames) => [
     `ajv --spec=draft2020 -s icon.schema.json ${filenamesToAjvOption(filenames)}`,

package.json

@@ -73,9 +73,9 @@
     "zod": "^3.25.67"
   },
   "engines": {
-    "node": ">=23.0.0"
+    "node": ">=24.11.1"
   },
-  "packageManager": "pnpm@10.23.0+sha512.21c4e5698002ade97e4efe8b8b4a89a8de3c85a37919f957e7a0f30f38fbc5bbdd05980ffe29179b2fb6e6e691242e098d945d1601772cad0fef5fb6411e2a4b",
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
   "pnpm": {
     "packageExtensions": {
       "vue-template-compiler": {

packages/lucide-angular-next/README.md

@@ -0,0 +1,73 @@
+<p align="center">
+  <a href="https://github.com/lucide-icons/lucide">
+    <img src="https://lucide.dev/package-logos/lucide-angular.svg" alt="Lucide icon library for Angular applications." width="540">
+  </a>
+</p>
+
+<p align="center">
+Lucide icon library for Angular applications.
+</p>
+
+<div align="center">
+
+  [![npm](https://img.shields.io/npm/v/lucide-angular?color=blue)](https://www.npmjs.com/package/lucide-angular)
+  ![NPM Downloads](https://img.shields.io/npm/dw/lucide-angular)
+  [![GitHub](https://img.shields.io/github/license/lucide-icons/lucide)](https://lucide.dev/license)
+</div>
+
+<p align="center">
+  <a href="https://lucide.dev/guide/">About</a>
+  ·
+  <a href="https://lucide.dev/icons/">Icons</a>
+  ·
+  <a href="https://lucide.dev/guide/packages/lucide-angular">Documentation</a>
+  ·
+  <a href="https://lucide.dev/license">License</a>
+</p>
+
+# Lucide Angular
+
+Implementation of the lucide icon library for angular applications.
+
+## Installation
+
+```sh
+pnpm add lucide-angular
+```
+
+```sh
+npm install lucide-angular
+```
+
+```sh
+yarn add lucide-angular
+```
+
+```sh
+bun add lucide-angular
+```
+
+## Documentation
+
+For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-angular)
+
+## Community
+
+Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users.
+
+## License
+
+Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/license).
+
+## Sponsors
+
+<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
+  <img src="https://lucide.dev/vercel.svg" alt="Powered by Vercel" width="200" />
+</a>
+
+<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://lucide.dev/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
+
+### Awesome backers 🍺
+
+<a href="https://www.scipress.io?utm_source=lucide"><img src="https://lucide.dev/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>
+<a href="https://github.com/pdfme/pdfme"><img src="https://lucide.dev/sponsors/pdfme.svg" width="180" alt="pdfme sponsor badge" /></a>

packages/lucide-angular-next/angular.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "@lucide/angular": {
+      "projectType": "library",
+      "root": ".",
+      "sourceRoot": "./src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "configurations": {
+            "production": {
+              "tsConfig": "./tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "./tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "tsConfig": "./tsconfig.spec.json",
+            "coverage": true,
+            "coverageReporters": ["html", "lcov"],
+            "coverageExclude": ["src/icons/*"],
+            "coverageThresholds": {
+              "statements": 80,
+              "branches": 80,
+              "functions": 80,
+              "lines": 80
+            }
+          }
+        }
+      }
+    }
+  }
+}

packages/lucide-angular-next/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./dist",
+  "lib": {
+    "entryFile": "./src/public-api.ts"
+  }
+}

packages/lucide-angular-next/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@lucide/angular",
+  "version": "0.0.1",
+  "scripts": {
+    "ng": "ng",
+    "watch": "ng build --watch --configuration development",
+    "prebuild": "pnpm clean && pnpm copy:license && pnpm build:icons",
+    "build": "pnpm build:ng",
+    "copy:license": "cp ../../LICENSE ./LICENSE",
+    "clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
+    "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mts --renderUniqueKey --iconFileExtension=.ts --exportFileName=lucide-angular.ts",
+    "build:ng": "ng build --configuration production",
+    "test": "ng test --no-watch",
+    "test:watch": "ng test",
+    "lint": "npx eslint 'src/**/*.{js,jsx,ts,tsx,html,css,scss}' --quiet --fix",
+    "e2e": "ng e2e",
+    "version": "pnpm version --git-tag-version=false"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
+  "private": true,
+  "devDependencies": {
+    "@angular/build": "^21.0.3",
+    "@angular/cli": "^21.0.3",
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/compiler-cli": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "@angular/router": "^21.0.0",
+    "@lucide/build-icons": "workspace:*",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
+    "jsdom": "^27.1.0",
+    "ng-packagr": "^21.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.16"
+  },
+  "peerDependencies": {
+    "@angular/common": "13.x - 21.x",
+    "@angular/core": "13.x - 21.x"
+  }
+}

packages/lucide-angular-next/scripts/exportTemplate.mts

@@ -0,0 +1,68 @@
+import base64SVG from '@lucide/build-icons/utils/base64SVG';
+import defineExportTemplate from '@lucide/build-icons/utils/defineExportTemplate';
+
+export default defineExportTemplate(async ({
+  componentName,
+  iconName,
+  children,
+  getSvg,
+  deprecated,
+  deprecationReason,
+  aliases = [],
+  toPascalCase,
+}) => {
+  const svgContents = await getSvg();
+  const svgBase64 = base64SVG(svgContents);
+  const angularComponentName = `Lucide${componentName}`;
+  const selectors = [`svg[lucide${toPascalCase(iconName)}]`];
+  const aliasComponentNames: string[] = [];
+  for (const alias of aliases) {
+    const aliasName = typeof alias === 'string' ? alias : alias.name;
+    const aliasComponentName = `Lucide${toPascalCase(aliasName)}`;
+    const aliasSelector = `svg[lucide${toPascalCase(aliasName)}]`;
+    if (!selectors.includes(aliasSelector)) {
+      selectors.push(aliasSelector);
+    }
+    if (aliasComponentName !== angularComponentName && !aliasComponentNames.includes(aliasComponentName)) {
+      aliasComponentNames.push(aliasComponentName);
+    }
+  }
+
+  return `\
+import { LucideIconData } from '../types';
+import { LucideIconBase } from '../lucide-icon-base';
+import { Component, signal } from '@angular/core';
+
+/**
+ * @component @name ${componentName}
+ * @description Lucide SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-angular - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
+*/
+@Component({
+  selector: '${selectors.join(', ')}',
+  templateUrl: '../lucide-icon.html',
+  standalone: true,
+})
+export class ${angularComponentName} extends LucideIconBase {
+  static iconData: LucideIconData = ${JSON.stringify(children)};
+  static iconName = '${iconName}';
+  override readonly icon = signal(${angularComponentName}.iconData);
+  override readonly name = signal(${angularComponentName}.iconName);
+}
+
+${aliasComponentNames.map((aliasComponentName) => {
+    return `
+/**
+ * @deprecated
+ * @see ${angularComponentName}
+ */
+export const ${aliasComponentName} = ${angularComponentName};
+`;
+  }).join(`\n\n`)}
+`;
+});

packages/lucide-angular-next/src/default-attributes.ts

@@ -0,0 +1,11 @@
+export default {
+  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',
+};

packages/lucide-angular-next/src/lucide-config.spec.ts

@@ -0,0 +1,25 @@
+import { TestBed } from '@angular/core/testing';
+import { LUCIDE_CONFIG, lucideDefaultConfig, provideLucideConfig } from './lucide-config';
+
+describe('Lucide config', () => {
+  describe('LUCIDE_CONFIG', () => {
+    it('should use default', () => {
+      expect(TestBed.inject(LUCIDE_CONFIG)).toBe(lucideDefaultConfig);
+    });
+  });
+  describe('provideLucideConfig', () => {
+    it('should use defaults', () => {
+      TestBed.configureTestingModule({
+        providers: [
+          provideLucideConfig({
+            size: 18,
+          }),
+        ],
+      });
+      expect(TestBed.inject(LUCIDE_CONFIG)).toEqual({
+        ...lucideDefaultConfig,
+        size: 18,
+      });
+    });
+  });
+});

packages/lucide-angular-next/src/lucide-config.ts

@@ -0,0 +1,38 @@
+import { InjectionToken, Provider } from '@angular/core';
+
+/**
+ * A configuration service for Lucide icon components.
+ *
+ * You can inject this service, typically in AppComponent, and customize its property values in
+ * order to provide default values for all the icons used in the application.
+ */
+export interface LucideConfig {
+  color: string;
+  size: number;
+  strokeWidth: number;
+  absoluteStrokeWidth: boolean;
+}
+
+export const lucideDefaultConfig: LucideConfig = {
+  color: 'currentColor',
+  size: 24,
+  strokeWidth: 2,
+  absoluteStrokeWidth: false,
+};
+
+export const LUCIDE_CONFIG = new InjectionToken<LucideConfig>(
+  'Lucide icon config',
+  {
+    factory: () => lucideDefaultConfig,
+  },
+);
+
+export function provideLucideConfig(config: Partial<LucideConfig>): Provider {
+  return {
+    provide: LUCIDE_CONFIG,
+    useValue: {
+      ...lucideDefaultConfig,
+      ...config,
+    },
+  };
+}

packages/lucide-angular-next/src/lucide-icon-base.ts

@@ -0,0 +1,114 @@
+import {
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  Renderer2,
+  Signal,
+} from '@angular/core';
+import { LUCIDE_CONFIG } from './lucide-config';
+import { LucideIconData, Nullable } from './types';
+import defaultAttributes from './default-attributes';
+import { formatFixed } from './utils/format-fixed';
+import { toKebabCase } from './utils/to-kebab-case';
+
+function transformNumericStringInput(
+  value: Nullable<string | number>,
+  defaultValue: number,
+): number {
+  if (typeof value === 'string') {
+    const parsedValue = parseInt(value, 10);
+    if (isNaN(parsedValue)) {
+      return defaultValue;
+    }
+    return parsedValue;
+  }
+  return value ?? defaultValue;
+}
+
+/**
+ * @internal
+ */
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'svg[lucideIcon]',
+  templateUrl: './lucide-icon.html',
+  host: {
+    ...defaultAttributes,
+    class: 'lucide',
+    '[attr.width]': 'size().toString(10)',
+    '[attr.height]': 'size().toString(10)',
+    '[attr.stroke]': 'color()',
+    '[attr.stroke-width]': 'computedStrokeWidth()',
+    '[attr.aria-hidden]': 'ariaHidden()',
+  },
+})
+export abstract class LucideIconBase {
+  abstract icon: Signal<Nullable<LucideIconData>>;
+  abstract name: Signal<Nullable<string>>;
+  protected readonly iconConfig = inject(LUCIDE_CONFIG);
+  protected readonly elRef = inject(ElementRef);
+  protected readonly renderer = inject(Renderer2);
+  readonly title = input<Nullable<string>>();
+  readonly ariaHidden = computed(() => {
+    return !this.title();
+  });
+  readonly size = input(this.iconConfig.size, {
+    transform: (value: Nullable<string | number>) =>
+      transformNumericStringInput(value, this.iconConfig.size),
+  });
+  readonly color = input(this.iconConfig.color, {
+    transform: (value: Nullable<string>) => value ?? this.iconConfig.color,
+  });
+  readonly strokeWidth = input(this.iconConfig.strokeWidth, {
+    transform: (value: Nullable<string | number>) =>
+      transformNumericStringInput(value, this.iconConfig.strokeWidth),
+  });
+  readonly absoluteStrokeWidth = input(this.iconConfig.absoluteStrokeWidth, {
+    transform: (value: Nullable<boolean>) => value ?? this.iconConfig.absoluteStrokeWidth,
+  });
+  protected readonly computedStrokeWidth = computed(() => {
+    const strokeWidth = this.strokeWidth();
+    const size = this.size();
+    return this.absoluteStrokeWidth()
+      ? formatFixed(strokeWidth / (size / 24))
+      : strokeWidth.toString(10);
+  });
+
+  constructor() {
+    effect((onCleanup) => {
+      const icon = this.icon();
+      if (icon) {
+        const elements = icon.map(([name, attrs]) => {
+          const element = this.renderer.createElement(name, 'http://www.w3.org/2000/svg');
+          for (const [name, value] of Object.entries(attrs)) {
+            this.renderer.setAttribute(
+              element,
+              name,
+              typeof value === 'number' ? value.toString(10) : value,
+            );
+          }
+          this.renderer.appendChild(this.elRef.nativeElement, element);
+          return element;
+        });
+        onCleanup(() => {
+          for (const element of elements) {
+            this.renderer.removeChild(this.elRef.nativeElement, element);
+          }
+        });
+      }
+    });
+    effect((onCleanup) => {
+      const name = this.name();
+      if (name) {
+        const cssClass = `lucide-${toKebabCase(name)}`;
+        this.renderer.addClass(this.elRef.nativeElement, cssClass);
+        onCleanup(() => {
+          this.renderer.removeClass(this.elRef.nativeElement, cssClass);
+        });
+      }
+    });
+  }
+}

packages/lucide-angular-next/src/lucide-icon.html

@@ -0,0 +1,4 @@
+@if (title(); as titleValue) {
+  <title>{{ titleValue }}</title>
+}
+<ng-content />

packages/lucide-angular-next/src/lucide-icon.spec.ts

@@ -0,0 +1,243 @@
+import { Component, input, inputBinding, signal, WritableSignal } from '@angular/core';
+import { LucideIcon } from './lucide-icon';
+import { LucideIconData, LucideIconInput } from './types';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideLucideIcons } from './lucide-icons';
+import { LucideActivity } from './icons/activity';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: `@if (icon(); as iconData) {
+    <svg [lucideIcon]="iconData">
+      <rect x="1" y="1" width="22" height="22" />
+    </svg>
+  }`,
+  imports: [LucideIcon],
+})
+class TestHostComponent {
+  readonly icon = input<LucideIconData>();
+}
+
+describe('LucideIcon', () => {
+  let component: LucideIcon;
+  let fixture: ComponentFixture<LucideIcon>;
+  let icon: WritableSignal<LucideIconInput | null | undefined>;
+  let name: WritableSignal<string | undefined>;
+  let title: WritableSignal<string | undefined>;
+  let color: WritableSignal<string | undefined>;
+  let size: WritableSignal<string | number | undefined>;
+  let strokeWidth: WritableSignal<string | number | undefined>;
+  let absoluteStrokeWidth: WritableSignal<boolean | undefined>;
+  const getSvgAttribute = (attr: string) => fixture.nativeElement.getAttribute(attr);
+  const testIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
+  const testIcon2: LucideIconData = [
+    ['circle', { cx: 12, cy: 12, r: 8 }],
+    ['polyline', { points: '1 1 22 22' }],
+  ];
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      providers: [provideLucideIcons({ demo: testIcon })],
+    });
+    icon = signal('demo');
+    name = signal(undefined);
+    title = signal(undefined);
+    color = signal(undefined);
+    size = signal(undefined);
+    strokeWidth = signal(undefined);
+    absoluteStrokeWidth = signal(undefined);
+    fixture = TestBed.createComponent(LucideIcon, {
+      inferTagName: true,
+      bindings: [
+        inputBinding('lucideIcon', icon),
+        inputBinding('name', name),
+        inputBinding('title', title),
+        inputBinding('color', color),
+        inputBinding('size', size),
+        inputBinding('strokeWidth', strokeWidth),
+        inputBinding('absoluteStrokeWidth', absoluteStrokeWidth),
+      ],
+    });
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should render children', () => {
+    icon.set(testIcon2);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.innerHTML).toBe(
+      '<!--container--><circle cx="12" cy="12" r="8"></circle><polyline points="1 1 22 22"></polyline>',
+    );
+  });
+
+  it('should remove children on change', () => {
+    icon.set(null);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.innerHTML).toBe('<!--container-->');
+  });
+
+  describe('iconInput', () => {
+    it('should support LucideIconData input', () => {
+      icon.set(testIcon);
+      name.set('custom-name');
+      fixture.detectChanges();
+
+      expect(component.icon()).toBe(testIcon);
+      expect(component.name()).toBe('custom-name');
+      expect(fixture.nativeElement.innerHTML).toBe(
+        '<!--container--><polyline points="1 1 22 22"></polyline>',
+      );
+    });
+    it('should support LucideIconComponentType input', () => {
+      icon.set(LucideActivity);
+      fixture.detectChanges();
+
+      expect(component.icon()).toBe(LucideActivity.iconData);
+      expect(component.name()).toBe(LucideActivity.iconName);
+    });
+    it('should support string icon name', () => {
+      icon.set('demo');
+      fixture.detectChanges();
+
+      expect(component.icon()).toBe(testIcon);
+      expect(component.name()).toBe('demo');
+    });
+    it('should throw error if no icon founds', () => {
+      icon.set('invalid');
+      expect(() => fixture.detectChanges()).toThrowError(`Unable to resolve icon 'invalid'`);
+    });
+  });
+
+  describe('class', () => {
+    it('should add all classes', () => {
+      fixture.detectChanges();
+      expect(getSvgAttribute('class')).toBe('lucide lucide-demo');
+    });
+    it('should add class from name, even if icon has name', () => {
+      icon.set(LucideActivity);
+      name.set('custom-name');
+      fixture.detectChanges();
+
+      expect(getSvgAttribute('class')).toBe('lucide lucide-custom-name');
+    });
+    it('should add class icon if available', () => {
+      icon.set(LucideActivity);
+      fixture.detectChanges();
+
+      expect(getSvgAttribute('class')).toBe('lucide lucide-activity');
+    });
+    it('should remove class on change', () => {
+      icon.set(null);
+      fixture.detectChanges();
+      expect(getSvgAttribute('class')).toBe('lucide');
+    });
+  });
+
+  describe('color', () => {
+    it('should default to currentColor', () => {
+      fixture.detectChanges();
+      expect(getSvgAttribute('stroke')).toBe('currentColor');
+    });
+    it('should set color', () => {
+      color.set('red');
+      fixture.detectChanges();
+      expect(getSvgAttribute('stroke')).toBe('red');
+    });
+  });
+
+  describe('size', () => {
+    it('should default to 24', () => {
+      fixture.detectChanges();
+      expect(getSvgAttribute('width')).toBe('24');
+      expect(getSvgAttribute('height')).toBe('24');
+    });
+    it('should set size', () => {
+      size.set(12);
+      fixture.detectChanges();
+      expect(getSvgAttribute('width')).toBe('12');
+      expect(getSvgAttribute('height')).toBe('12');
+    });
+    it('should allow string size', () => {
+      size.set('18');
+      fixture.detectChanges();
+      expect(getSvgAttribute('width')).toBe('18');
+      expect(getSvgAttribute('height')).toBe('18');
+    });
+    it('should use default on invalid string', () => {
+      size.set('large');
+      fixture.detectChanges();
+      expect(getSvgAttribute('width')).toBe('24');
+      expect(getSvgAttribute('height')).toBe('24');
+    });
+  });
+
+  describe('strokeWidth', () => {
+    it('should default to 2', () => {
+      fixture.detectChanges();
+      expect(getSvgAttribute('stroke-width')).toBe('2');
+    });
+    it('should set stroke width', () => {
+      strokeWidth.set(1.41);
+      fixture.detectChanges();
+      expect(getSvgAttribute('stroke-width')).toBe('1.41');
+    });
+    it('should allow string stroke width', () => {
+      strokeWidth.set('1px');
+      fixture.detectChanges();
+      expect(getSvgAttribute('stroke-width')).toBe('1');
+    });
+  });
+
+  describe('absoluteStrokeWidth', () => {
+    it('should not adjust stroke width', () => {
+      strokeWidth.set(2);
+      size.set(12);
+      absoluteStrokeWidth.set(false);
+      fixture.detectChanges();
+      expect(getSvgAttribute('stroke-width')).toBe('2');
+    });
+    it('should adjust stroke width', () => {
+      strokeWidth.set(2);
+      size.set(12);
+      absoluteStrokeWidth.set(true);
+      fixture.detectChanges();
+      expect(getSvgAttribute('stroke-width')).toBe('4');
+    });
+  });
+
+  describe('title', () => {
+    it('should set title if provided', () => {
+      title.set('Foobar');
+      fixture.detectChanges();
+      const titleEl = fixture.debugElement.query(By.css('title')).nativeElement;
+      expect(titleEl).toBeDefined();
+      expect(titleEl.textContent).toBe('Foobar');
+    });
+    it('should not set aria-hidden when title is set', () => {
+      title.set('Foobar');
+      fixture.detectChanges();
+      expect(getSvgAttribute('aria-hidden')).toBeUndefined;
+    });
+    it('should set aria-hidden if no title is provided', () => {
+      title.set(undefined);
+      fixture.detectChanges();
+      expect(getSvgAttribute('aria-hidden')).toBeUndefined;
+    });
+  });
+
+  describe('content projection', () => {
+    it('should project content', () => {
+      const hostFixture = TestBed.createComponent(TestHostComponent);
+      hostFixture.componentRef.setInput('icon', testIcon);
+      hostFixture.detectChanges();
+      hostFixture.componentRef.setInput('icon', testIcon2);
+      hostFixture.detectChanges();
+      const rect = hostFixture.debugElement.query(By.css('rect')).nativeElement;
+      expect(rect).toBeInstanceOf(SVGElement);
+      expect(rect.outerHTML).toBe('<rect x="1" y="1" width="22" height="22"></rect>');
+    });
+  });
+});

packages/lucide-angular-next/src/lucide-icon.ts

@@ -0,0 +1,62 @@
+import { Component, computed, inject, input } from '@angular/core';
+import { isLucideIconComponent, isLucideIconData, LucideIconInput } from './types';
+import { LucideIconBase } from './lucide-icon-base';
+import { LUCIDE_ICONS } from './lucide-icons';
+import { LucideIconData } from './types';
+import { toKebabCase } from './utils/to-kebab-case';
+
+interface LucideResolvedIcon {
+  name?: string | null;
+  data: LucideIconData;
+}
+
+@Component({
+  selector: 'svg[lucideIcon]',
+  templateUrl: './lucide-icon.html',
+  standalone: true,
+})
+export class LucideIcon extends LucideIconBase {
+  protected readonly icons = inject(LUCIDE_ICONS);
+  readonly nameInput = input<string | null>(null, { alias: 'name' });
+  readonly iconInput = input.required<LucideIconInput | null>({
+    alias: 'lucideIcon',
+  });
+  readonly resolvedIcon = computed<LucideResolvedIcon | null>(() => {
+    return this.resolveIcon(this.nameInput(), this.iconInput());
+  });
+  override readonly name = computed<string | null>(() => {
+    return this.resolvedIcon()?.name ?? null;
+  });
+  override readonly icon = computed<LucideIconData | null>(() => {
+    return this.resolvedIcon()?.data ?? null;
+  });
+
+  protected resolveIcon(
+    name: string | null | undefined,
+    icon: LucideIconInput | null | undefined,
+  ): LucideResolvedIcon | null {
+    if (isLucideIconData(icon)) {
+      return {
+        name,
+        data: icon,
+      };
+    } else if (isLucideIconComponent(icon)) {
+      return {
+        name: name ?? icon.iconName,
+        data: icon.iconData,
+      };
+    } else if (typeof icon === 'string') {
+      const name = toKebabCase(icon);
+      if (name in this.icons) {
+        return {
+          name,
+          data: this.icons[name],
+        };
+      } else {
+        throw new Error(`Unable to resolve icon '${icon}'`);
+      }
+    }
+
+    return null;
+  }
+}

packages/lucide-angular-next/src/lucide-icons.spec.ts

@@ -0,0 +1,44 @@
+import { TestBed } from '@angular/core/testing';
+import { LUCIDE_ICONS, provideLucideIcons } from './lucide-icons';
+import { LucideIconData } from './types';
+import { LucideActivity } from './icons/activity';
+import { LucideCircle } from './icons/circle';
+import { LucideSquareX } from './icons/square-x';
+
+describe('Lucide icons', () => {
+  describe('LUCIDE_ICONS', () => {
+    it('should default to empty map', () => {
+      expect(TestBed.inject(LUCIDE_ICONS)).toEqual({});
+    });
+  });
+  describe('provideLucideIcons', () => {
+    const mockIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
+    const mockIcon2: LucideIconData = [['circle', { cx: 12, cy: 12, r: 8 }]];
+    it('should accept dictionary of icons', () => {
+      TestBed.configureTestingModule({
+        providers: [
+          provideLucideIcons({
+            DemoIcon: mockIcon,
+            MockIcon: mockIcon2,
+            TestIcon: LucideActivity,
+          }),
+        ],
+      });
+      expect(TestBed.inject(LUCIDE_ICONS)).toEqual({
+        'demo-icon': mockIcon,
+        'mock-icon': mockIcon2,
+        [LucideActivity.iconName]: LucideActivity.iconData,
+      });
+    });
+    it('should accept list of icon components', () => {
+      TestBed.configureTestingModule({
+        providers: [provideLucideIcons([LucideActivity, LucideSquareX, LucideCircle])],
+      });
+      expect(TestBed.inject(LUCIDE_ICONS)).toEqual({
+        [LucideActivity.iconName]: LucideActivity.iconData,
+        [LucideSquareX.iconName]: LucideSquareX.iconData,
+        [LucideCircle.iconName]: LucideCircle.iconData,
+      });
+    });
+  });
+});

packages/lucide-angular-next/src/lucide-icons.ts

@@ -0,0 +1,34 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { LucideIconData, LucideIcons } from './types';
+import { isLucideIconComponent, LucideIconComponentType } from './types';
+import { toKebabCase } from './utils/to-kebab-case';
+
+export const LUCIDE_ICONS = new InjectionToken<LucideIcons>('Lucide icons', {
+  factory: () => ({}),
+});
+
+export function provideLucideIcons(
+  icons: Record<string, LucideIconData | LucideIconComponentType> | Array<LucideIconComponentType>,
+): Provider {
+  if (Array.isArray(icons)) {
+    return {
+      provide: LUCIDE_ICONS,
+      useValue: icons.reduce((acc, icon) => {
+        acc[toKebabCase(icon.iconName)] = icon.iconData;
+        return acc;
+      }, {} as LucideIcons),
+    };
+  } else {
+    return {
+      provide: LUCIDE_ICONS,
+      useValue: Object.entries(icons).reduce((acc, [name, icon]) => {
+        if (isLucideIconComponent(icon)) {
+          acc[icon.iconName] = icon.iconData;
+        } else {
+          acc[toKebabCase(name)] = icon;
+        }
+        return acc;
+      }, {} as LucideIcons),
+    };
+  }
+}

packages/lucide-angular-next/src/public-api.ts

@@ -0,0 +1,7 @@
+import * as icons from './icons/lucide-angular';
+
+export * from './lucide-config';
+export * from './lucide-icon';
+export * from './lucide-icons';
+export * from './types';
+export { icons };

packages/lucide-angular-next/src/types.ts

@@ -0,0 +1,34 @@
+import { InputSignal, Signal, Type } from '@angular/core';
+
+type HtmlAttributes = { [key: string]: string | number };
+export type LucideIconNode = readonly [string, HtmlAttributes];
+export type LucideIconData = readonly LucideIconNode[];
+export type LucideIcons = { [key: string]: LucideIconData };
+
+export interface LucideIconComponent {
+  name: Signal<Nullable<string>>;
+  icon: Signal<Nullable<LucideIconData>>;
+}
+
+export type LucideIconComponentType = Type<LucideIconComponent> & {
+  iconName: string;
+  iconData: LucideIconData;
+};
+
+export function isLucideIconData(icon: unknown): icon is LucideIconData {
+  return Array.isArray(icon);
+}
+
+export function isLucideIconComponent(icon: unknown): icon is LucideIconComponentType {
+  return (
+    icon instanceof Type &&
+    'iconData' in icon &&
+    Array.isArray(icon.iconData) &&
+    'iconName' in icon &&
+    typeof icon.iconName === 'string'
+  );
+}
+
+export type LucideIconInput = LucideIconComponentType | LucideIconData | string;
+
+export type Nullable<T> = T | null | undefined;

packages/lucide-angular-next/src/utils/format-fixed.ts

@@ -0,0 +1,3 @@
+export function formatFixed(number: number, decimals = 3): string {
+  return parseFloat(number.toFixed(decimals)).toString(10);
+}