refactor(icons): optimised some move- icons (#2513)

* Update move.svg

Replace `<polyline/>`s with `<path/>`s

* Update move-vertical.svg

* Update move-horizontal.svg

* Update move-diagonal.svg

* Update move-diagonal-2.svg

.cspell/custom-words.txt

@@ -9,6 +9,7 @@ strikethrough
 touchpad
 ungroup
 pilcrow
+toc
 
 # Brands
 codepen

.eslintrc.js

@@ -1,4 +1,4 @@
-const DEFAULT_ATTRS = require('./scripts/render/default-attrs.json');
+const DEFAULT_ATTRS = require('./tools/build-icons/render/default-attrs.json');
 
 module.exports = {
   root: true,
@@ -15,7 +15,9 @@ module.exports = {
     'no-use-before-define': 'off',
     'import/no-extraneous-dependencies': [
       'error',
-      { devDependencies: ['**/*.test.js', '**/*.spec.js', './scripts/**'] },
+      {
+        devDependencies: ['**/*.test.js', '**/*.spec.js', '**/scripts/**'],
+      },
     ],
     'import/extensions': [
       'error',

.github/ISSUE_TEMPLATE/02_bug_report.yml

@@ -69,6 +69,9 @@ body:
         - label: Windows
         - label: Linux
         - label: macOS
+        - label: ChromeOS
+        - label: iOS
+        - label: Android
         - label: Other/not relevant
   - type: textarea
     id: description

.github/ISSUE_TEMPLATE/03_bug_report_site.yml

@@ -30,6 +30,9 @@ body:
         - label: Windows
         - label: Linux
         - label: macOS
+        - label: ChromeOS
+        - label: iOS
+        - label: Android
         - label: Other/not relevant
   - type: textarea
     id: description

.github/workflows/ci.yml

@@ -17,8 +17,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18

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

@@ -0,0 +1,35 @@
+name: Close Issue with Banned Phrases
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  block_phrases:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Check for blocked phrases in issue title
+        run: |
+          ISSUE_TITLE=$(jq -r '.issue.title' "$GITHUB_EVENT_PATH")
+          BLOCKED_PHRASES=("twitter" "whatsapp" "logo" "google" "tiktok" "facebook" "slack" "discord")
+
+          # Check title and body for blocked phrases
+          for PHRASE in "${BLOCKED_PHRASES[@]}"
+          do
+            if echo "$ISSUE_TITLE" | grep -i "$PHRASE"; then
+              gh issue close ${{ github.event.issue.number }} --reason "not planned" --comment "This looks like a duplicate, use the [search](https://github.com/lucide-icons/lucide/issues?q=is%3Aissue+$PHRASE) to find similar issues.
+
+          Read more about brand guideline rules at [We're not accepting new Brand icons #670](https://github.com/lucide-icons/lucide/issues/670).
+
+          Always happy to help on [Discord](https://discord.gg/EH6nSts)."
+              gh issue lock ${{ github.event.issue.number }} --reason spam
+              exit 1
+            fi
+          done
+        env:
+          GH_TOKEN: ${{ github.token }}

.github/workflows/linting.yml

@@ -11,8 +11,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18

.github/workflows/lucide-angular.yml

@@ -13,8 +13,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18
@@ -31,8 +29,6 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v3.8.1
         with:
           node-version: 18

.github/workflows/lucide-font.yml

@@ -13,8 +13,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18

.github/workflows/lucide-preact.yml

@@ -14,8 +14,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18

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

@@ -14,8 +14,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18

.github/workflows/lucide-react.yml

@@ -15,8 +15,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18
@@ -33,8 +31,6 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v3.8.1
         with:
           node-version: 18

.github/workflows/lucide-solid.yml

@@ -14,8 +14,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18
@@ -32,8 +30,6 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v3.8.1
         with:
           node-version: 18

.github/workflows/lucide-static.yml

@@ -13,8 +13,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18

.github/workflows/lucide-svelte.yml

@@ -14,8 +14,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18
@@ -32,8 +30,6 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v3.8.1
         with:
           node-version: 18

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

@@ -14,8 +14,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18
@@ -32,8 +30,6 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v3.8.1
         with:
           node-version: 18

.github/workflows/lucide-vue.yml

@@ -14,8 +14,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18
@@ -32,8 +30,6 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v3.8.1
         with:
           node-version: 18

.github/workflows/lucide.yml

@@ -14,8 +14,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18
@@ -32,8 +30,6 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v3.8.1
         with:
           node-version: 18

.github/workflows/pull-request.yml

@@ -3,7 +3,7 @@ name: Add Changed Icons comment
 on:
   pull_request_target:
     paths:
-      - 'icons/*.svg'
+      - 'icons/*'
     branches:
       - main
       - fix-icon-preview
@@ -45,9 +45,8 @@ jobs:
         with:
           files: icons/*
       - uses: actions/setup-node@v4
-      - uses: pnpm/action-setup@v2
       - name: Install simple-git (safer and faster than installing all deps)
-        run: pnpm install simple-git
+        run: npm install simple-git
       - name: Generate annotations
         run: node ./scripts/updateContributors.mjs
         env:
@@ -69,6 +68,16 @@ jobs:
           # input: +++ b/icons/accessibility.json%0A@@ -2,0 +3 @@%0A+  "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
           # output: ::$ANNOTATION_SEVERITY file=icons/accessibility.json,line=2,endLine=3,title=$ANNOTATION_TITLE::$ANNOTATION_DESCRIPTION%0A%0A+  "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
 
+  lint-aliases:
+    name: Check Uniqueness of Aliases
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+      - name: Check Uniqueness of Aliases
+        run: "! cat <(printf \"%s\\n\" icons/*.json | while read -r name; do basename \"$name\" .json; done) <(jq -cr 'select(.aliases) | .aliases[] | if type==\"string\" then . else .name end' icons/*.json) | sort | uniq -c | grep -ve '^\\s*1 '"
+
   generate-changed-icons-comment:
     runs-on: ubuntu-latest
     permissions:
@@ -96,9 +105,8 @@ jobs:
           body-includes: Added or changed icons
 
       - uses: actions/setup-node@v4
-      - uses: pnpm/action-setup@v2
       - name: Install svgson for code preview (safer and faster than installing all deps)
-        run: pnpm install svgson
+        run: npm install svgson
 
       - name: Generate comment markup
         run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> comment-markup.md

.github/workflows/release.yml

@@ -56,8 +56,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18
@@ -89,8 +87,6 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v3
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18
@@ -121,8 +117,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       - uses: actions/setup-node@v4
         with:
           node-version: 18

.gitignore

@@ -34,6 +34,7 @@ docs/.vitepress/data/iconNodes
 docs/.vitepress/data/iconMetaData.ts
 docs/.vitepress/data/releaseMetaData.json
 docs/.vitepress/data/releaseMetaData
+docs/.vitepress/data/categoriesData.json
 docs/.vitepress/data/iconDetails
 docs/.vitepress/data/relatedIcons.json
 docs/.vercel

.prettierignore

@@ -2,6 +2,10 @@ pnpm-lock.yaml
 
 # docs examples
 docs/**/examples/
+docs/.vitepress/.temp
+docs/.vitepress/cache
+docs/.vitepress/data
+docs/.nitro
 
 # lucide-angular
 packages/lucide-angular/.angular/cache

CONTRIBUTING.md

@@ -39,6 +39,8 @@ You can also [download an Adobe Illustrator template](https://github.com/lucide-
 
 #### [Figma Guide](https://lucide.dev/docs/figma-guide)
 
+#### [Affinity Designer Guide](https://lucide.dev/guide/design/affinity-designer-guide)
+
 ### Submitting Multiple Icons
 
 If you want submit multiple icons, please separate the icons and group them. That makes reviewing the icons easier and keep the thread clean and scoped.
@@ -70,7 +72,7 @@ pnpm install # Install dependencies, including the workspace packages
 
 ### Packages -> PNPM Workspaces
 
-To distribute different packages we use PNPM workspaces. Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/lang/enhttps://lucide.dev/docs/workspaces).
+To distribute different packages we use [PNPM workspaces](https://pnpm.io/workspaces). Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces).
 
 The configured directory for workspaces is the [packages](https://github.com/lucide-icons/lucide/tree/main/packages) directory, located in the root directory. There you will find all the current packages from lucide.
 There are more workspaces defined, see [`pnpm-workspace.yaml`](https://github.com/lucide-icons/lucide/blob/main/pnpm-workspace.yaml).

categories/charts.json

@@ -1,5 +1,5 @@
 {
   "$schema": "../category.schema.json",
   "title": "Charts",
-  "icon": "pie-chart"
+  "icon": "chart-pie"
 }

categories/home.json

@@ -1,5 +1,5 @@
 {
   "$schema": "../category.schema.json",
   "title": "Home",
-  "icon": "home"
+  "icon": "house"
 }

docs/.vitepress/api/categories/index.get.ts

@@ -1,4 +1,3 @@
-import { eventHandler, setResponseHeader } from 'h3';
 import iconMetaData from '../../data/iconMetaData';
 
 export default eventHandler((event) => {

docs/.vitepress/api/figma/data.ts

@@ -0,0 +1,40 @@
+import iconNodes from '../../data/iconNodes/index.ts';
+import { IconNodeWithKeys } from '../../theme/types';
+import iconMetaData from '../../data/iconMetaData';
+import releaseMeta from '../../data/releaseMetaData.json';
+import categories from '../../data/categoriesData.json';
+
+const dataResponse = {
+  icons: Object.entries(iconNodes).reduce((acc, [name, iconNode]) => {
+    const newIconNode = (iconNode as IconNodeWithKeys).map(([name, { key, ...attrs }]) => {
+      return [name, attrs];
+    });
+
+    acc[name] = {
+      iconNode: newIconNode,
+      aliases: (iconMetaData[name]?.aliases ?? []).map((alias) =>
+        typeof alias === 'string' ? alias : alias.name,
+      ),
+      tags: iconMetaData[name].tags ?? [],
+      categories: iconMetaData[name].categories ?? [],
+      ...releaseMeta[name],
+    };
+
+    return acc;
+  }, {}),
+  aliases: Object.entries(iconNodes).reduce((acc, [name]) => {
+    for (const alias of iconMetaData[name]?.aliases ?? []) {
+      acc[typeof alias === 'string' ? alias : alias.name] = name;
+    }
+
+    return acc;
+  }, {}),
+  categories,
+};
+
+export default eventHandler((event) => {
+  setResponseHeader(event, 'Cache-Control', 'public, max-age=86400');
+  setResponseHeader(event, 'Access-Control-Allow-Origin', '*');
+
+  return dataResponse;
+});

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

@@ -13,7 +13,10 @@ export default eventHandler((event) => {
   const data = pathData.at(-1).slice(0, -4);
   const [name] = pathData;
 
-  const src = Buffer.from(data, 'base64').toString('utf8');
+  const src = Buffer.from(data, 'base64')
+    .toString('utf8')
+    .replaceAll('\n', '')
+    .replace(/<svg[^>]*>|<\/svg>/g, '');
 
   const children = [];
 
@@ -25,18 +28,18 @@ export default eventHandler((event) => {
     .map((_, idx, arr) => arr.slice(0, idx + 1).join('-'))
     .reverse()
     .find((groupName) => groupName in iconNodes);
-  if (backdropName) {
+  if (!(name in iconNodes) && backdropName) {
     const iconNode = iconNodes[backdropName];
 
     const LucideIcon = createLucideIcon(backdropName, iconNode);
     const svg = renderToStaticMarkup(createElement(LucideIcon));
-    const backdropString = svg.replace(/<svg[^>]*>|<\/svg>/g, '');
+    const backdropString = svg.replaceAll('\n', '').replace(/<svg[^>]*>|<\/svg>/g, '');
 
     children.push(
       createElement(Backdrop, {
         backdropString,
         src,
-        color: name in iconNodes ? 'red' : '#777',
+        color: '#777',
       }),
     );
   }

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

@@ -0,0 +1,37 @@
+import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
+import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import { createElement } from 'react';
+import Diff from '../../../lib/SvgPreview/Diff.tsx';
+import iconNodes from '../../../data/iconNodes';
+import createLucideIcon from 'lucide-react/src/createLucideIcon';
+
+export default eventHandler((event) => {
+  const { params } = event.context;
+
+  const pathData = params.data.split('/');
+  const data = pathData.at(-1).slice(0, -4);
+  const [name] = pathData;
+
+  const newSrc = Buffer.from(data, 'base64')
+    .toString('utf8')
+    .replaceAll('\n', '')
+    .replace(/<svg[^>]*>|<\/svg>/g, '');
+
+  const children = [];
+
+  const oldSrc = iconNodes[name]
+    ? renderToStaticMarkup(createElement(createLucideIcon(name, iconNodes[name])))
+        .replaceAll('\n', '')
+        .replace(/<svg[^>]*>|<\/svg>/g, '')
+    : '';
+
+  const svg = Buffer.from(
+    // We can't use jsx here, is not supported here by nitro.
+    renderToString(createElement(Diff, { oldSrc, newSrc, showGrid: true }, children)),
+  ).toString('utf8');
+
+  defaultContentType(event, 'image/svg+xml');
+  setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
+
+  return svg;
+});

docs/.vitepress/api/tags/index.get.ts

@@ -1,4 +1,3 @@
-import { eventHandler, setResponseHeader } from 'h3';
 import iconMetaData from '../../data/iconMetaData';
 
 export default eventHandler((event) => {

docs/.vitepress/config.ts

@@ -28,6 +28,10 @@ export default defineConfig({
             new URL('./theme/components/overrides/VPFooter.vue', import.meta.url),
           ),
         },
+        {
+          find: '~/.vitepress',
+          replacement: fileURLToPath(new URL('./', import.meta.url)),
+        },
       ],
     },
   },

docs/.vitepress/data/categoriesData.json

@@ -0,0 +1,186 @@
+[
+  {
+    "name": "accessibility",
+    "title": "Accessibility"
+  },
+  {
+    "name": "account",
+    "title": "Accounts & access"
+  },
+  {
+    "name": "animals",
+    "title": "Animals"
+  },
+  {
+    "name": "arrows",
+    "title": "Arrows"
+  },
+  {
+    "name": "brands",
+    "title": "Brands"
+  },
+  {
+    "name": "buildings",
+    "title": "Buildings"
+  },
+  {
+    "name": "charts",
+    "title": "Charts"
+  },
+  {
+    "name": "communication",
+    "title": "Communication"
+  },
+  {
+    "name": "connectivity",
+    "title": "Connectivity"
+  },
+  {
+    "name": "currency",
+    "title": "Currency"
+  },
+  {
+    "name": "cursors",
+    "title": "Cursors"
+  },
+  {
+    "name": "design",
+    "title": "Design"
+  },
+  {
+    "name": "development",
+    "title": "Coding & development"
+  },
+  {
+    "name": "devices",
+    "title": "Devices"
+  },
+  {
+    "name": "emoji",
+    "title": "Emoji"
+  },
+  {
+    "name": "files",
+    "title": "File icons"
+  },
+  {
+    "name": "food-beverage",
+    "title": "Food & beverage"
+  },
+  {
+    "name": "furniture",
+    "title": "Furniture"
+  },
+  {
+    "name": "gaming",
+    "title": "Gaming"
+  },
+  {
+    "name": "home",
+    "title": "Home"
+  },
+  {
+    "name": "layout",
+    "title": "Layout"
+  },
+  {
+    "name": "mail",
+    "title": "Mail"
+  },
+  {
+    "name": "maps",
+    "title": "Maps"
+  },
+  {
+    "name": "maths",
+    "title": "Maths"
+  },
+  {
+    "name": "medical",
+    "title": "Medical"
+  },
+  {
+    "name": "money",
+    "title": "Money"
+  },
+  {
+    "name": "multimedia",
+    "title": "Multimedia"
+  },
+  {
+    "name": "nature",
+    "title": "Nature"
+  },
+  {
+    "name": "navigation",
+    "title": "Navigation"
+  },
+  {
+    "name": "notifications",
+    "title": "Notifications"
+  },
+  {
+    "name": "people",
+    "title": "People"
+  },
+  {
+    "name": "photography",
+    "title": "Photography"
+  },
+  {
+    "name": "science",
+    "title": "Science"
+  },
+  {
+    "name": "seasons",
+    "title": "Seasons"
+  },
+  {
+    "name": "security",
+    "title": "Security"
+  },
+  {
+    "name": "shapes",
+    "title": "Shapes"
+  },
+  {
+    "name": "shopping",
+    "title": "Shopping"
+  },
+  {
+    "name": "social",
+    "title": "Social"
+  },
+  {
+    "name": "sports",
+    "title": "Sports"
+  },
+  {
+    "name": "sustainability",
+    "title": "Sustainability"
+  },
+  {
+    "name": "text",
+    "title": "Text formatting"
+  },
+  {
+    "name": "time",
+    "title": "Time & calendar"
+  },
+  {
+    "name": "tools",
+    "title": "Tools"
+  },
+  {
+    "name": "transportation",
+    "title": "Transportation"
+  },
+  {
+    "name": "travel",
+    "title": "Travel"
+  },
+  {
+    "name": "weather",
+    "title": "Weather"
+  }
+]

docs/.vitepress/data/packageData.json

@@ -158,16 +158,5 @@
         "href": "https://www.npmjs.com/package/lucide-static"
       }
     ]
-  },
-  "lucide-flutter": {
-    "order": 9,
-    "icon": "flutter",
-    "shields": [
-      {
-        "alt": "flutter",
-        "src": "https://img.shields.io/pub/v/lucide_icons",
-        "href": "https://img.shields.io/pub/v/lucide_icons"
-      }
-    ]
   }
 }

docs/.vitepress/data/teamData.json

@@ -11,7 +11,7 @@
       },
       {
         "icon": "x",
-        "link": "https://github.com/ericfennis"
+        "link": "https://x.com/ericfennis"
       }
     ]
   },
@@ -31,8 +31,8 @@
     ]
   },
   {
-    "name": "jguddas",
-    "title": "Maintainer of Lucide & Software engineer @lego",
+    "name": "Jakob Guddas",
+    "title": "Maintainer of Lucide & Software engineer @LEGO",
     "image": "https://github.com/jguddas.png?size=192",
     "socialLinks": [
       {

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

@@ -3,15 +3,22 @@ import React from 'react';
 interface BackdropProps {
   src: string;
   color?: string;
+  outline?: boolean;
   backdropString: string;
 }
 
-const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.Element => {
+const Backdrop = ({
+  src,
+  color = 'red',
+  outline = true,
+  backdropString,
+}: BackdropProps): JSX.Element => {
+  const id = React.useId();
   return (
     <>
       <defs xmlns="http://www.w3.org/2000/svg">
         <pattern
-          id="pattern"
+          id={`pattern-${id}`}
           width=".1"
           height=".1"
           patternUnits="userSpaceOnUse"
@@ -30,69 +37,58 @@ const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.El
         </pattern>
       </defs>
       <mask
-        id="svg-preview-backdrop-mask-outline"
+        id={`svg-preview-backdrop-mask-${id}`}
         maskUnits="userSpaceOnUse"
       >
         <g
           stroke="#fff"
           dangerouslySetInnerHTML={{ __html: backdropString }}
         />
-        <g
-          dangerouslySetInnerHTML={{ __html: src }}
-          strokeWidth={2.05}
-        />
+        <g dangerouslySetInnerHTML={{ __html: src }} />
       </mask>
       <mask
-        id="svg-preview-backdrop-mask-fill"
+        id={`svg-preview-backdrop-mask-outline-${id}`}
         maskUnits="userSpaceOnUse"
-      >
-        <g
-          stroke="#fff"
-          dangerouslySetInnerHTML={{ __html: backdropString }}
-        />
-        <g
-          dangerouslySetInnerHTML={{ __html: src }}
-          strokeWidth={2.05}
-        />
-        <g
-          strokeWidth={1.75}
-          dangerouslySetInnerHTML={{ __html: backdropString }}
-        />
-      </mask>
-      <g
-        strokeWidth={2.25}
-        stroke="url(#pattern)"
-        mask={'url(#svg-preview-backdrop-mask-outline)'}
       >
         <rect
           x="0"
           y="0"
           width="24"
           height="24"
-          fill="url(#pattern)"
-          opacity={0.5}
+          fill="#fff"
           stroke="none"
         />
+        <g
+          strokeWidth={1.75}
+          dangerouslySetInnerHTML={{ __html: backdropString }}
+        />
+      </mask>
+      <g mask={`url(#svg-preview-backdrop-mask-${id})`}>
+        <rect
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+          opacity={0.5}
+          fill={`url(#pattern-${id})`}
+          stroke="none"
+        />
+        <g
+          stroke={color}
+          strokeWidth={2.25}
+          opacity={0.75}
+          dangerouslySetInnerHTML={{ __html: src }}
+        />
+        {outline && (
+          <g
+            stroke={color}
+            strokeWidth={2.25}
+            opacity={0.75}
+            mask={`url(#svg-preview-backdrop-mask-outline-${id})`}
+            dangerouslySetInnerHTML={{ __html: backdropString }}
+          />
+        )}
       </g>
-      <rect
-        x="0"
-        y="0"
-        width="24"
-        height="24"
-        fill="url(#pattern)"
-        stroke="none"
-        mask={'url(#svg-preview-backdrop-mask-fill)'}
-      />
-      <rect
-        x="0"
-        y="0"
-        width="24"
-        height="24"
-        fill={color}
-        opacity={0.5}
-        stroke="none"
-        mask={'url(#svg-preview-backdrop-mask-fill)'}
-      />
     </>
   );
 };

docs/.vitepress/lib/SvgPreview/Diff.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import Backdrop from './Backdrop.tsx';
+import { darkModeCss, Grid } from './index.tsx';
+
+const SvgPreview = React.forwardRef<
+  SVGSVGElement,
+  {
+    oldSrc: string;
+    newSrc: string;
+  } & React.SVGProps<SVGSVGElement>
+>(({ oldSrc, newSrc, children, ...props }, ref) => {
+  return (
+    <svg
+      ref={ref}
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <style>{darkModeCss}</style>
+      <Grid
+        strokeWidth={0.1}
+        stroke="#777"
+        strokeOpacity={0.3}
+        radius={1}
+      />
+      <mask
+        id="gray"
+        maskUnits="userSpaceOnUse"
+      >
+        <rect
+          x="0"
+          y="0"
+          width="24"
+          height="24"
+          fill="#000"
+          stroke="none"
+        />
+        <g
+          stroke="#fff"
+          dangerouslySetInnerHTML={{ __html: oldSrc }}
+        />
+      </mask>
+      <Backdrop
+        src=""
+        outline={false}
+        backdropString={`<g mask="url('#gray')">${newSrc}</g>`}
+        color="#777"
+      />
+      <Backdrop
+        src={oldSrc}
+        backdropString={newSrc}
+        color="lime"
+      />
+      <Backdrop
+        src={newSrc}
+        backdropString={oldSrc}
+        color="red"
+      />
+      {children}
+    </svg>
+  );
+});
+
+export default SvgPreview;

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

@@ -2,7 +2,23 @@ import React from 'react';
 import { PathProps, Path } from './types';
 import { getPaths, assert } from './utils';
 
-const Grid = ({
+export const darkModeCss = `
+  @media screen and (prefers-color-scheme: light) {
+    .svg-preview-grid-rect { fill: none }
+  }
+  @media screen and (prefers-color-scheme: dark) {
+    .svg-preview-grid-rect { fill: none }
+    .svg
+    .svg-preview-grid-group,
+    .svg-preview-radii-group,
+    .svg-preview-shadow-mask-group,
+    .svg-preview-shadow-group {
+      stroke: #fff;
+    }
+  }
+`;
+
+export const Grid = ({
   radius,
   fill = '#fff',
   ...props
@@ -301,7 +317,6 @@ const Handles = ({
   'strokeWidth' | 'stroke' | 'strokeDasharray' | 'strokeOpacity',
   any
 >) => {
-  console.log(paths);
   return (
     <g
       className="svg-preview-handles-group"
@@ -340,19 +355,6 @@ const SvgPreview = React.forwardRef<
 >(({ src, children, showGrid = false, ...props }, ref) => {
   const paths = typeof src === 'string' ? getPaths(src) : src;
 
-  const darkModeCss = `@media screen and (prefers-color-scheme: light) {
-  .svg-preview-grid-rect { fill: none }
-}
-@media screen and (prefers-color-scheme: dark) {
-  .svg-preview-grid-rect { fill: none }
-  .svg
-  .svg-preview-grid-group,
-  .svg-preview-radii-group,
-  .svg-preview-shadow-mask-group,
-  .svg-preview-shadow-group {
-    stroke: #fff;
-  }
-}`;
   return (
     <svg
       ref={ref}

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

@@ -10,18 +10,24 @@ type CodeExampleType = {
 const getIconCodes = (): CodeExampleType => {
   return [
     {
-      language: 'html',
-      title: 'HTML',
-      code: `<i data-lucide="Name"></i>`,
+      language: 'js',
+      title: 'Vanilla',
+      code: `\
+import { createIcons, icons } from 'lucide';
+
+createIcons({ icons });
+
+document.body.append('<i data-lucide="$Name"></i>');\
+  `,
     },
     {
       language: 'tsx',
       title: 'React',
-      code: `import { PascalCase } from 'lucide-react';
+      code: `import { $PascalCase } from 'lucide-react';
 
 const App = () => {
   return (
-    <PascalCase />
+    <$PascalCase />
   );
 };
 
@@ -32,11 +38,11 @@ export default App;
       language: 'vue',
       title: 'Vue',
       code: `<script setup>
-  import { PascalCase } from 'lucide-vue-next';
+import { $PascalCase } from 'lucide-vue-next';
 </script>
 
 <template>
-  <PascalCase />
+  <$PascalCase />
 </template>
 `,
     },
@@ -44,20 +50,20 @@ export default App;
       language: 'svelte',
       title: 'Svelte',
       code: `<script>
-import { PascalCase } from 'lucide-svelte';
+import { $PascalCase } from 'lucide-svelte';
 </script>
 
-<PascalCase />
+<$PascalCase />
 `,
     },
     {
       language: 'tsx',
       title: 'Preact',
-      code: `import { PascalCase } from 'lucide-preact';
+      code: `import { $PascalCase } from 'lucide-preact';
 
 const App = () => {
   return (
-    <PascalCase />
+    <$PascalCase />
   );
 };
 
@@ -67,11 +73,11 @@ export default App;
     {
       language: 'tsx',
       title: 'Solid',
-      code: `import { PascalCase } from 'lucide-solid';
+      code: `import { $PascalCase } from 'lucide-solid';
 
 const App = () => {
   return (
-    <PascalCase />
+    <$PascalCase />
   );
 };
 
@@ -82,16 +88,16 @@ export default App;
       language: 'tsx',
       title: 'Angular',
       code: `// app.module.ts
-import { LucideAngularModule, PascalCase } from 'lucide-angular';
+import { LucideAngularModule, $PascalCase } from 'lucide-angular';
 
 @NgModule({
   imports: [
-    LucideAngularModule.pick({ PascalCase })
+    LucideAngularModule.pick({ $PascalCase })
   ],
 })
 
 // app.component.html
-<lucide-icon name="Name"></lucide-icon>
+<lucide-icon name="$Name"></lucide-icon>
 `,
     },
     {
@@ -101,7 +107,7 @@ import { LucideAngularModule, PascalCase } from 'lucide-angular';
 @import ('~lucide-static/font/Lucide.css');
 </style>
 
-<div class="icon-Name"></div>
+<div class="icon-$Name"></div>
 `,
     },
   ];

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

@@ -0,0 +1,161 @@
+import { bundledLanguages, type ThemeRegistration } from 'shikiji';
+import { getHighlighter } from 'shikiji';
+
+type CodeExampleType = {
+  title: string;
+  language: string;
+  code: string;
+}[];
+
+const getIconCodes = (): CodeExampleType => {
+  return [
+    {
+      language: 'js',
+      title: 'Vanilla',
+      code: `\
+import { createIcons, icons } from 'lucide';
+import { $CamelCase } from '@lucide/lab';
+
+createIcons({
+  icons: {
+    $CamelCase
+  }
+});
+
+document.body.append('<i data-lucide="$Name"></i>');\
+  `,
+    },
+    {
+      language: 'tsx',
+      title: 'React',
+      code: `import { Icon } from 'lucide-react';
+import { $CamelCase } from '@lucide/lab';
+
+const App = () => {
+  return (
+    <Icon iconNode={$CamelCase} />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'vue',
+      title: 'Vue',
+      code: `<script setup>
+import { Icon } from 'lucide-vue-next';
+import { $CamelCase } from '@lucide/lab';
+</script>
+
+<template>
+  <Icon :iconNode="burger" />
+</template>
+`,
+    },
+    {
+      language: 'svelte',
+      title: 'Svelte',
+      code: `<script>
+import { Icon } from 'lucide-svelte';
+import { $CamelCase } from '@lucide/lab';
+</script>
+
+<Icon iconNode={burger} />
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Preact',
+      code: `import { Icon } from 'lucide-preact';
+import { $CamelCase } from '@lucide/lab';
+
+const App = () => {
+  return (
+    <Icon iconNode={$CamelCase} />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Solid',
+      code: `import { Icon } from 'lucide-solid';
+import { $CamelCase } from '@lucide/lab';
+
+const App = () => {
+  return (
+    <Icon iconNode={$CamelCase} />
+  );
+};
+
+export default App;
+`,
+    },
+    {
+      language: 'tsx',
+      title: 'Angular',
+      code: `// app.module.ts
+import { LucideAngularModule } from 'lucide-angular';
+import { $CamelCase } from '@lucide/lab';
+
+@NgModule({
+  imports: [
+    LucideAngularModule.pick({ $CamelCase })
+  ],
+})
+
+// app.component.html
+<lucide-icon name="$CamelCase"></lucide-icon>
+`,
+    },
+  ];
+};
+
+export type ThemeOptions =
+  | ThemeRegistration
+  | { light: ThemeRegistration; dark: ThemeRegistration };
+
+const highLightCode = async (code: string, lang: string, active?: boolean) => {
+  const highlighter = await getHighlighter({
+    themes: ['github-light', 'github-dark'],
+    langs: Object.keys(bundledLanguages),
+  });
+
+  const highlightedCode = highlighter
+    .codeToHtml(code, {
+      lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      defaultColor: false,
+    })
+    .replace('shiki-themes', 'shiki-themes vp-code');
+
+  return `<div class="language-${lang} ${active ? 'active' : ''}">
+  <button title="Copy Code" class="copy"></button>
+  <span class="lang">${lang}</span>
+  ${highlightedCode}
+  </div>`;
+};
+
+export default async function createCodeExamples() {
+  const codes = getIconCodes();
+
+  const codeExamplePromises = codes.map(async ({ title, language, code }, index) => {
+    const isFirst = index === 0;
+
+    const codeString = await highLightCode(code, language, isFirst);
+
+    return {
+      title,
+      language: language,
+      code: codeString,
+    };
+  });
+
+  return Promise.all(codeExamplePromises);
+}

docs/.vitepress/lib/codeExamples/highLightCode.ts

@@ -0,0 +1,32 @@
+import { bundledLanguages, type ThemeRegistration } from 'shikiji';
+import { getHighlighter } from 'shikiji';
+
+export type ThemeOptions =
+  | ThemeRegistration
+  | { light: ThemeRegistration; dark: ThemeRegistration };
+
+const highLightCode = async (code: string, lang: string, active?: boolean) => {
+  const highlighter = await getHighlighter({
+    themes: ['github-light', 'github-dark'],
+    langs: Object.keys(bundledLanguages),
+  });
+
+  const highlightedCode = highlighter
+    .codeToHtml(code, {
+      lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      defaultColor: false,
+    })
+    .replace('shiki-themes', 'shiki-themes vp-code');
+
+  return `<div class="language-${lang} ${active ? 'active' : ''}">
+  <button title="Copy Code" class="copy"></button>
+  <span class="lang">${lang}</span>
+  ${highlightedCode}
+  </div>`;
+};
+
+export default highLightCode;

docs/.vitepress/lib/codeExamples/types.ts

@@ -0,0 +1,5 @@
+export type CodeExampleType = {
+  title: string;
+  language: string;
+  code: string;
+}[];

docs/.vitepress/lib/fetchPackages.ts

@@ -1,6 +1,5 @@
 import { promises as fs, constants } from 'fs';
 import path from 'path';
-import yaml from 'js-yaml';
 import { PackageItem } from '../theme/types';
 
 const fileExist = (filePath) =>
@@ -27,11 +26,6 @@ const fetchPackages = async (): Promise<PackageItem[]> => {
         return JSON.parse(await fs.readFile(jsonFilePath, 'utf-8'));
       }
 
-      const ymlFilePath = path.resolve(filePath, 'pubspec.yaml');
-      if (await fileExist(ymlFilePath)) {
-        return yaml.load(await fs.readFile(ymlFilePath, 'utf-8'));
-      }
-
       return null;
     }),
   );

docs/.vitepress/sidebar.ts

@@ -31,10 +31,10 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
     {
       text: 'Advanced',
       items: [
-        // {
-        //   text: 'Accessibility',
-        //   link: '/guide/advanced/accessibility'
-        // },
+        {
+          text: 'Accessibility',
+          link: '/guide/advanced/accessibility',
+        },
         {
           text: 'Global styling',
           link: '/guide/advanced/global-styling',
@@ -117,6 +117,10 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
           text: 'Designing in Figma',
           link: '/guide/design/figma-guide',
         },
+        {
+          text: 'Designing in Affinity Designer',
+          link: '/guide/design/affinity-designer-guide',
+        },
       ],
     },
   ],

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

@@ -7,7 +7,16 @@ const props = defineProps<{
   href?: string
 }>()
 
+const isExternal = computed(() => props.href?.startsWith('http') ?? false)
+
 const component = computed(() => props.href ? 'a' : 'div')
+const target = computed(() => isExternal.value ? '_blank' : undefined)
+const rel = computed(() => isExternal.value ? 'noreferrer noopener' : undefined)
+
+const onClick = computed(() => {
+  if(!props.href || isExternal) return
+  return go(props.href)
+})
 </script>
 
 <template>
@@ -15,7 +24,9 @@ const component = computed(() => props.href ? 'a' : 'div')
     :is="component"
     :href="href"
     class="badge"
-    @click="props?.href ? go(href) : undefined"
+    :target="target"
+    :rel="rel"
+    @click="onClick"
   >
     <slot/>
   </component>

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  label: string
+  id: string
+  value: string
+  modelValue: string | string[]
+}>()
+
+const emit = defineEmits(['change', 'input', 'update:modelValue'])
+
+const model = computed({
+  get: () => {
+    if (Array.isArray(props.modelValue)) {
+      return props.modelValue.includes(props.value)
+    }
+    return props.modelValue === props.value
+
+  },
+  set: (value: string) => {
+    if (Array.isArray(props.modelValue)) {
+      const newValue = [...props.modelValue]
+      const index = newValue.indexOf(props.value)
+      if (value) {
+        if (index === -1) {
+          newValue.push(props.value)
+        }
+      } else {
+        if (index !== -1) {
+          newValue.splice(index, 1)
+        }
+      }
+      emit('update:modelValue', newValue)
+    } else {
+      emit('update:modelValue', value)
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="checkbox-wrapper">
+    <input
+      type="checkbox"
+      class="checkbox"
+      ref="input"
+      :id="id"
+      v-model="model"
+      v-bind="$attrs"
+    />
+    <label :for="id" class="checkbox-label">
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.checkbox-label {
+  line-height: 20px;
+  font-size: 13px;
+  color: var(--vt-c-text-1);
+  transition: color .5s;
+  display: block;
+}
+
+.checkbox {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  border-radius: 4px;
+}
+
+.checkbox:checked {
+  border-color: transparent;
+    background: url("data:image/svg+xml,%3Csvg width='12px' height='12px' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
+      center no-repeat var(--vp-c-brand);;
+}
+
+</style>

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

@@ -42,7 +42,7 @@ onMounted(() => {
   font-weight: 400;
   background: var(--vp-c-brand-dark);
   color: white;
-  z-index: 10;
+  z-index: 99;
   white-space: nowrap;
   padding: 2px 8px;
   border-radius: 4px;

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

@@ -8,8 +8,6 @@ import { data } from './HomeHeroBefore.data'
   <HomeContainer class="container">
     <Badge
       :href="`https://github.com/lucide-icons/lucide/releases/tag/${data.version}`"
-      target="_blank"
-      rel="noreferrer noopener"
     >v{{ data.version }}</Badge>
   </HomeContainer>
 </template>

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

@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import Card from '../base/Card.vue'
-import HomeSectionTitle from './HomeSectionTitle.vue'
-import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
+import Card from '../base/Card.vue';
+import HomeSectionTitle from './HomeSectionTitle.vue';
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 </script>
 
 <template>
-  <HomeSectionTitle :headingLevel="3">
-    Sponsor the Lucide maintainers
-  </HomeSectionTitle>
+  <HomeSectionTitle :headingLevel="3"> Sponsor the Lucide maintainers </HomeSectionTitle>
   <Card class="sponsor-card">
     <img
-      src="/open-collective.png"
+      src="/company-logos/open-collective-light.svg"
       alt="Open Collective logo"
+      class="logo light"
+      width="242"
+      height="42"
+    />
+    <img
+      src="/company-logos/open-collective-dark.svg"
+      alt="Open Collective logo"
+      class="logo dark"
       width="242"
       height="42"
     />
@@ -37,6 +43,13 @@ import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vu
   margin: auto 0;
 }
 
+html.dark .logo.dark {
+  display: none;
+}
+html:not(.dark) .logo.light {
+  display: none;
+}
+
 @media (min-width: 640px) {
   .sponsor-card {
     flex-direction: row;

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

@@ -3,7 +3,7 @@ export interface TeamMember {
   name: string
   title: string
   image: string
-  sponsor: string
+  sponsor?: string
   socialLinks: DefaultTheme.SocialLink[]
 }
 </script>
@@ -75,6 +75,7 @@ defineProps<TeamMember>()
   font-weight: 500;
   color: var(--vp-c-text-2);
   text-align: center;
+  text-wrap: balance;
   margin-bottom: 16px;;
 }
 

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

@@ -6,6 +6,7 @@ import { isActive } from 'vitepress/dist/client/shared'
 import { useActiveAnchor } from '../../composables/useActiveAnchor'
 import { data } from './CategoryList.data'
 import CategoryListItem from './CategoryListItem.vue'
+import SidebarTitle from './SidebarTitle.vue'
 import { useCategoryView } from '../../composables/useCategoryView'
 
 const { page } = useData()
@@ -46,10 +47,13 @@ watch(headers, () => {
 
 <template>
   <div class="category-list" ref="container">
-    <VPLink class="sidebar-title" href="/icons/" :class="{ 'active': overviewIsActive } ">
+    <SidebarTitle>
+      View
+    </SidebarTitle>
+    <VPLink class="sidebar-link sidebar-text" href="/icons/" :class="{ 'active': overviewIsActive } ">
       All
     </VPLink>
-    <VPLink class="sidebar-title" href="/icons/categories" :class="{ 'active': categoriesIsActive } ">
+    <VPLink class="sidebar-link sidebar-text" href="/icons/categories" :class="{ 'active': categoriesIsActive } ">
       Categories
     </VPLink>
     <div class="content">
@@ -62,17 +66,20 @@ watch(headers, () => {
 </template>
 
 <style scoped>
-.sidebar-title {
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  margin-bottom: 6px;
+.sidebar-text {
   line-height: 24px;
   font-size: 14px;
   display: block;
   transition: color 0.25s;
+  padding: 4px 0;
 }
 
-.sidebar-title:hover, .sidebar-title.active {
+.sidebar-link {
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.sidebar-link:hover, .sidebar-link.active {
   color: var(--vp-c-brand);
 }
 .content {

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

@@ -39,6 +39,12 @@ function copyJSX() {
   navigator.clipboard.writeText(code)
 }
 
+function copyComponentName() {
+  const code = componentName.value
+
+  navigator.clipboard.writeText(code)
+}
+
 function copyVue() {
   let attrs = ['']
 
@@ -101,6 +107,7 @@ function copyAngular() {
     :popoverPosition="popoverPosition"
     :options="[
       { text: 'Copy JSX' , onClick: copyJSX },
+      { text: 'Copy Component Name' , onClick: copyComponentName },
       { text: 'Copy Vue' , onClick: copyVue },
       { text: 'Copy Svelte' , onClick: copyJSX },
       { text: 'Copy Angular' , onClick: copyAngular },

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

@@ -11,19 +11,30 @@ import IconInfo from './IconInfo.vue';
 import Badge from '../base/Badge.vue';
 import { computedAsync } from '@vueuse/core';
 import { satisfies } from 'semver';
+import { useExternalLibs } from '../../composables/useExternalLibs';
 
 const props = defineProps<{
   iconName: string | null
 }>()
 
+const { externalIconNodes } = useExternalLibs()
+
 const { go } = useRouter()
 
 const icon = computedAsync<IconEntity | null>(async () => {
   if (props.iconName) {
     try {
-      return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
+      if (props.iconName.includes(':')) {
+        const [library, name] = props.iconName.split(':')
+
+        return externalIconNodes.value[library].find((icon) => icon.name === name)
+      } else {
+        return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
+      }
     } catch (err) {
-      go(`/icons/${props.iconName}`)
+      if (!props.iconName.includes(':')) {
+        go(`/icons/${props.iconName}`)
+      }
     }
   }
   return null
@@ -55,10 +66,8 @@ const Expand = createLucideIcon('Expand', expand)
             v-if="icon.createdRelease"
             class="version"
             :href="releaseTagLink(icon.createdRelease.version)"
-            target="_blank"
-            rel="noreferrer noopener"
           >v{{ icon.createdRelease.version }}</Badge>
-          <IconButton  @click="go(`/icons/${icon.name}`)">
+          <IconButton  @click="go(icon.externalLibrary ? `/icons/${icon.externalLibrary}/${icon.name}` : `/icons/${icon.name}`)">
             <component :is="Expand" />
           </IconButton>
           <IconButton  @click="onClose">

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

@@ -25,8 +25,10 @@ function setActiveIcon(name: string) {
       :key="icon.name"
     >
       <IconItem
-        v-bind="icon"
-        @setActiveIcon="setActiveIcon(icon.name)"
+        :iconNode="icon.iconNode"
+        :name="icon.name"
+        :externalLibrary="icon.externalLibrary"
+        @setActiveIcon="setActiveIcon"
         :active="activeIcon === icon.name"
         customizable
         :overlayMode="overlayMode"

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

@@ -7,6 +7,8 @@ import CopyCodeButton from './CopyCodeButton.vue';
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 import {useData, useRouter} from 'vitepress';
 import { computed } from 'vue';
+import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
+import { diamond }  from '../../../data/iconNodes'
 
 const props = defineProps<{
   icon: IconEntity
@@ -20,13 +22,21 @@ const tags = computed(() => {
   if (!props.icon || !props?.icon?.tags) return []
   return props.icon.tags.join(' • ')
 })
+
+const DiamondIcon = createLucideIcon('Diamond', diamond)
 </script>
 
 <template>
   <div class="icon-info">
-    <IconDetailName class="icon-name">
-      {{ icon.name }}
-    </IconDetailName>
+    <div class="icon-name-wrapper">
+      <IconDetailName class="icon-name">
+        {{ icon.name }}
+      </IconDetailName>
+      <div v-if="icon.externalLibrary" class="icon-external-lib">
+        <DiamondIcon fill="currentColor" :size="12"/>
+        {{ icon.externalLibrary }}
+      </div>
+    </div>
     <div class="tags-scroller" v-if="tags.length">
       <p class="icon-tags horizontal-scroller">
         {{ tags }}
@@ -44,10 +54,10 @@ const tags = computed(() => {
 
     <div class="group buttons">
       <VPButton
-        v-if="!page?.relativePath?.startsWith?.(`icons/${icon.name}`)"
-        :href="`/icons/${icon.name}`"
+        v-if="!page?.relativePath?.startsWith?.(icon.externalLibrary ? `icons/${icon.externalLibrary}/${icon.name}`: `icons/${icon.name}`)"
+        :href="icon.externalLibrary ? `/icons/${icon.externalLibrary}/${icon.name}`: `/icons/${icon.name}`"
         text="See in action"
-        @click="go(`/icons/${icon.name}`)"
+        @click="go(icon.externalLibrary ? `/icons/${icon.externalLibrary}/${icon.name}`: `/icons/${icon.name}`)"
       />
       <CopySVGButton :name="icon.name" :popoverPosition="popoverPosition"/>
       <CopyCodeButton :name="icon.name" :popoverPosition="popoverPosition"/>
@@ -67,9 +77,27 @@ const tags = computed(() => {
   text-transform: capitalize;
 }
 .icon-name {
+  margin-right: -36px;
+}
+
+.icon-name-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 2px;
   margin-bottom: 4px;
 }
 
+.icon-external-lib {
+  color: var(--vp-c-brand-dark);
+  padding: 4px 12px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 28px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
 .icon-tags {
   font-size: 16px;
   color: var(--vp-c-text-2);

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

@@ -6,6 +6,7 @@ import { useRouter } from 'vitepress';
 import getSVGIcon from '../../utils/getSVGIcon';
 import useConfetti from '../../composables/useConfetti';
 import Tooltip from '../base/Tooltip.vue';
+import { diamond }  from '../../../data/iconNodes'
 
 const downloadText = 'Download!'
 const copiedText = 'Copied!'
@@ -16,6 +17,7 @@ const props = defineProps<{
   name: string;
   iconNode: IconNode;
   active: boolean;
+  externalLibrary?: string;
   customizable?: boolean;
   overlayMode?: boolean
   hideIcon?: boolean
@@ -33,8 +35,9 @@ const icon = computed(() => {
   return createLucideIcon(props.name, props.iconNode)
 })
 
-async function navigateToIcon(event) {
+const href = computed(() => props.externalLibrary ? `/icons/${props.externalLibrary}/${props.name}` : `/icons/${props.name}`)
 
+async function navigateToIcon(event) {
   if (event.shiftKey) {
     event.preventDefault()
     const svgString = getSVGIcon(event.target.firstChild, {
@@ -50,13 +53,16 @@ async function navigateToIcon(event) {
 
   if(props.overlayMode && showOverlay.value) {
     event.preventDefault()
-    window.history.pushState({}, '', `/icons/${props.name}`)
-    emit('setActiveIcon', props.name)
+
+    window.history.pushState({}, '', props.externalLibrary ? `/icons/${props.externalLibrary}/${props.name}` : `/icons/${props.name}`)
+    emit('setActiveIcon', props.externalLibrary ? `${props.externalLibrary}:${props.name}`: props.name)
   } else {
     event.preventDefault()
-    go(`/icons/${props.name}`)
+    go(props.externalLibrary ? `/icons/${props.externalLibrary}/${props.name}` : `/icons/${props.name}`)
   }
 }
+
+const DiamondIcon = createLucideIcon('Diamond', diamond)
 </script>
 
 <template>
@@ -66,7 +72,7 @@ async function navigateToIcon(event) {
       @click="navigateToIcon"
       :class="{ active, animate }"
       :aria-label="name"
-      :href="`/icons/${props.name}`"
+
       :data-confetti-text="confettiText"
       ref="ref"
     >
@@ -80,6 +86,13 @@ async function navigateToIcon(event) {
           }"
         />
       </KeepAlive>
+      <div
+        v-if="externalLibrary"
+        class="floating-diamond"
+        aria-hidden="true"
+      >
+        <DiamondIcon fill="currentColor" :size="8"/>
+      </div>
     </a>
   </Tooltip>
 </template>
@@ -88,6 +101,7 @@ async function navigateToIcon(event) {
 
 <style scoped>
 .icon-button {
+  position: relative;
   display: inline-block;
   border: 1px solid transparent;
   text-align: center;
@@ -104,6 +118,13 @@ async function navigateToIcon(event) {
   color: var(--vp-c-text-1);
 }
 
+.floating-diamond {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  color: var(--vp-c-brand);
+}
+
 .confetti-button:before,
 .confetti-button:after {
   z-index: 100;

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

@@ -19,7 +19,7 @@ export type CategoryRow = CategoryNameRow | CategoryIconsRow;
 import IconGrid from './IconGrid.vue'
 
 defineProps<{
-  activeIconName: string
+  activeIconName: string | null
   categoryRow: CategoryRow
 }>()
 

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent, onMounted } from 'vue';
+import { ref, computed, defineAsyncComponent, onMounted, watch, watchEffect } from 'vue';
 import type { IconEntity, Category } from '../../types';
 import useSearch from '../../composables/useSearch';
 import InputSearch from '../base/InputSearch.vue';
@@ -69,7 +69,7 @@ const categories = computed(() => {
   return props.categories
     .map(({ name, title }) => {
       const categoryIcons = props.icons.filter((icon) => {
-        const iconCategories = props.iconCategories[icon.name];
+        const iconCategories = icon?.externalLibrary ? icon.categories : props.iconCategories[icon.name]
 
         return iconCategories?.includes(name);
       });
@@ -140,6 +140,12 @@ function handleCloseDrawer() {
 
   window.history.pushState({}, '', '/icons/categories');
 }
+
+watchEffect(() => {
+
+  console.log(props.icons.find((icon) => icon.name === 'burger'));
+
+});
 </script>
 
 <template>

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import Checkbox from '../base/Checkbox.vue'
+import SidebarTitle from './SidebarTitle.vue'
+import { useExternalLibs } from '../../composables/useExternalLibs';
+import { ExternalLibs } from '../../types';
+
+interface ExternalLibrary {
+  name: string;
+  value: ExternalLibs;
+}
+
+const externalLibraries: ExternalLibrary[] = [
+  {
+    name: 'Lab',
+    value: 'lab'
+  },
+];
+
+const { selectedLibs } = useExternalLibs();
+</script>
+
+<template>
+  <div class="external-library-select">
+    <SidebarTitle>
+      Include external libs
+    </SidebarTitle>
+    <ul>
+      <li
+        v-for="library in externalLibraries"
+        :key="library.name"
+      >
+        <Checkbox
+          :label="library.name"
+          :id="library.name"
+          v-model="selectedLibs"
+          :value="library.value"
+        />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.external-library-select {
+  margin-bottom: 24px;
+}
+</style>

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

@@ -0,0 +1,19 @@
+<template>
+  <h2 class="sidebar-title sidebar-text">
+    <slot />
+  </h2>
+</template>
+
+<style scoped>
+.sidebar-title {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+}
+.sidebar-text {
+  line-height: 24px;
+  font-size: 14px;
+  display: block;
+  transition: color 0.25s;
+  padding: 4px 0;
+}
+</style>

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

@@ -23,8 +23,8 @@ const links = computed(() => [
     href: `${githubLink.value}/releases`
   },
   {
-    text: 'Github',
-    href: `${githubLink.value}/issues`
+    text: 'GitHub',
+    href: `${githubLink.value}`
   },
   {
     text: 'Issues',

docs/.vitepress/theme/components/packages/PackageList.data.ts

@@ -5,9 +5,10 @@ import fetchPackages from '../../../lib/fetchPackages';
 export default {
   async load() {
     const packages = await fetchPackages();
+
     return {
       packages: packages
-        .filter((p) => p.name in packageData)
+        .filter((p) => p?.name != null && p.name in packageData)
         .map((pData) => ({
           ...pData,
           ...packageData[pData.name],

docs/.vitepress/theme/components/packages/PackageList.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { data } from './PackageList.data'
 import GridSection from '../base/GridSection.vue'
-import PackageListItem from "./PackageListItem.vue";</script>
+import PackageListItem from "./PackageListItem.vue";
+</script>
 
 <template>
   <GridSection

docs/.vitepress/theme/components/packages/PackageListItem.vue

@@ -19,7 +19,7 @@ const props = defineProps<{
           <img v-if="packageData.iconDark" :src="packageData.iconDark" alt="" class="package-icon dark" :class="packageData.iconClass" />
         </div>
         <div class="package-title">
-          <h2 class="title">{{ props.packageData.name }}</h2>
+          <h2 class="title">{{ props.packageData?.name }}</h2>
           <a v-for="shield in props.packageData.shields" :href="shield.href" class="package-shield" rel="noreferrer noopener">
             <img :src="shield.src" :alt="shield.href" />
           </a>

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

@@ -0,0 +1,57 @@
+import { ref, inject, Ref, watch } from 'vue';
+import { ExternalLibs, IconEntity } from '../types';
+
+export const EXTERNAL_LIBS_CONTEXT = Symbol('externalLibs');
+
+type ExternalIconNodes = Partial<Record<ExternalLibs, IconEntity[]>>;
+
+interface ExternalLibContext {
+  selectedLibs: Ref<[ExternalLibs]>;
+  externalIconNodes: Ref<ExternalIconNodes>;
+}
+
+export const externalLibContext = {
+  selectedLibs: ref([]),
+  externalIconNodes: ref({}),
+};
+
+const externalLibIconNodesAPI = {
+  lab: 'https://lab.lucide.dev/api/icon-details',
+};
+
+export function useExternalLibs(): ExternalLibContext {
+  const context = inject<ExternalLibContext>(EXTERNAL_LIBS_CONTEXT);
+
+  watch(context?.selectedLibs, async (selectedLibs) => {
+    const savedIconNodes = { ...context?.externalIconNodes.value };
+    const newExternalIconNodes: ExternalIconNodes = {};
+
+    try {
+      for (const lib of selectedLibs) {
+        if (savedIconNodes[lib]) {
+          newExternalIconNodes[lib] = savedIconNodes[lib];
+        } else {
+          const response = await fetch(externalLibIconNodesAPI[lib]);
+          const iconNodes = await response.json();
+
+          if (iconNodes) {
+            newExternalIconNodes[lib] = Object.values(iconNodes).map((iconEntity: IconEntity) => ({
+              ...iconEntity,
+              externalLibrary: lib,
+            }));
+          }
+        }
+      }
+
+      context.externalIconNodes.value = newExternalIconNodes;
+    } catch (error) {
+      console.error(error);
+    }
+  });
+
+  if (!context) {
+    throw new Error('useExternalLibs must be used with externalLibs context');
+  }
+
+  return context;
+}

docs/.vitepress/theme/composables/useIconsWithExternalLibs.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+import { useExternalLibs } from '~/.vitepress/theme/composables/useExternalLibs';
+import { IconEntity } from '../types';
+
+const useIconsWithExternalLibs = (initialIcons?: IconEntity[]) => {
+  const { externalIconNodes } = useExternalLibs();
+
+  return computed(() => {
+    let icons = [];
+
+    if (initialIcons) {
+      icons = icons.concat(initialIcons);
+    }
+
+    const externalIconNodesArray = Object.values(externalIconNodes.value);
+
+    if (externalIconNodesArray?.length) {
+      externalIconNodesArray.forEach((iconNodes) => {
+        if (iconNodes?.length) {
+          icons = icons.concat(iconNodes);
+        }
+      });
+    }
+
+    return icons;
+  });
+};
+
+export default useIconsWithExternalLibs;

docs/.vitepress/theme/index.ts

@@ -7,6 +7,7 @@ import HomeHeroIconsCard from './components/home/HomeHeroIconsCard.vue';
 import HomeHeroBefore from './components/home/HomeHeroBefore.vue';
 import { ICON_STYLE_CONTEXT, iconStyleContext } from './composables/useIconStyle';
 import { CATEGORY_VIEW_CONTEXT, categoryViewContext } from './composables/useCategoryView';
+import { EXTERNAL_LIBS_CONTEXT, externalLibContext } from './composables/useExternalLibs';
 
 const theme: Partial<Theme> = {
   extends: DefaultTheme,
@@ -20,6 +21,7 @@ const theme: Partial<Theme> = {
   enhanceApp({ app }) {
     app.provide(ICON_STYLE_CONTEXT, iconStyleContext);
     app.provide(CATEGORY_VIEW_CONTEXT, categoryViewContext);
+    app.provide(EXTERNAL_LIBS_CONTEXT, externalLibContext);
   },
 };
 

docs/.vitepress/theme/layouts/IconsSidebarNavAfter.vue

@@ -3,6 +3,7 @@ import { useData } from 'vitepress'
 
 import CategoryList from '../components/icons/CategoryList.vue'
 import SidebarIconCustomizer from '../components/icons/SidebarIconCustomizer.vue'
+import ExternalLibrarySelect from '../components/icons/SidebarExternalLibrarySelect.vue'
 
 const { page } = useData()
 
@@ -11,6 +12,7 @@ const { page } = useData()
 <template>
   <div>
     <SidebarIconCustomizer v-if="page?.relativePath?.startsWith?.('icons')"/>
+    <ExternalLibrarySelect v-if="page?.relativePath?.startsWith?.('icons')"/>
     <CategoryList v-if="page?.relativePath?.startsWith?.('icons')"/>
   </div>
 </template>

docs/.vitepress/theme/types.ts

@@ -1,13 +1,18 @@
 export type IconNode = [elementName: string, attrs: Record<string, string>][];
 export type IconNodeWithKeys = [elementName: string, attrs: Record<string, string>, key: string][];
 
-export interface IconEntity {
-  name: string;
+export interface IconMetaData {
   tags: string[];
   categories: string[];
   contributors: string[];
   aliases?: string[];
+}
+
+export type ExternalLibs = 'lab';
+export interface IconEntity extends IconMetaData {
+  name: string;
   iconNode: IconNode;
+  externalLibrary?: ExternalLibs;
   createdRelease?: Release;
   changedRelease?: Release;
 }

docs/guide/advanced/accessibility.md

@@ -1,4 +1,215 @@
+---
+title: Accessibility
+---
+
 # Accessibility
 
-<!-- Description how you should use svg icons keeping web accessible -->
-<!-- See @JanTrichter comment about some information to write this: https://github.com/lucide-icons/lucide/pull/1521#discussion_r1332141390 -->
+Icons are pictures that show what something means without using words. They can be very helpful
+because they can quickly give information.
+
+However, not everyone can understand them easily. When using icons it is very important to consider
+the following aspects of accessibility.
+
+## Provide visible labels
+
+Icons are a helpful tool to improve perception, but they aren't a replacement for text.
+
+In most cases, it is probably a good idea to also provide a textual representation of your icon's
+function.
+
+![In short: Don’t rely on communicating the function of elements by icons alone. Do also provide a written description of the your interactive elements. For example: write out "On this page" on your on-page navigation element.](../../images/a11y/visible-labels.svg?raw=true)
+
+## Contrast
+
+Ensure there's enough contrast between the icon and its background so that it's visible to people
+with low vision or color vision deficiencies.
+
+We recommend
+following [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
+
+![In short: use a contrast ratio of at least 4.5:1](../../images/a11y/contrast.svg?raw=true)
+
+## Use of color
+
+Avoid relying solely on color to convey meaning in icons, as some users may have color blindness.
+Instead, use additional visual cues like shape, shading or text.
+
+![For example: Don’t mark state with color, mark it with distinct visuals.](../../images/a11y/use-of-color.svg?raw=true)
+
+## Interactivity
+
+Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when
+activated.
+
+![](../../images/a11y/interactivity.svg?raw=true)
+
+In most cases this is easily done by wrapping them in icon buttons.
+
+## Minimum target size
+
+Small targets can be difficult to click or touch, if your icon is interactive, we recommend that it
+should have a minimum target size of 44×44 pixels.
+
+![](../../images/a11y/target-size.svg?raw=true)
+
+In practice, this doesn't necessarily mean that the icon itself should be this large, only its
+interactive wrapper element.
+
+## Meaningfulness
+
+Icons should represent concepts or actions in a universally understandable way. Avoid using abstract
+or ambiguous, or culture-specific symbols that might confuse some users.
+
+![For example: Use universally understandable symbols and don't base your choice of icon on puns.](../../images/a11y/meaningfulness.svg?raw=true)
+
+## Consistency
+
+Maintain consistency in icon design and usage across your interface to help users learn and
+understand their meanings more easily.
+
+![For example: Don’t use the same icon for multiple distinct purposes or meanings. Don’t use different icons for the same purpose or function.](../../images/a11y/consistency.svg?raw=true)
+
+## Text Alternatives
+
+You may have to provide text labels or alternative text descriptions for icons, especially for
+screen readers used by people with visual impairments.
+
+However: descriptions should only be provided to standalone icons that aren't purely decorative, as
+providing accessible names to non-functional elements only increases clutter when using screen
+readers.
+
+### On standalone icons
+
+Icons are usually very unlikely to stand on their own with no semantically meaningful wrapper
+element. In most cases they will be part of a badge, button (including icon buttons), navigation
+item or other interactive UI element.
+
+::: warning
+In case some of your icons stand alone, and they serve a non-decorative function, make sure to
+provide the appropriate accessible label for them.
+:::
+
+![In short: provide accessible label for semantic icons, but not for decorative icons.](../../images/a11y/alttext-standalone.svg?raw=true)
+
+In general try to avoid using functional icons with no interactivity, we recommend that:
+
+1) you either add a visible description next to them, or
+2) place them in badges, labels or on buttons, and at least add a tooltip to them.
+
+In any such case, it is preferred that the accessible name be provided for these interactive
+elements (badges, buttons, nav items etc.) only, _not_ the icons themselves.
+
+### On buttons
+
+Do not provide an accessible label to icons when used on a button, as this label will be read out by
+screen readers, leading to nonsensical text.
+
+![](../../images/a11y/alttext-buttons.svg?raw=true)
+
+::: details Code examples
+
+```tsx
+// Don't do this
+<button>
+  <Plus aria-label="Plus icon"/>
+  Add document
+</button>
+
+// Do this, just leave it
+<button>
+  <Plus/>
+  Add document
+</button>
+```
+
+:::
+
+### On icon buttons
+
+Icon buttons are buttons that do not contain any visible text apart from the icon itself (think of
+the close button of a dialog for example).
+
+As previously stated, you should provide your accessible label on the icon button itself, not the
+contained icon.
+
+![](../../images/a11y/alttext-iconbuttons.svg?raw=true)
+
+::: details Code examples
+
+```tsx
+// Don't do this
+<button class="btn-icon">
+  <Home/>
+</button>
+
+// Don't do this either
+<button class="btn-icon">
+  <Home aria-label="Home icon"/>
+</button>
+
+// This works but might not be the best solution, see below
+<button aria-label="Go to home" class="btn-icon">
+  <Home/>
+</button>
+
+// Do this instead
+<button class="btn-icon">
+  <Home/>
+  <span class="visually-hidden">Go to home</span>
+</button>
+```
+
+:::
+
+## A note on `aria-label`
+
+Although you could provide accessible labels to your elements via the `aria-label` attribute, we
+generally recommend avoiding this and instead suggest that you use your chosen CSS framework's "
+visually hidden" utility whenever possible. You can
+[read more about why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/).
+### Example - Radix UI
+
+Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon).
+
+```tsx
+import { ArrowRightIcon } from 'lucide-react';
+import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
+
+<AccessibleIcon label="Next item">
+  <ArrowRightIcon />
+</AccessibleIcon>
+```
+### Example - Bootstrap
+
+```html
+
+<div>
+  <i data-lucide="phone" aria-hidden="true"></i>
+  <span class="visually-hidden">Phone number</span>
+</div>
+```
+
+### Example - Tailwind CSS
+
+```html
+
+<div>
+  <i data-lucide="phone" aria-hidden="true"></i>
+  <span class="sr-only">Phone number</span>
+</div>
+```
+
+If you're not sure, you may consider learning more
+about [how to hide content.](https://www.a11yproject.com/posts/how-to-hide-content/)
+
+## Further resources
+
+We also recommend checking out the following resources about accessibility:
+
+- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
+- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/)
+- [Learn accessibility on web.dev](https://web.dev/learn/accessibility)
+- [Inclusive Components](https://inclusive-components.design/)
+- [A11yTalks](https://www.a11ytalks.com/)
+- [A11y automation tracker](https://a11y-automation.dev/)
+- [The A11Y Project](https://www.a11yproject.com/)

docs/guide/design/affinity-designer-guide.md

@@ -0,0 +1,18 @@
+---
+title: Affinity Designer Template Guide
+---
+
+# Affinity Designer Template Guide
+
+This guide describes how to use the Affinity Designer template for Lucide.
+
+## General Workflow
+
+>Attention: By default, Affinity Designer sets the unit for stroke to points. Make sure that it is set to pixel. To do this, open `Preferences > User Interface`. Under `Decimal Places for Unit Types`, uncheck `Show Lines in points`.
+
+1. Download and open the [Affinity Designer template](https://github.com/lucide-icons/lucide/blob/main/docs/public/templates/affinity_designer.aftemplate).
+2. Follow the [Icon Design Principles](icon-design-guide.md) while you use the template (to ensure integrity with the Lucide icon pack).
+3. Export the file as SVG (`File > Export`). Make sure that _Rastering_ is set to _Nothing_, _Export text as curves_ is checked (hopefully, you won't need this), _Use hex colors_ is checked, and _Flatten transforms_ is checked.
+   
+	 ![SVG export options in Affinity Designer](../../images/affinity-designer-export-options.png?raw=true)
+4. Optimize the exported SVG file further with [SVGOMG](https://jakearchibald.github.io/svgomg/) or [`svgo`](https://github.com/svg/svgo) (using `svgo --multipass exported_icon.svg`).

docs/guide/design/icon-design-guide.md

@@ -109,8 +109,8 @@ Here are rules that should be followed to keep quality and consistency when maki
 7. Icons depicting multiple elements (e.g. a person and a circle) of different sizes must list these elements in decreasing order of size.\
    For example: if the circle is bigger, it should be `circle-person`, if the person is bigger, it should be `person-circle`.
 
-8. Icons depicting multiple elements of roughly equal sizes (e.g. a `ruler` and a `pencil`) must list these elements in English reading order.\
-   For example: if the `pencil` is either above or left of `ruler`, it should be `pencil-ruler`, otherwise, it should be `ruler-pencil`.
+8. Icons depicting multiple elements of roughly equal sizes (e.g. a `ruler` and a `pencil`) must list these elements front to back in case one element is in front of the other, otherwise in English reading order (top to bottom, left to right).\
+   For example: if the `pencil` is either in front of, above or left of `ruler`, it should be `pencil-ruler`, otherwise, it should be `ruler-pencil`.
 
 9. Icons depicting some sort of variation of an element must use the `[element]-[modifier]` naming scheme, with modifiers being applied to each element respectively.\
    For example: a dashed circle must be named `circle-dashed`, not `dashed-circle`, and in coordination with the previous guidelines, a dashed circle containing a broken heart would be named `circle-dashed-heart-broken`, due to the heart being smaller than the circle.

docs/guide/index.md

@@ -20,9 +20,15 @@ As new applications with specific features arise, Lucide aims to provide a compl
 
 In addition to design, code is also important. Assets like icons can significantly increase bandwidth usage in web projects. With the growing internet, Lucide has a responsibility to keep their assets as small as possible. To achieve this, Lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you only ship the icons you used, which helps to keep software distribution size to a minimum.
 
+## Accessibility
+
+Icons are pictures that show what something means without using words. They can be very helpful because they can quickly give information.
+
+However, not everyone can understand them easily. Read more about [how to use Lucide in an accessible way](./advanced/accessibility.md).
+
 ## Official Packages
 
-Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte),[Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs) and [Flutter](https://lucide.dev/guide/packages/lucide-flutter).
+Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte), [Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs) and [Flutter](https://lucide.dev/guide/packages/lucide-flutter).
 
 ## Community
 If you have any questions about Lucide, feel free to reach out to the community. You can find them on [GitHub](https://github.com/lucide-icons/lucide) and [Discord](https://discord.gg/EH6nSts).

docs/guide/packages/lucide-angular.md

@@ -37,6 +37,20 @@ import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular
 export class AppModule { }
 ```
 
+or using standalone version:
+
+```js
+import { LucideAngularModule, FileIcon } from 'lucide-angular';
+
+@NgModule({
+  imports: [
+    LucideAngularModule
+  ]
+})
+export class AppModule {
+  readonly FileIcon = FileIcon;
+}
+```
 ### Step 2: Use the icons in templates
 
 Within your templates you may now use one of the following component tags to insert an icon:
@@ -47,6 +61,13 @@ Within your templates you may now use one of the following component tags to ins
 <i-lucide name="menu" class="my-icon"></i-lucide>
 <span-lucide name="user-check" class="my-icon"></span-lucide>
 ```
+for standalone
+```html
+<lucide-angular [img]="FileIcon" class="my-icon"></lucide-angular>
+<lucide-icon [img]="FileIcon" class="my-icon"></lucide-icon>
+<i-lucide [img]="FileIcon" class="my-icon"></i-lucide>
+<span-lucide [img]="FileIcon" class="my-icon"></span-lucide>
+```
 
 ### Props
 
@@ -115,3 +136,20 @@ import { icons } from 'lucide-angular';
 
 LucideAngularModule.pick(icons)
 ```
+
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+They can be used in the same way as the official icons.
+
+```js
+import { LucideAngularModule } from 'lucide-angular';
+import { burger } from '@lucide/lab';
+
+@NgModule({
+  imports: [
+    LucideAngularModule.pick({ burger })
+  ]
+})
+export class AppModule { }
+```

docs/guide/packages/lucide-preact.md

@@ -67,6 +67,26 @@ const App = () => {
 
 > SVG attributes in Preact aren't transformed, so if you want to change for example the `stroke-linejoin` you need to pass it in kebabcase. Basically how the SVG spec want you to write it. See this topic in the [Preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
 
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+
+They can be used by using the `Icon` component.
+All props like regular lucide icons can be passed to adjust the icon appearance.
+
+### Using the `Icon` component
+
+This creates a single icon based on the iconNode passed and renders a Lucide icon component.
+
+```jsx
+import { Icon } from 'lucide-preact';
+import { burger } from '@lucide/lab';
+
+const App = () => (
+  <Icon iconNode={burger} />
+);
+```
+
 ## One generic icon component
 
 It is possible to create one generic icon component to load icons, but it is not recommended.

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

@@ -61,6 +61,26 @@ const App = () => {
 };
 ```
 
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+
+They can be used by using the `Icon` component.
+All props like regular lucide icons can be passed to adjust the icon appearance.
+
+### Using the `Icon` component
+
+This creates a single icon based on the iconNode passed and renders a Lucide icon component.
+
+```jsx
+import { Icon } from 'lucide-react-native';
+import { burger } from '@lucide/lab';
+
+const App = () => (
+  <Icon iconNode={burger} />
+);
+```
+
 ## One generic icon component
 
 It is possible to create one generic icon component to load icons, but it is not recommended.

docs/guide/packages/lucide-react.md

@@ -61,6 +61,26 @@ const App = () => {
 };
 ```
 
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+
+They can be used by using the `Icon` component.
+All props like regular lucide icons can be passed to adjust the icon appearance.
+
+### Using the `Icon` component
+
+This creates a single icon based on the iconNode passed and renders a Lucide icon component.
+
+```jsx
+import { Icon } from 'lucide-react';
+import { burger } from '@lucide/lab';
+
+const App = () => (
+  <Icon iconNode={burger} />
+);
+```
+
 ## One generic icon component
 
 It is possible to create one generic icon component to load icons, but it is not recommended.

docs/guide/packages/lucide-solid.md

@@ -41,6 +41,19 @@ const App = () => {
 export default App;
 ```
 
+Vite loading/performing issues with the dev server can be resolved by import icons directly from the `lucide-solid/icons` directory:
+
+```jsx
+import Camera from 'lucide-solid/icons/camera';
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48} />;
+};
+
+export default App;
+```
+
 ## Props
 
 | name                  | type      | default      |
@@ -61,6 +74,26 @@ const App = () => {
 };
 ```
 
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+
+They can be used by using the `Icon` component.
+All props like the regular Lucide icons can be passed to adjust the icon appearance.
+
+### Using the `Icon` component
+
+This creates a single icon based on the iconNode passed and renders a Lucide icon component.
+
+```jsx
+import { Icon } from 'lucide-solid';
+import { burger, sausage } from '@lucide/lab';
+
+const App = () => (
+  <Icon iconNode={sausage} color="red"/>
+);
+```
+
 ## One generic icon component
 
 It is possible to create one generic icon component to load icons. It's not recommended.

docs/guide/packages/lucide-static.md

@@ -143,7 +143,7 @@ and update the SVG as follows
 ### Icon Font
 
 ```css
-@import ('~lucide-static/font/Lucide.css');
+@import ('~lucide-static/font/lucide.css');
 ```
 
 ```html

docs/guide/packages/lucide-svelte.md

@@ -166,6 +166,27 @@ The package includes type definitions for all icons. This is useful if you want
 
 For more details about typing the `svelte:component` directive, see the [Svelte documentation](https://svelte.dev/docs/typescript#types-componenttype).
 
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+
+They can be used by using the `Icon` component.
+All props like the regular Lucide icons can be passed to adjust the icon appearance.
+
+### Using the `Icon` component
+
+This creates a single icon based on the iconNode passed and renders a Lucide icon component.
+
+```svelte
+<script>
+import { Icon } from 'lucide-svelte';
+import { burger, sausage } from '@lucide/lab';
+</script>
+
+<Icon iconNode={burger} />
+<Icon iconNode={sausage} color="red"/>
+```
+
 ## One generic icon component
 
 It is possible to create one generic icon component to load icons, but it is not recommended.

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

@@ -37,16 +37,16 @@ Each icon can be imported as a Vue component, which renders an inline SVG Elemen
 You can pass additional props to adjust the icon.
 
 ```vue
+<script setup>
+import { Camera } from 'lucide-vue-next';
+</script>
+
 <template>
   <Camera
     color="red"
     :size="32"
   />
 </template>
-
-<script setup>
-import { Camera } from 'lucide-vue-next';
-</script>
 ```
 
 ## Props
@@ -69,6 +69,28 @@ To customize the appearance of an icon, you can pass custom properties as props
 </template>
 ```
 
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+
+They can be used by using the `Icon` component.
+All props like regular lucide icons can be passed to adjust the icon appearance.
+
+### Using the `Icon` component
+
+This creates a single icon based on the iconNode passed and renders a Lucide icon component.
+
+```vue
+<script setup>
+import { Icon } from 'lucide-vue-next';
+import { burger } from '@lucide/lab';
+</script>
+
+<template>
+  <Icon :iconNode="burger" />
+</template>
+```
+
 ## One generic icon component
 
 It is possible to create one generic icon component to load icons, but it is not recommended.

docs/guide/packages/lucide.md

@@ -130,3 +130,18 @@ menuIcon.classList.add('my-icon-class');
 const myApp = document.getElementById('app');
 myApp.appendChild(menuIcon);
 ```
+
+### With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+They can be used in the same way as the official icons.
+
+```js
+import { burger } from '@lucide/lab';
+
+createIcons({
+  icons: {
+    burger
+  }
+});
+```

docs/icons/[name].md

@@ -10,14 +10,14 @@ sidebar: true
 <script setup>
 import { computed } from 'vue'
 import { useData } from 'vitepress'
-import IconPreview from '../.vitepress/theme/components/icons/IconPreview.vue'
-import IconPreviewSmall from '../.vitepress/theme/components/icons/IconPreviewSmall.vue'
-import IconInfo from '../.vitepress/theme/components/icons/IconInfo.vue'
-import IconContributors from '../.vitepress/theme/components/icons/IconContributors.vue'
-import RelatedIcons from '../.vitepress/theme/components/icons/RelatedIcons.vue'
-import CodeGroup from '../.vitepress/theme/components/base/CodeGroup.vue'
-import Badge from '../.vitepress/theme/components/base/Badge.vue'
-import Label from '../.vitepress/theme/components/base/Label.vue'
+import IconPreview from '~/.vitepress/theme/components/icons/IconPreview.vue'
+import IconPreviewSmall from '~/.vitepress/theme/components/icons/IconPreviewSmall.vue'
+import IconInfo from '~/.vitepress/theme/components/icons/IconInfo.vue'
+import IconContributors from '~/.vitepress/theme/components/icons/IconContributors.vue'
+import RelatedIcons from '~/.vitepress/theme/components/icons/RelatedIcons.vue'
+import CodeGroup from '~/.vitepress/theme/components/base/CodeGroup.vue'
+import Badge from '~/.vitepress/theme/components/base/Badge.vue'
+import Label from '~/.vitepress/theme/components/base/Label.vue'
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
 import { data } from './codeExamples.data'
 import { camelCase, startCase } from 'lodash-es'
@@ -31,8 +31,13 @@ const tabs = computed(() => data.codeExamples?.map(
 
 const codeExample = computed(() => data.codeExamples?.map(
     (codeExample) => {
-      const pascalCase = startCase(camelCase( params.value.name)).replace(/\s/g, '')
-      return codeExample.code.replace(/PascalCase/g, pascalCase).replace(/Name/g, params.value.name)
+      const pascalCaseName = startCase(camelCase( params.value.name)).replace(/\s/g, '')
+      const camelCaseName = camelCase(params.value.name)
+
+      return codeExample.code
+        .replace(/\$(?:<[^>]+>)*PascalCase/g, pascalCaseName)
+        .replace(/\$CamelCase/g, camelCaseName)
+        .replace(/\$Name/g, params.value.name)
     }
   ).join('') ?? []
 )
@@ -69,8 +74,6 @@ function releaseTagLink(version) {
           <Label>Created:</Label>
           <Badge
             :href="releaseTagLink(params.createdRelease.version)"
-            target="_blank"
-            rel="noreferrer noopener"
           >
             v{{params.createdRelease.version}}
           </Badge>
@@ -82,8 +85,6 @@ function releaseTagLink(version) {
           <Label>Last changed:</Label>
           <Badge
             :href="releaseTagLink(params.changedRelease.version)"
-            target="_blank"
-            rel="noreferrer noopener"
           >
             v{{params.changedRelease.version}}
           </Badge>
@@ -104,7 +105,10 @@ function releaseTagLink(version) {
   </div>
 </div>
 
-<RelatedIcons :icons="params.relatedIcons" />
+<RelatedIcons
+  v-if="params.relatedIcons"
+  :icons="params.relatedIcons"
+/>
 
 <style module>
   .preview {

docs/icons/categories.md

@@ -10,13 +10,16 @@ import { data } from './icons.data.ts'
 import { data as categoriesData } from './categories.data.ts'
 import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
 import IconsCategoryOverview from '../.vitepress/theme/components/icons/IconsCategoryOverview.vue'
+import useIconsWithExternalLibs from '~/.vitepress/theme/composables/useIconsWithExternalLibs'
+
+const icons = useIconsWithExternalLibs(data.icons)
 </script>
 
 <div class="VPDoc content">
   <PageContainer>
     <IconsCategoryOverview
       :categories="categoriesData.categories"
-      :icons="data.icons"
+      :icons="icons"
       :iconCategories="categoriesData.iconCategories"
     />
   </PageContainer>

docs/icons/codeExamples.data.ts

@@ -1,11 +1,9 @@
-import createCodeExamples from '../.vitepress/lib/createCodeExamples';
+import createCodeExamples from '../.vitepress/lib/codeExamples/createCodeExamples';
 
 export default {
   async load() {
     const codeExamples = await createCodeExamples();
 
-    // const randomIcons = Array.from({ length: 200 }, () => getRandomItem(icons))
-
     return {
       codeExamples,
     };

docs/icons/index.md

@@ -10,13 +10,17 @@ head:
 ---
 
 <script setup>
+import { computed } from 'vue'
 import { data } from './icons.data.ts'
-import IconsOverview from '../.vitepress/theme/components/icons/IconsOverview.vue'
-import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
+import IconsOverview from '~/.vitepress/theme/components/icons/IconsOverview.vue'
+import PageContainer from '~/.vitepress/theme/components/PageContainer.vue'
+import useIconsWithExternalLibs from '~/.vitepress/theme/composables/useIconsWithExternalLibs'
+
+const icons = useIconsWithExternalLibs(data.icons)
 </script>
 
 <div class="VPDoc content">
   <PageContainer>
-    <IconsOverview :icons="data.icons" />
+    <IconsOverview :icons="icons" />
   </PageContainer>
 </div>

docs/icons/lab/[name].md

@@ -0,0 +1,10 @@
+---
+layout: doc
+footer: false
+aside: false
+editLink: false
+next: false
+prev: false
+sidebar: true
+---
+<!--@include: ../[name].md -->

docs/icons/lab/[name].paths.ts

@@ -0,0 +1,19 @@
+import { IconEntity } from '../../.vitepress/theme/types';
+
+export default {
+  paths: async () => {
+    const iconDetailsResponse = await fetch('https://lab.lucide.dev/api/icon-details');
+    const iconDetails = (await iconDetailsResponse.json()) as Record<string, IconEntity>;
+
+    return Object.values(iconDetails).map((iconEntity) => {
+      const params = {
+        externalLibrary: 'lab',
+        ...iconEntity,
+      };
+
+      return {
+        params,
+      };
+    });
+  },
+};

docs/icons/lab/codeExamples.data.ts

@@ -0,0 +1,11 @@
+import createCodeExamples from '../../.vitepress/lib/codeExamples/createLabCodeExamples';
+
+export default {
+  async load() {
+    const codeExamples = await createCodeExamples();
+
+    return {
+      codeExamples,
+    };
+  },
+};