fix(packages/icons): finalize exportTemplate before migration to input signals & effect to build component data

# 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
+        run: echo "NEW_VERSION=$(pnpm semver $LATEST_TAG -i 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
         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
+          jq -r 'to_entries[] | "\(.key) \(.value)"' brand-stopwords.json | while read -r KEY VALUE; do
-          for PHRASE in "${BLOCKED_PHRASES[@]}"
+            SAFE_KEY=$(printf '%s\n' "$KEY" | sed 's/[][\.^$*]/\\&/g')
-          do
+            SAFE_VALUE=$(printf '%s\n' "$VALUE" | sed 's/[][\.^$*]/\\&/g')
-            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.
 
-          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
+  modelValue: string;
-  id: string
+  id: string;
-}>()
+}>();
 
-const emit = defineEmits(['update:modelValue'])
+const { isDark } = useData();
+
+const emit = defineEmits(['update:modelValue']);
 
 const value = computed({
-  get: () => props.modelValue,
+  get: () => {
-  set: (val) => emit('update:modelValue', val)
+    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,19 +54,21 @@ 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;
   text-align: left;
@@ -66,6 +77,10 @@ const value = computed({
   display: flex;
   align-items: center;
   gap: 2px;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
 }
 
 .color-input-text {
@@ -79,15 +94,18 @@ const value = computed({
   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 Icon from 'lucide-vue-next/src/Icon';
-import { search }  from '../../../data/iconNodes'
+import { search } from '../../../data/iconNodes';
-
-const SearchIcon = createLucideIcon('search', search)
 
 defineProps({
   shortcut: {
     type: String,
-    required: false
+    required: false,
-  }
+  },
-})
+});
 </script>
 
 <template>
   <button class="fake-input">
-    <component :is="SearchIcon" class="search-icon"/>
+    <Icon
-    <slot/>
+      :iconNode="search"
-    <kbd v-if="shortcut" class="shortcut">{{ shortcut }}</kbd>
+      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
+  type: string;
-  modelValue: string
+  modelValue: string;
-  shortcut?: 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 input = ref();
-const wrapperEl = ref()
+const wrapperEl = ref();
-const shortcutEl = 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
+      const shortcutWidth = shortcutEl.value.offsetWidth;
-      wrapperEl.value.style.setProperty('--shortcut-width', `${shortcutWidth}px`)
+      wrapperEl.value.style.setProperty('--shortcut-width', `${shortcutWidth}px`);
     }
-  })
+  });
-}
+};
 
-onMounted(updateShortcutSpacing)
+onMounted(updateShortcutSpacing);
-watch(() => props.shortcut, 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">
+  <div
-    <slot name="icon" class="icon" />
+    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 { computed, ref } from 'vue';
-import Input from './Input.vue'
+import Input from './Input.vue';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import Icon from 'lucide-vue-next/src/Icon';
-import { search }  from '../../../data/iconNodes'
+import { search } from '../../../data/iconNodes';
-
-const SearchIcon = createLucideIcon('search', search)
 
 interface Props {
-  modelValue: string
+  modelValue: string;
-  shortcut?: 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 { rotateCw } from '../../../data/iconNodes';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+import Icon from 'lucide-vue-next/src/Icon';
-import IconButton from "./IconButton.vue";
+import IconButton from './IconButton.vue';
-
-const RotateIcon = createLucideIcon('RotateIcon', rotateCw)
 </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 VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue';
-import { x } from '../../../data/iconNodes'
+import { x } from '../../../data/iconNodes';
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import Icon from 'lucide-vue-next/src/Icon';
 import { onMounted, ref } from 'vue';
 
-const { theme } = useData()
+const { theme } = useData();
-const showAd = useSessionStorage('show-carbon-ads', true)
+const showAd = useSessionStorage('show-carbon-ads', true);
-const carbonLoaded = ref(true)
+const carbonLoaded = ref(true);
 
 defineProps<{
-  drawerOpen: boolean
+  drawerOpen: boolean;
-}>()
+}>();
-
-const CloseIcon = createLucideIcon('Close', x)
 
 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">
+    <IconButton
-      <component :is="CloseIcon" :size="20" absoluteStrokeWidth />
+      @click="showAd = false"
-    </IconButton>
+      class="hide-button"
-    <VPDocAsideCarbonAds
+    >
-      :carbon-ads="theme.carbonAds"
+      <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 {
+.floating-ad.drawer-open,
-  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+.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 downloadText = 'Download!';
-const copiedText = 'Copied!'
+const copiedText = 'Copied!';
-const confettiText = ref(copiedText)
+const confettiText = ref(copiedText);
 const props = defineProps<{
-  name: string
+  name: string;
-  popoverPosition?: 'top' | 'bottom'
+  popoverPosition?: 'top' | 'bottom';
-}>()
+}>();
 
-const { size } = useIconStyleContext()
+const { size } = useIconStyleContext();
 
-const { animate, confetti } = useConfetti()
+const { animate, confetti } = useConfetti();
 
 function copySVG() {
-  confettiText.value = copiedText
+  confettiText.value = copiedText;
-  const svgString = getSVGIcon()
+  const svgString = getSVGIcon();
 
-  navigator.clipboard.writeText(svgString)
+  navigator.clipboard.writeText(svgString);
 
-  confetti()
+  confetti();
 }
 
 function copyDataUrl() {
-  confettiText.value = copiedText
+  confettiText.value = copiedText;
-  const svgString = getSVGIcon()
+  const svgString = getSVGIcon();
 
   // Create SVG data url
-  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`
+  const dataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
-  navigator.clipboard.writeText(dataUrl)
+  navigator.clipboard.writeText(dataUrl);
 
-  confetti()
+  confetti();
 }
 
 function downloadSVG() {
-  confettiText.value = downloadText
+  confettiText.value = downloadText;
-  const svgString = getSVGIcon()
+  const svgString = getSVGIcon();
 
-  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`)
+  downloadData(`${props.name}.svg`, `data:image/svg+xml;base64,${btoa(svgString)}`);
-  confetti()
+  confetti();
 }
 
 function downloadPNG() {
-  confettiText.value = downloadText
+  confettiText.value = downloadText;
-  const svgString = getSVGIcon()
+  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'))
+    downloadData(`${props.name}.png`, canvas.toDataURL('image/png'));
-    confetti()
+    confetti();
-  }
+  };
 }
-
-
 </script>
 
 <template>
@@ -75,10 +73,10 @@ function downloadPNG() {
     :data-confetti-text="confettiText"
     :popoverPosition="popoverPosition"
     :options="[
-      { text: 'Copy SVG' , onClick: copySVG },
+      { text: 'Copy SVG', onClick: copySVG },
-      { text: 'Copy Data URL' , onClick: copyDataUrl },
+      { text: 'Copy Data URL', onClick: copyDataUrl },
-      { text: 'Download SVG' , onClick: downloadSVG },
+      { text: 'Download SVG', onClick: downloadSVG },
-      { text: 'Download PNG' , onClick: downloadPNG },
+      { 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()
+import Icon from 'lucide-vue-next/src/Icon';
-const slots = useSlots()
+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
+  return props.categories.map(({ name, title }) => {
-    .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(
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(categoriesList, {
-  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"
+      v-if="searchPlaceholder.isNoResults"
-      :searchQuery="searchQuery"
+      :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(
+const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(chunkedIcons, {
-  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 !== ''"
+      v-if="searchPlaceholder.isNoResults"
-      :searchQuery="searchQuery"
+      :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 { ref, onMounted, computed, markRaw, shallowReadonly, watch } from 'vue';
-import { bird, squirrel, rabbit } from '../../../data/iconNodes'
+import {
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon'
+  bird,
-import {useEventListener} from '@vueuse/core'
+  squirrel,
-import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+  rabbit,
-import { IconNode } from '../../types'
+  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<{
+const { searchQuery, isBrandSearch } = defineProps<{
-  searchQuery: string
+  searchQuery: string;
-}>()
+  isBrandSearch: boolean;
+}>();
 
-defineEmits(['clear'])
+defineEmits(['clear']);
 
-const animalIcon = ref<HTMLElement>()
+interface Placeholder {
-const randomAnimal = computed<IconNode>(() => {
+  title: string;
-  return Math.random() > 0.5 ? squirrel : Math.random() > 0.5 ? rabbit : bird
+  message: string;
-})
+  icon: IconNode;
-const animalComponent = computed(() => createLucideIcon('animal', randomAnimal.value))
+  finePrint?: string;
-const flip = ref(false)
+}
+
+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
+    const centerX = width / 2 + x;
-
-    flip.value = mouseEvent.x < centerX
-  })
-})
 
+    flip.value = !isBrandSearch && mouseEvent.x < centerX;
+  });
+});
 </script>
 
 <template>
   <div class="no-results">
     <component
-      :is="animalComponent"
+      :is="iconComponent"
-      class="animal-icon"
+      class="placeholder-icon"
-      ref="animalIcon"
+      ref="placeholderIcon"
       :class="{ flip }"
       :strokeWidth="1"
     />
-    <h2 class="no-results-text">
+    <h2 class="no-results-text">{{ placeholder.title.replace('[name]', searchQuery) }}</h2>
-      No icons found for '{{ searchQuery }}'
+    <p class="no-results-message">
-    </h2>
+      {{ 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"
+      v-if="isBrandSearch"
-      theme="alt"
+      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 {
+.placeholder-icon {
-  width: 160px;
+  width: 96px;
-  height: 160px;
+  height: 96px;
-  color: var(--vp-c-neutral);
+  color: var(--vp-c-text-1);
-  opacity: 0.8;
-  margin-top: 72px;
 }
 
-.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 { shallowRef, type Ref, watch, computed } from 'vue';
-import { useCssVar, syncRef } from '@vueuse/core'
+import { useCssVar, syncRef } from '@vueuse/core';
-import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle'
+import { STYLE_DEFAULTS, useIconStyleContext } from '../../composables/useIconStyle';
-import RangeSlider from '../base/RangeSlider.vue'
+import RangeSlider from '../base/RangeSlider.vue';
-import InputField from '../base/InputField.vue'
+import InputField from '../base/InputField.vue';
-import ColorPicker from '../base/ColorPicker.vue'
+import ColorPicker from '../base/ColorPicker.vue';
-import ResetButton from '../base/ResetButton.vue'
+import ResetButton from '../base/ResetButton.vue';
-import Switch from '../base/Switch.vue'
+import Switch from '../base/Switch.vue';
 
 const props = defineProps<{
-  rootEl?: Ref<HTMLElement>
+  rootEl?: Ref<HTMLElement>;
-}>()
+}>();
 
-const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext()
+const { color, strokeWidth, size, absoluteStrokeWidth } = useIconStyleContext();
-const documentRef = shallowRef<HTMLElement | undefined>(typeof document !== 'undefined' ? document?.documentElement : undefined)
+const documentRef = shallowRef<HTMLElement | undefined>(
+  typeof document !== 'undefined' ? document?.documentElement : undefined,
+);
 
-const colorCssVar = useCssVar(
+const colorCssVar = useCssVar('--customize-color', props.rootEl?.value ?? documentRef.value, {
-  '--customize-color',
+  initialValue: `${STYLE_DEFAULTS.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(
+const sizeCssVar = useCssVar('--customize-size', props.rootEl?.value ?? documentRef.value, {
-  '--customize-size',
+  initialValue: `${STYLE_DEFAULTS.size}`,
-  props.rootEl?.value ?? documentRef.value,
+});
-  {
-    initialValue: `${STYLE_DEFAULTS.size}`
-  }
-)
 
-syncRef(color, colorCssVar, { direction: 'ltr' })
+syncRef(color, colorCssVar, { direction: 'ltr' });
-syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' })
+syncRef(strokeWidth, strokeWidthCssVar, { direction: 'ltr' });
-syncRef(size, sizeCssVar, { direction: 'ltr' })
+syncRef(size, sizeCssVar, { direction: 'ltr' });
 
-function resetStyle () {
+function resetStyle() {
-  color.value = STYLE_DEFAULTS.color
+  color.value = STYLE_DEFAULTS.color;
-  strokeWidth.value = STYLE_DEFAULTS.strokeWidth
+  strokeWidth.value = STYLE_DEFAULTS.strokeWidth;
-  size.value = STYLE_DEFAULTS.size
+  size.value = STYLE_DEFAULTS.size;
-  absoluteStrokeWidth.value = STYLE_DEFAULTS.absoluteStrokeWidth
+  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
+  return (
-    || strokeWidth.value !== STYLE_DEFAULTS.strokeWidth
+    color.value !== STYLE_DEFAULTS.color ||
-    || size.value !== STYLE_DEFAULTS.size
+    strokeWidth.value !== STYLE_DEFAULTS.strokeWidth ||
-    || absoluteStrokeWidth.value !== STYLE_DEFAULTS.absoluteStrokeWidth
+    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">
+      <h2 class="card-title">Customizer</h2>
-        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:iconNodes": "node ./scripts/writeIconNodes.mjs",
-    "prebuild:metaJson": "node --experimental-strip-types ./scripts/writeIconMetaIndex.mjs",
+    "prebuild:metaJson": "node ./scripts/writeIconMetaIndex.mjs",
-    "prebuild:releaseJson": "node --experimental-strip-types ./scripts/writeReleaseMetadata.mjs",
+    "prebuild:releaseJson": "node ./scripts/writeReleaseMetadata.mjs",
-    "prebuild:categoriesJson": "node --experimental-strip-types ./scripts/writeCategoriesMetadata.mjs",
+    "prebuild:categoriesJson": "node ./scripts/writeCategoriesMetadata.mjs",
-    "prebuild:relatedIcons": "node --experimental-strip-types ./scripts/writeIconRelatedIcons.mjs",
+    "prebuild:relatedIcons": "node ./scripts/writeIconRelatedIcons.mjs",
-    "prebuild:iconDetails": "node --experimental-strip-types ./scripts/writeIconDetails.mjs",
+    "prebuild:iconDetails": "node ./scripts/writeIconDetails.mjs",
-    "postbuild:vercelJson": "node --experimental-strip-types ./scripts/writeVercelOutput.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="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="M5 14h14l1.973 6.767A1 1 0 0 1 20 22H4a1 1 0 0 1-.973-1.233z" />
+  <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="M11.652 6H18" />
-  <path d="M7 2h11v4c0 2-2 2-2 4v1" />
+  <path d="M12 13v1" />
-  <line x1="11" x2="18" y1="6" y2="6" />
+  <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" />
-  <line x1="2" x2="22" y1="2" y2="22" />
+  <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" />
+  <path d="M12 13v1" />
-  <line x1="6" x2="18" y1="6" y2="6" />
+  <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" />
-  <line x1="12" x2="12" y1="12" y2="12" />
+  <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="M12 12v-2" />
-  <path d="M10 19v-3" />
+  <path d="M12 18v-2" />
-  <path d="M14 19v-3" />
+  <path d="M16 12v-2" />
-  <path d="M18 19v-3" />
+  <path d="M16 18v-2" />
-  <path d="M8 11V9" />
+  <path d="M2 11h1.5" />
-  <path d="M16 11V9" />
+  <path d="M20 18v-2" />
-  <path d="M12 11V9" />
+  <path d="M20.5 11H22" />
-  <path d="M2 15h20" />
+  <path d="M4 18v-2" />
-  <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="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 18h2" />
-  <path d="M18 20h2" />
+  <path d="M18 6h2" />
-  <path d="M18 4h2" />
-  <path d="M18 8h2" />
   <path d="M4 12h2" />
-  <path d="M4 16h2" />
+  <path d="M4 18h2" />
-  <path d="M4 20h2" />
+  <path d="M4 6h2" />
-  <path d="M4 4h2" />
+  <rect x="6" y="2" width="12" height="20" rx="2" />
-  <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" />
 </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="M11 7 6 2" />
-  <path d="m5 2 5 5" />
+  <path d="M18.992 12H2.041" />
-  <path d="M2 13h15" />
+  <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="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="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" />
+  <line x1="5" y1="3" x2="19" y2="3" />
-  <path d="M10 22H8" />
+  <line x1="3" y1="5" x2="3" y2="19" />
-  <path d="M16 22h-2" />
+  <line x1="21" y1="5" x2="21" y2="19" />
-  <circle cx="8" cy="8" r="2" />
+  <line x1="9" y1="21" x2="10" y2="21" />
-  <path d="M9.414 9.414 12 12" />
+  <line x1="14" y1="21" x2="15" y2="21" />
-  <path d="M14.8 14.8 18 18" />
+  <path d="M 3 5 A2 2 0 0 1 5 3" />
-  <circle cx="8" cy="16" r="2" />
+  <path d="M 19 3 A2 2 0 0 1 21 5" />
-  <path d="m18 6-8.586 8.586" />
+  <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" />
+  <rect width="18" height="18" x="3" y="3" rx="2" />
-  <circle cx="8" cy="8" r="2" />
+  <circle cx="8.5" cy="8.5" r="1.5" />
-  <path d="M9.414 9.414 12 12" />
+  <line x1="9.56066" y1="9.56066" x2="12" y2="12" />
-  <path d="M14.8 14.8 18 18" />
+  <line x1="17" y1="17" x2="14.82" y2="14.82" />
-  <circle cx="8" cy="16" r="2" />
+  <circle cx="8.5" cy="15.5" r="1.5" />
-  <path d="m18 6-8.586 8.586" />
+  <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 2v2" />
-  <path d="M12 3v2" />
+  <path d="M12 8a4 4 0 0 0-1.645 7.647" />
-  <path d="m6.6 18.4-1.4 1.4" />
+  <path d="M2 12h2" />
-  <path d="M20 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z" />
+  <path d="M20 14.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0z" />
-  <path d="M4 13H2" />
+  <path d="m4.93 4.93 1.41 1.41" />
-  <path d="M6.34 7.34 4.93 5.93" />
+  <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/optimizeStagedSvgs.mts',
-    'node ./scripts/generateNextJSAliases.mjs',
+    '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/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "lucide-angular",
+  "name": "@lucide/angular",
-  "description": "A Lucide icon library package for Angular applications.",
+  "description": "A Lucide icon library package for Angular applications",
   "version": "0.0.1",
   "author": "SMAH1",
   "license": "ISC",
@@ -38,19 +38,19 @@
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.11",
+    "@angular-devkit/build-angular": "~17.3.14",
-    "@angular-eslint/builder": "~13.0.0",
+    "@angular-eslint/builder": "~17.5.3",
-    "@angular-eslint/eslint-plugin": "~13.0.0",
+    "@angular-eslint/eslint-plugin": "~17.5.3",
-    "@angular-eslint/eslint-plugin-template": "~13.0.0",
+    "@angular-eslint/eslint-plugin-template": "~17.5.3",
-    "@angular-eslint/schematics": "~13.0.0",
+    "@angular-eslint/schematics": "~17.5.3",
-    "@angular-eslint/template-parser": "~13.0.0",
+    "@angular-eslint/template-parser": "~17.5.3",
-    "@angular/cli": "~13.3.11",
+    "@angular/cli": "~17.3.14",
-    "@angular/common": "~13.3.0",
+    "@angular/common": "~17.3.12",
-    "@angular/compiler": "~13.3.0",
+    "@angular/compiler": "~17.3.12",
-    "@angular/compiler-cli": "~13.3.0",
+    "@angular/compiler-cli": "~17.3.12",
-    "@angular/core": "~13.3.0",
+    "@angular/core": "~17.3.12",
-    "@angular/platform-browser": "~13.3.0",
+    "@angular/platform-browser": "~17.3.12",
-    "@angular/platform-browser-dynamic": "~13.3.0",
+    "@angular/platform-browser-dynamic": "~17.3.12",
     "@lucide/build-icons": "workspace:*",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
@@ -65,12 +65,12 @@
     "karma-coverage": "~2.1.0",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^13.3.0",
+    "ng-packagr": "^17.3.0",
     "prettier": "^2.8.4",
-    "rxjs": "~7.5.0",
+    "rxjs": "~6.5.3",
     "ts-node": "~10.9.1",
     "tslib": "^2.3.0",
-    "typescript": "~4.6.2",
+    "typescript": "~5.4.5",
     "zone.js": "~0.11.4"
   },
   "peerDependencies": {

packages/lucide-angular/scripts/exportTemplate.mts

@@ -8,26 +8,65 @@ export default defineExportTemplate(async ({
   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 { LucideIcon } from '../lib/lucide-icon.component';
+import { Component } 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-vue-next - Documentation
+ * @see https://lucide.dev/guide/packages/lucide-angular - Documentation
  *
  * @param {Object} props - Lucide icons props and any valid SVG attribute
- * @returns {FunctionalComponent} Vue component
  * ${deprecated ? `@deprecated ${deprecationReason}` : ''}
 */
-const ${componentName}: LucideIconData = ${JSON.stringify(children)}; //eslint-disable-line no-shadow-restricted-names
+@Component({
+  selector: '${selectors.join(', ')}',
+  template: '',
+  standalone: true,
+})
+export class ${angularComponentName} extends LucideIcon {
+  static iconData: LucideIconData = ${JSON.stringify(children)};
+  static iconName = '${iconName}';
+  override get icon() {
+    return ${angularComponentName}.iconData;
+  }
+  override get name() {
+    return ${angularComponentName}.iconName;
+  }
+}
 
-export default ${componentName};
+${aliasComponentNames.map(([aliasComponentName]) => {
+    return `
+/**
+ * @deprecated
+ * @see ${angularComponentName}
+ */
+export const ${aliasComponentName} = ${angularComponentName};
+`;
+  }).join(`\n\n`)}
 `;
 });

packages/lucide-angular/src/aliases/index.ts

@@ -1,3 +0,0 @@
-export * from './aliases';
-export * from './prefixed';
-export * from './suffixed';

packages/lucide-angular/src/icons/package.json

@@ -1,8 +0,0 @@
-{
-  "ngPackage": {
-    "dest": "dist",
-    "lib": {
-      "entryFile": "../public-api.ts"
-    }
-  }
-}

packages/lucide-angular/src/lib/icons.provider.ts

@@ -1,4 +0,0 @@
-/** @deprecated Use the injection token LUCIDE_ICONS instead. Will be removed in v1.0. */
-export class Icons {
-  constructor(private icons: object) {}
-}

packages/lucide-angular/src/lib/lucide-angular.module.ts

@@ -1,31 +0,0 @@
-import { ModuleWithProviders, NgModule, Optional } from '@angular/core';
-import { LucideAngularComponent } from './lucide-angular.component';
-import { LucideIcons } from '../icons/types';
-import { LUCIDE_ICONS, LucideIconProvider } from './lucide-icon.provider';
-import { Icons } from './icons.provider';
-
-const legacyIconProviderFactory = (icons?: LucideIcons) => {
-  return new LucideIconProvider(icons ?? {});
-};
-
-@NgModule({
-  declarations: [LucideAngularComponent],
-  imports: [],
-  exports: [LucideAngularComponent],
-})
-export class LucideAngularModule {
-  static pick(icons: LucideIcons): ModuleWithProviders<LucideAngularModule> {
-    return {
-      ngModule: LucideAngularModule,
-      providers: [
-        { provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(icons) },
-        {
-          provide: LUCIDE_ICONS,
-          multi: true,
-          useFactory: legacyIconProviderFactory,
-          deps: [[new Optional(), Icons]],
-        },
-      ],
-    };
-  }
-}

packages/lucide-angular/src/lib/lucide-icon.component.spec.ts

@@ -1,23 +1,19 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { LucideAngularModule } from './lucide-angular.module';
+import { formatFixed, LucideIcon } from './lucide-icon.component';
-import { formatFixed, LucideAngularComponent } from './lucide-angular.component';
 import defaultAttributes from '../icons/constants/default-attributes';
-import { LucideIcons } from '../icons/types';
+import { LucideIconData } from '../icons/types';
 
 describe('LucideAngularComponent', () => {
   let testHostComponent: TestHostComponent;
   let testHostFixture: ComponentFixture<TestHostComponent>;
   const getSvgAttribute = (attr: string) =>
     testHostFixture.nativeElement.querySelector('svg').getAttribute(attr);
-  const testIcons: LucideIcons = {
+  const testIcon: LucideIconData = [['polyline', { points: '1 1 22 22' }]];
-    Demo: [['polyline', { points: '1 1 22 22' }]],
-  };
-
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [LucideAngularComponent, TestHostComponent],
+      declarations: [LucideIcon, TestHostComponent],
-      imports: [LucideAngularModule.pick(testIcons)],
+      imports: [],
     }).compileComponents();
     testHostFixture = TestBed.createComponent(TestHostComponent);
     testHostComponent = testHostFixture.componentInstance;
@@ -63,7 +59,7 @@ describe('LucideAngularComponent', () => {
     testHostComponent.setAbsoluteStrokeWidth(true);
     testHostFixture.detectChanges();
     expect(getSvgAttribute('stroke-width')).toBe(
-      formatFixed(strokeWidth / (size / defaultAttributes.height)),
+      formatFixed(strokeWidth / (size / defaultAttributes.height))
     );
   });
 
@@ -71,6 +67,7 @@ describe('LucideAngularComponent', () => {
     selector: 'lucide-spec-host-component',
     template: ` <i-lucide
       name="demo"
+      [img]="testIcon"
       class="my-icon"
       [color]="color"
       [size]="size"
@@ -83,6 +80,7 @@ describe('LucideAngularComponent', () => {
     size?: number;
     strokeWidth?: number;
     absoluteStrokeWidth = true;
+    readonly testIcon = testIcon;
 
     setColor(color: string): void {
       this.color = color;

packages/lucide-angular/src/lib/lucide-icon.component.ts

@@ -5,12 +5,13 @@ import {
   Inject,
   Input,
   OnChanges,
+  OnInit,
   Renderer2,
   SimpleChange,
+  Type,
 } from '@angular/core';
 import { LucideIconData } from '../icons/types';
 import defaultAttributes from '../icons/constants/default-attributes';
-import { LUCIDE_ICONS, LucideIconProviderInterface } from './lucide-icon.provider';
 import { LucideIconConfig } from './lucide-icon.config';
 
 interface TypedChange<T> extends SimpleChange {
@@ -22,7 +23,7 @@ type SvgAttributes = { [key: string]: string | number };
 
 type LucideAngularComponentChanges = {
   name?: TypedChange<string | LucideIconData>;
-  img?: TypedChange<LucideIconData | undefined>;
+  icon?: TypedChange<LucideIconData | undefined>;
   color?: TypedChange<string>;
   size?: TypedChange<number>;
   strokeWidth?: TypedChange<number>;
@@ -34,24 +35,50 @@ export function formatFixed(number: number, decimals = 3): string {
   return parseFloat(number.toFixed(decimals)).toString(10);
 }
 
+export type LucideIconComponentType = Type<LucideIcon> & { iconData: LucideIconData; name: string };
+
+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'
+  );
+}
+
 @Component({
-  selector: 'lucide-angular, lucide-icon, i-lucide, span-lucide',
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'svg[lucideIcon]',
   template: '<ng-content></ng-content>',
+  standalone: true,
 })
-export class LucideAngularComponent implements OnChanges {
+// eslint-disable-next-line @angular-eslint/component-class-suffix
+export class LucideIcon implements OnInit, OnChanges {
   @Input() class?: string;
-  @Input() name?: string | LucideIconData;
+  _name?: string;
-  @Input() img?: LucideIconData;
+  @Input() set name(name: string | undefined) {
+    this._name = name;
+  }
+  get name() {
+    return this._name;
+  }
+  _icon?: LucideIconData | LucideIconComponentType | null;
+  @Input('lucideIcon') set icon(icon: LucideIconData | LucideIconComponentType | null | undefined) {
+    this._icon = icon;
+  }
+  get icon() {
+    return this._icon;
+  }
   @Input() color?: string;
   @Input() absoluteStrokeWidth = false;
   defaultSize: number;
 
   constructor(
-    @Inject(ElementRef) private elem: ElementRef,
+    @Inject(ElementRef) protected elem: ElementRef,
-    @Inject(Renderer2) private renderer: Renderer2,
+    @Inject(Renderer2) protected renderer: Renderer2,
-    @Inject(ChangeDetectorRef) private changeDetector: ChangeDetectorRef,
+    @Inject(ChangeDetectorRef) protected changeDetector: ChangeDetectorRef,
-    @Inject(LUCIDE_ICONS) private iconProviders: LucideIconProviderInterface[],
+    @Inject(LucideIconConfig) protected iconConfig: LucideIconConfig
-    @Inject(LucideIconConfig) private iconConfig: LucideIconConfig,
   ) {
     this.defaultSize = defaultAttributes.height;
   }
@@ -84,38 +111,35 @@ export class LucideAngularComponent implements OnChanges {
     }
   }
 
+  ngOnInit() {
+    this.buildIcon();
+  }
+
   ngOnChanges(changes: LucideAngularComponentChanges): void {
     if (
       changes.name ||
-      changes.img ||
+      changes.icon ||
       changes.color ||
       changes.size ||
       changes.absoluteStrokeWidth ||
       changes.strokeWidth ||
       changes.class
     ) {
+      this.buildIcon();
+    }
+
+    this.changeDetector.markForCheck();
+  }
+
+  buildIcon(): void {
     this.color = this.color ?? this.iconConfig.color;
     this.size = this.parseNumber(this.size ?? this.iconConfig.size);
     this.strokeWidth = this.parseNumber(this.strokeWidth ?? this.iconConfig.strokeWidth);
     this.absoluteStrokeWidth = this.absoluteStrokeWidth ?? this.iconConfig.absoluteStrokeWidth;
-      const nameOrIcon = this.img ?? this.name;
+    console.log('Hello, my name is ', this.name, ' my icon is ', this.icon);
-      if (typeof nameOrIcon === 'string') {
+    if (this.icon) {
-        const icoOfName = this.getIcon(this.toPascalCase(nameOrIcon));
+      this.replaceElement(isLucideIconComponent(this.icon) ? this.icon.iconData : this.icon);
-        if (icoOfName) {
-          this.replaceElement(icoOfName);
-        } else {
-          throw new Error(
-            `The "${nameOrIcon}" icon has not been provided by any available icon providers.`,
-          );
     }
-      } else if (Array.isArray(nameOrIcon)) {
-        this.replaceElement(nameOrIcon);
-      } else {
-        throw new Error(`No icon name or image has been provided.`);
-      }
-    }
-
-    this.changeDetector.markForCheck();
   }
 
   replaceElement(img: LucideIconData): void {
@@ -128,7 +152,10 @@ export class LucideAngularComponent implements OnChanges {
         ? formatFixed(this.strokeWidth / (this.size / this.defaultSize))
         : this.strokeWidth.toString(10),
     };
-    const icoElement = this.createElement(['svg', attributes, img]);
+    const icoElement = this.elem.nativeElement;
+    for (const [name, value] of Object.entries(attributes)) {
+      icoElement.setAttribute(name, value);
+    }
     icoElement.classList.add('lucide');
     if (typeof this.name === 'string') {
       icoElement.classList.add(`lucide-${this.name.replace('_', '-')}`);
@@ -138,24 +165,19 @@ export class LucideAngularComponent implements OnChanges {
         ...this.class
           .split(/ /)
           .map((a) => a.trim())
-          .filter((a) => a.length > 0),
+          .filter((a) => a.length > 0)
       );
     }
-    const childElements = this.elem.nativeElement.childNodes;
+    for (const child of icoElement.children) {
-    for (const child of childElements) {
       this.renderer.removeChild(this.elem.nativeElement, child);
     }
-    this.renderer.appendChild(this.elem.nativeElement, icoElement);
+    for (const node of img) {
+      const childElement = this.createElement(node);
+      this.renderer.appendChild(icoElement, childElement);
+    }
   }
 
-  toPascalCase(str: string): string {
+  protected parseNumber(value: string | number): number {
-    return str.replace(
-      /(\w)([a-z0-9]*)(_|-|\s*)/g,
-      (g0, g1, g2) => g1.toUpperCase() + g2.toLowerCase(),
-    );
-  }
-
-  private parseNumber(value: string | number): number {
     if (typeof value === 'string') {
       const parsedValue = parseInt(value, 10);
       if (isNaN(parsedValue)) {
@@ -166,21 +188,10 @@ export class LucideAngularComponent implements OnChanges {
     return value;
   }
 
-  private getIcon(name: string): LucideIconData | null {
+  protected createElement([tag, attrs, children = []]: readonly [
-    for (const iconProvider of Array.isArray(this.iconProviders)
-      ? this.iconProviders
-      : [this.iconProviders]) {
-      if (iconProvider.hasIcon(name)) {
-        return iconProvider.getIcon(name);
-      }
-    }
-    return null;
-  }
-
-  private createElement([tag, attrs, children = []]: readonly [
     string,
     SvgAttributes,
-    LucideIconData?,
+    LucideIconData?
   ]) {
     const element = this.renderer.createElement(tag, 'http://www.w3.org/2000/svg');
 

packages/lucide-angular/src/lib/lucide-icon.provider.ts

@@ -1,24 +0,0 @@
-import { LucideIconData, LucideIcons } from '../icons/types';
-import { InjectionToken } from '@angular/core';
-
-export interface LucideIconProviderInterface {
-  hasIcon(name: string): boolean;
-
-  getIcon(name: string): LucideIconData | null;
-}
-
-export const LUCIDE_ICONS = new InjectionToken<LucideIconProviderInterface>('LucideIcons', {
-  factory: () => new LucideIconProvider({}),
-});
-
-export class LucideIconProvider implements LucideIconProviderInterface {
-  constructor(private icons: LucideIcons) {}
-
-  getIcon(name: string): LucideIconData | null {
-    return this.hasIcon(name) ? this.icons[name] : null;
-  }
-
-  hasIcon(name: string): boolean {
-    return typeof this.icons === 'object' && name in this.icons;
-  }
-}

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

@@ -1,10 +1,7 @@
 import * as icons from './icons/lucide-icons';
 
-export * from './lib/lucide-angular.component';
+export * from './lib/lucide-icon.component';
-export * from './lib/lucide-angular.module';
 export * from './lib/lucide-icon.config';
-export * from './lib/lucide-icon.provider';
 export * from './icons/lucide-icons';
 export * from './icons/types';
-export * from './aliases';
 export { icons };

scripts/generateChangedIconsCommentMarkup.mts

@@ -52,7 +52,8 @@ const getImageTagsByFiles = (
 const svgFiles = await readSvgDirectory(ICONS_DIR);
 const svgFilePaths = svgFiles.map((file) => `icons/${file}`);
 
-const iconsFilteredByName = (search: string) => svgFilePaths.filter((file) => file.includes(search));
+const iconsFilteredByName = (search: string) =>
+  svgFilePaths.filter((file) => file.includes(search));
 
 const cohesionRandomImageTags = getImageTagsByFiles(
   shuffleArray(svgFilePaths).slice(0, changedFiles.length),
@@ -120,6 +121,30 @@ const changeFilesDiffImageTags = getImageTagsByFiles(
   400,
 ).join(' ');
 
+const changeFilesSymmetryImageTagsRotate180 = getImageTagsByFiles(
+  changedFiles,
+  () => `${BASE_URL}/symmetry/rotate-180`,
+  400,
+).join(' ');
+
+const changeFilesSymmetryImageTagsFlipHorizontal = getImageTagsByFiles(
+  changedFiles,
+  () => `${BASE_URL}/symmetry/flip-horizontal`,
+  400,
+).join(' ');
+
+const changeFilesSymmetryImageTagsFlipVertical = getImageTagsByFiles(
+  changedFiles,
+  () => `${BASE_URL}/symmetry/flip-vertical`,
+  400,
+).join(' ');
+
+const changeFilesSymmetryImageTagsFlipSlash = getImageTagsByFiles(
+  changedFiles,
+  () => `${BASE_URL}/symmetry/flip-slash`,
+  400,
+).join(' ');
+
 const readyToUseCode = changedFiles
   .map((changedFile) => {
     const svgContent = fs.readFileSync(path.join(process.cwd(), changedFile), 'utf-8');
@@ -179,6 +204,17 @@ ${changeFilesXRayImageTags}
 ${changeFilesDiffImageTags}
 </details>
 <details>
+<summary>Icon Symmetry</summary>
+<h4>Flip Horizontal</h4>
+${changeFilesSymmetryImageTagsFlipHorizontal}
+<h4>Flip Vertical</h4>
+${changeFilesSymmetryImageTagsFlipVertical}
+<h4>Flip Diagonal</h4>
+${changeFilesSymmetryImageTagsFlipSlash}
+<h4>Rotate 180°</h4>
+${changeFilesSymmetryImageTagsRotate180}
+</details>
+<details>
 <summary>Icons as code</summary>
 
 Works for: \`lucide-react\`, \`lucide-react-native\`, \`lucide-preact\`, \`lucide-vue-next\`

tools/build-icons/building/generateExportsFile.ts

@@ -25,7 +25,7 @@ export default async function generateExportFile(
     } else if (exportModuleNameCasing === 'pascal') {
       componentName = toPascalCase(iconName);
     }
-    const importString = `export { default as ${componentName} } from './${iconName}${iconFileExtension}';\n`;
+    const importString = `export * from './${iconName}${iconFileExtension}';\n`;
     return appendFile(importString, fileName, outputDirectory);
   });
 

tools/build-icons/building/generateIconFiles.ts

@@ -48,7 +48,11 @@ function generateIconFiles({
     ]);
 
     const getSvg = () => readSvg(`${iconName}.svg`, iconsDir);
-    const { deprecated = false, toBeRemovedInVersion = undefined } = iconMetaData[iconName];
+    const {
+      deprecated = false,
+      toBeRemovedInVersion = undefined,
+      aliases,
+    } = iconMetaData[iconName];
     const deprecationReason = deprecated
       ? deprecationReasonTemplate(iconMetaData[iconName]?.deprecationReason ?? '', {
           componentName,
@@ -64,6 +68,8 @@ function generateIconFiles({
       getSvg,
       deprecated,
       deprecationReason,
+      aliases,
+      toPascalCase,
     });
 
     const output = pretty
@@ -71,7 +77,7 @@ function generateIconFiles({
           singleQuote: true,
           trailingComma: 'all',
           printWidth: 100,
-          parser: 'babel',
+          parser: iconFileExtension.endsWith('.ts') ? 'babel-ts' : 'babel',
         })
       : elementTemplate;
 
@@ -81,7 +87,7 @@ function generateIconFiles({
       const output = `export { default } from "./${iconName}${iconFileExtension}";\n`;
       const location = path.join(
         iconsDistDirectory,
-        `${iconName}${separateIconFileExportExtension ?? iconFileExtension}`,
+        `${iconName}${separateIconFileExportExtension ?? iconFileExtension}`
       );
 
       await fs.promises.writeFile(location, output, 'utf-8');

tools/build-icons/types.ts

@@ -13,6 +13,8 @@ export type TemplateFunction = (params: {
   getSvg: () => Promise<string>;
   deprecated?: boolean;
   deprecationReason?: string;
+  aliases?: (string | AliasDeprecation)[];
+  toPascalCase: (value: string) => string;
 }) => Promise<string>;
 
 export type Path = string;

tools/build-icons/utils/defineExportTemplate.ts

@@ -7,6 +7,8 @@ export interface ExportTemplate {
   getSvg: () => Promise<string>;
   deprecated: boolean;
   deprecationReason: string;
+  aliases: Array<string | { name: string }>;
+  toPascalCase: (value: string) => string;
 }
 
 export type TemplateFunction = (params: ExportTemplate) => Promise<string>;