Update icons/barn.svg

Update icons/barn.json
2026-11-11 13:28:19 +00:00 · 2024-03-21 22:40:25 +01:00 · 2024-03-21 22:39:53 +01:00 · 2024-03-21 22:36:48 +01:00 · 2024-03-21 22:36:33 +01:00 · 2024-03-21 22:33:11 +01:00
893 changed files with 55122 additions and 27084 deletions
@@ -8,8 +8,6 @@ squircle
 strikethrough
 touchpad
 ungroup
-pilcrow
-toc

 # Brands
 codepen
@@ -1,4 +1,4 @@
-const DEFAULT_ATTRS = require('./tools/build-icons/render/default-attrs.json');
+const DEFAULT_ATTRS = require('./scripts/render/default-attrs.json');

 module.exports = {
  root: true,
@@ -15,9 +15,7 @@ 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',
@@ -69,9 +69,6 @@ body:
        - label: Windows
        - label: Linux
        - label: macOS
-        - label: ChromeOS
-        - label: iOS
-        - label: Android
        - label: Other/not relevant
  - type: textarea
    id: description
@@ -30,9 +30,6 @@ body:
        - label: Windows
        - label: Linux
        - label: macOS
-        - label: ChromeOS
-        - label: iOS
-        - label: Android
        - label: Other/not relevant
  - type: textarea
    id: description
@@ -47,7 +47,7 @@
 - [ ] I've made sure that the icons look sharp on low DPI displays.
 - [ ] I've made sure that the icons look consistent with the icon set in size, optical volume and density.
 - [ ] I've made sure that the icons are visually centered.
- [ ] I've correctly optimized all icons to three points of precision.
+- [ ] I've correctly optimized all icons to two points of precision.

 ## Before Submitting <!-- For every PR! -->
 <!-- All of these requirements must be fulfilled. -->
@@ -17,6 +17,8 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -1,35 +0,0 @@
-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 }}
@@ -11,6 +11,8 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -8,11 +8,13 @@ on:
      - pnpm-lock.yaml

 jobs:
-  build:
+  lucide-angular:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -24,18 +26,5 @@ jobs:
      - name: Build
        run: pnpm --filter lucide-angular build

-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3.8.1
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
      - name: Test
        run: pnpm --filter lucide-angular test
@@ -13,6 +13,8 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -14,6 +14,8 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -22,5 +24,8 @@ jobs:
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

+      - name: Build
+        run: pnpm --filter lucide-preact build
+
      - name: Test
        run: pnpm --filter lucide-preact test
@@ -14,6 +14,8 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -22,5 +24,8 @@ jobs:
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

+      - name: Build
+        run: pnpm --filter lucide-react-native build
+
      - name: Test
        run: pnpm --filter lucide-react-native test
@@ -10,11 +10,13 @@ on:
      - pnpm-lock.yaml

 jobs:
-  build:
+  lucide-react:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -26,18 +28,5 @@ jobs:
      - name: Build
        run: pnpm --filter lucide-react build

-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3.8.1
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
      - name: Test
        run: pnpm --filter lucide-react test
@@ -9,11 +9,13 @@ on:
      - pnpm-lock.yaml

 jobs:
-  build:
+  lucide-solid:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -25,18 +27,5 @@ jobs:
      - name: Build
        run: pnpm --filter lucide-solid build

-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3.8.1
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
      - name: Test
        run: pnpm --filter lucide-solid test
@@ -13,6 +13,8 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -9,11 +9,13 @@ on:
      - pnpm-lock.yaml

 jobs:
-  build:
+  lucide-svelte:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -25,18 +27,5 @@ jobs:
      - name: Build
        run: pnpm --filter lucide-svelte build

-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3.8.1
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
      - name: Test
        run: pnpm --filter lucide-svelte test
@@ -9,11 +9,13 @@ on:
      - pnpm-lock.yaml

 jobs:
-  build:
+  lucide-vue-next:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -25,18 +27,5 @@ jobs:
      - name: Build
        run: pnpm --filter lucide-vue-next build

-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3.8.1
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
      - name: Test
        run: pnpm --filter lucide-vue-next test
@@ -9,11 +9,13 @@ on:
      - pnpm-lock.yaml

 jobs:
-  build:
+  lucide-vue:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -25,18 +27,5 @@ jobs:
      - name: Build
        run: pnpm --filter lucide-vue build

-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3.8.1
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
      - name: Test
        run: pnpm --filter lucide-vue test
@@ -9,11 +9,13 @@ on:
      - pnpm-lock.yaml

 jobs:
-  build:
+  lucide:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -25,18 +27,5 @@ jobs:
      - name: Build
        run: pnpm --filter lucide build

-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-      - uses: actions/setup-node@v3.8.1
-        with:
-          node-version: 18
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
      - name: Test
        run: pnpm --filter lucide test
@@ -3,7 +3,7 @@ name: Add Changed Icons comment
 on:
  pull_request_target:
    paths:
-      - 'icons/*'
+      - 'icons/*.svg'
    branches:
      - main
      - fix-icon-preview
@@ -68,16 +68,6 @@ 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:
@@ -104,10 +94,6 @@ jobs:
          comment-author: 'github-actions[bot]'
          body-includes: Added or changed icons

-      - uses: actions/setup-node@v4
-      - name: Install svgson for code preview (safer and faster than installing all deps)
-        run: npm install svgson
-
      - name: Generate comment markup
        run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> comment-markup.md
        id: comment-markup
@@ -56,6 +56,8 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -87,6 +89,8 @@ 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
@@ -117,6 +121,8 @@ jobs:
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
      - uses: actions/setup-node@v4
        with:
          node-version: 18
@@ -34,7 +34,6 @@ 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
@@ -2,10 +2,6 @@ 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
@@ -39,8 +39,6 @@ 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.
@@ -72,7 +70,7 @@ pnpm install # Install dependencies, including the workspace packages

 ### Packages -> PNPM 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).
+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).

 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).
@@ -1,11 +1,4 @@
-<p align="center">
-  <a href="https://github.com/lucide-icons/lucide#gh-light-mode-only">
-    <img src="https://lucide.dev/lucide-logo-repo.svg#gh-light-mode-only" alt="Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons." width="480">
-  </a>
-  <a href="https://github.com/lucide-icons/lucide#gh-dark-mode-only">
-    <img src="https://lucide.dev/lucide-logo-repo-dark.svg#gh-dark-mode-only" alt="Lucide - Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons." width="480">
-  </a>
-</p>
+<p align=center><img width="480" src="https://lucide.dev/lucide-logo-repo.svg" alt="Lucide Logo"></p>
 <p align="center">
  <a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide" alt="license"></a>
  <a href="https://www.npmjs.com/package/lucide"><img src="https://img.shields.io/npm/v/lucide" alt="npm package"></a>
@@ -281,12 +274,9 @@ Thank you to all the people who contributed to Lucide!

 ## Sponsors

+
 <a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
  <img src="docs/public/vercel.svg" alt="Powered by Vercel" width="200" />
 </a>

 <a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="docs/public/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
-
-### Awesome backer 🍺
-
-<a href="https://www.scipress.io?utm_source=lucide"><img src="docs/public/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>
@@ -1,5 +1,5 @@
 {
  "$schema": "../category.schema.json",
  "title": "Home",
-  "icon": "house"
+  "icon": "home"
 }
@@ -1,3 +1,4 @@
+import { eventHandler, setResponseHeader } from 'h3';
 import iconMetaData from '../../data/iconMetaData';

 export default eventHandler((event) => {
@@ -1,40 +0,0 @@
-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;
-});
@@ -13,10 +13,7 @@ export default eventHandler((event) => {
  const data = pathData.at(-1).slice(0, -4);
  const [name] = pathData;

-  const src = Buffer.from(data, 'base64')
-    .toString('utf8')
-    .replaceAll('\n', '')
-    .replace(/<svg[^>]*>|<\/svg>/g, '');
+  const src = Buffer.from(data, 'base64').toString('utf8');

  const children = [];

@@ -28,18 +25,18 @@ export default eventHandler((event) => {
    .map((_, idx, arr) => arr.slice(0, idx + 1).join('-'))
    .reverse()
    .find((groupName) => groupName in iconNodes);
-  if (!(name in iconNodes) && backdropName) {
+  if (backdropName) {
    const iconNode = iconNodes[backdropName];

    const LucideIcon = createLucideIcon(backdropName, iconNode);
    const svg = renderToStaticMarkup(createElement(LucideIcon));
-    const backdropString = svg.replaceAll('\n', '').replace(/<svg[^>]*>|<\/svg>/g, '');
+    const backdropString = svg.replace(/<svg[^>]*>|<\/svg>/g, '');

    children.push(
      createElement(Backdrop, {
        backdropString,
        src,
-        color: '#777',
+        color: name in iconNodes ? 'red' : '#777',
      }),
    );
  }
@@ -1,37 +0,0 @@
-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;
-});
@@ -1,3 +1,4 @@
+import { eventHandler, setResponseHeader } from 'h3';
 import iconMetaData from '../../data/iconMetaData';

 export default eventHandler((event) => {
@@ -28,10 +28,6 @@ export default defineConfig({
            new URL('./theme/components/overrides/VPFooter.vue', import.meta.url),
          ),
        },
-        {
-          find: '~/.vitepress',
-          replacement: fileURLToPath(new URL('./', import.meta.url)),
-        },
      ],
    },
  },
@@ -1,186 +0,0 @@
-[
-  {
-    "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"
-  }
-]
@@ -158,5 +158,16 @@
        "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"
+      }
+    ]
  }
 }
@@ -1,48 +0,0 @@
-[
-  {
-    "name": "Eric Fennis",
-    "title": "Creator of Lucide & Software engineer @nedap",
-    "image": "https://github.com/ericfennis.png?size=192",
-    "sponsor": "https://github.com/sponsors/ericfennis",
-    "socialLinks": [
-      {
-        "icon": "github",
-        "link": "https://github.com/ericfennis"
-      },
-      {
-        "icon": "x",
-        "link": "https://github.com/ericfennis"
-      }
-    ]
-  },
-  {
-    "name": "Karsa Rigó",
-    "title": "Maintainer of Lucide & Software engineer @sztaki",
-    "image": "https://github.com/karsa-mistmere.png?size=192",
-    "socialLinks": [
-      {
-        "icon": "github",
-        "link": "https://github.com/karsa-mistmere"
-      },
-      {
-        "icon": "linkedin",
-        "link": "https://www.linkedin.com/in/karsamistmere"
-      }
-    ]
-  },
-  {
-    "name": "Jakob Guddas",
-    "title": "Maintainer of Lucide & Software engineer @LEGO",
-    "image": "https://github.com/jguddas.png?size=192",
-    "socialLinks": [
-      {
-        "icon": "github",
-        "link": "https://github.com/jguddas"
-      },
-      {
-        "icon": "linkedin",
-        "link": "https://www.linkedin.com/in/jguddas"
-      }
-    ]
-  }
-]
@@ -3,22 +3,15 @@ import React from 'react';
 interface BackdropProps {
  src: string;
  color?: string;
-  outline?: boolean;
  backdropString: string;
 }

-const Backdrop = ({
-  src,
-  color = 'red',
-  outline = true,
-  backdropString,
-}: BackdropProps): JSX.Element => {
-  const id = React.useId();
+const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.Element => {
  return (
    <>
      <defs xmlns="http://www.w3.org/2000/svg">
        <pattern
-          id={`pattern-${id}`}
+          id="pattern"
          width=".1"
          height=".1"
          patternUnits="userSpaceOnUse"
@@ -37,58 +30,69 @@ const Backdrop = ({
        </pattern>
      </defs>
      <mask
-        id={`svg-preview-backdrop-mask-${id}`}
+        id="svg-preview-backdrop-mask-outline"
        maskUnits="userSpaceOnUse"
      >
        <g
          stroke="#fff"
          dangerouslySetInnerHTML={{ __html: backdropString }}
        />
-        <g dangerouslySetInnerHTML={{ __html: src }} />
+        <g
+          dangerouslySetInnerHTML={{ __html: src }}
+          strokeWidth={2.05}
+        />
      </mask>
      <mask
-        id={`svg-preview-backdrop-mask-outline-${id}`}
+        id="svg-preview-backdrop-mask-fill"
        maskUnits="userSpaceOnUse"
      >
-        <rect
-          x="0"
-          y="0"
-          width="24"
-          height="24"
-          fill="#fff"
-          stroke="none"
+        <g
+          stroke="#fff"
+          dangerouslySetInnerHTML={{ __html: backdropString }}
+        />
+        <g
+          dangerouslySetInnerHTML={{ __html: src }}
+          strokeWidth={2.05}
        />
        <g
          strokeWidth={1.75}
          dangerouslySetInnerHTML={{ __html: backdropString }}
        />
      </mask>
-      <g mask={`url(#svg-preview-backdrop-mask-${id})`}>
+      <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={`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)'}
+      />
    </>
  );
 };
@@ -1,71 +0,0 @@
-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;
@@ -2,23 +2,7 @@ import React from 'react';
 import { PathProps, Path } from './types';
 import { getPaths, assert } from './utils';

-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 = ({
+const Grid = ({
  radius,
  fill = '#fff',
  ...props
@@ -317,6 +301,7 @@ const Handles = ({
  'strokeWidth' | 'stroke' | 'strokeDasharray' | 'strokeOpacity',
  any
 >) => {
+  console.log(paths);
  return (
    <g
      className="svg-preview-handles-group"
@@ -355,6 +340,19 @@ 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}
@@ -1,161 +0,0 @@
-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);
-}
@@ -1,32 +0,0 @@
-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;
@@ -1,5 +0,0 @@
-export type CodeExampleType = {
-  title: string;
-  language: string;
-  code: string;
-}[];
@@ -10,24 +10,18 @@ type CodeExampleType = {
 const getIconCodes = (): CodeExampleType => {
  return [
    {
-      language: 'js',
-      title: 'Vanilla',
-      code: `\
-import { createIcons, icons } from 'lucide';
-
-createIcons({ icons });
-
-document.body.append('<i data-lucide="$Name"></i>');\
-  `,
+      language: 'html',
+      title: 'HTML',
+      code: `<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 />
  );
 };

@@ -38,11 +32,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>
 `,
    },
@@ -50,20 +44,20 @@ import { $PascalCase } from 'lucide-vue-next';
      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 />
  );
 };

@@ -73,11 +67,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 />
  );
 };

@@ -88,16 +82,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>
 `,
    },
    {
@@ -107,7 +101,7 @@ import { LucideAngularModule, $PascalCase } from 'lucide-angular';
@import ('~lucide-static/font/Lucide.css');
 </style>

-<div class="icon-$Name"></div>
+<div class="icon-Name"></div>
 `,
    },
  ];
@@ -1,5 +1,6 @@
 import { promises as fs, constants } from 'fs';
 import path from 'path';
+import yaml from 'js-yaml';
 import { PackageItem } from '../theme/types';

 const fileExist = (filePath) =>
@@ -26,6 +27,11 @@ 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;
    }),
  );
@@ -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,10 +117,6 @@ 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',
-        },
      ],
    },
  ],
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+
 import { useRouter } from 'vitepress';

 const { go } = useRouter()
@@ -7,16 +8,7 @@ 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>
@@ -24,9 +16,7 @@ const onClick = computed(() => {
    :is="component"
    :href="href"
    class="badge"
-    :target="target"
-    :rel="rel"
-    @click="onClick"
+    @click="props?.href ? go(href) : undefined"
  >
    <slot/>
  </component>
@@ -1,11 +1,11 @@
 <template>
-  <div class="card-grid-flex">
+  <div class="grid">
    <slot />
  </div>
 </template>

-<style>
-.card-grid-flex {
+<style scoped>
+.grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
@@ -15,20 +15,20 @@
  margin: -8px;
 }

-.card-grid-flex > * {
+.grid > * {
  flex-basis: 100%;
  box-sizing: border-box;
  padding: 8px;
 }

@media (min-width: 960px) {
-  .card-grid-flex > * {
+  .grid > * {
    flex-basis: 50%;
  }
 }

@media (min-width: 1280px) {
-  .card-grid-flex > * {
+  .grid > * {
    flex-basis: 33.33%;
  }
 }
@@ -1,90 +0,0 @@
-<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>
@@ -24,10 +24,40 @@ const headingElement = computed(() => `h${props.headingLevel}`)
  font-size: 32px;
  font-weight: bold;
  text-align: center;
-  margin-bottom: 36px;
+  margin-bottom: 32px;
 }

 section {
  margin-bottom: 96px;
 }
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: center;
+  align-content: space-evenly;
+  box-sizing: border-box;
+  margin: -8px;
+}
+
+.grid > * {
+  flex-basis: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+@media (min-width: 960px) {
+  .grid > * {
+    flex-basis: 50%;
+  }
+}
+
+@media (min-width: 1280px) {
+  .grid > * {
+    flex-basis: 33.33%;
+  }
+}
+
+
 </style>
@@ -8,6 +8,8 @@ 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>
@@ -28,6 +28,8 @@ function insert() {
  const replaceIndex = random(0, 48)
  const newIcon = getRandomNewIcon()

+  // items.value.splice(replaceIndex, 0, newIcon);
+
  items.value[replaceIndex] = newIcon
 }

@@ -74,6 +76,7 @@ onBeforeUnmount(() => {

 <style scoped>
 .card-wrapper {
+  /* padding: 0 24px; */
  margin-left: auto;
  margin-bottom: auto;
  margin-top: 48px;
@@ -84,10 +87,13 @@ onBeforeUnmount(() => {
  border-radius: 8px;
  width: 100%;
  height:100%;
+  /* box-shadow: var(--vp-shadow-2); */
  max-height: 220px;
  max-width: 560px;
  margin: 0 auto;
  position: relative;
+  /* max-height: 240px; */
+  /* margin-top: 96px; */
 }

 .card-grid {
@@ -101,6 +107,7 @@ onBeforeUnmount(() => {
  max-width: 512px;
  overflow: hidden;
  position: relative;
+  /* white-space: nowrap; */
 }

 .list-enter-active {
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import HomeContainer from './HomeContainer.vue'
-import HomeSectionTitle from './HomeSectionTitle.vue'
 import { useRouter } from 'vitepress';
 import { data } from './HomePackagesSection.data'
 import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
@@ -10,7 +9,7 @@ const { go } = useRouter()

 <template>
  <HomeContainer>
-    <HomeSectionTitle>Available For:</HomeSectionTitle>
+    <h2 class="section-title">Available For:</h2>
    <div class="packages-list">
      <a
        v-for="{ name, logo } in data.packages"
@@ -35,6 +34,14 @@ const { go } = useRouter()
 </template>

 <style scoped>
+.section-title {
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+  line-height: 32px;
+  font-size: 16px;
+  text-align: center;
+  margin-bottom: 16px;
+}
 .packages-list {
  display: flex;
  flex-wrap: wrap;
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{
-  headingLevel: 1 | 2 | 3 | 4 | 5 | 6,
-}>()
-
-const headingElement = computed(() => `h${props.headingLevel ?? 2}`)
-</script>
-
-<template>
-  <component :is="headingElement" class="section-title">
-    <slot />
-  </component>
-</template>
-
-<style scoped>
-.section-title {
-  color: var(--vp-c-text-2);
-  font-weight: 500;
-  line-height: 32px;
-  font-size: 16px;
-  text-align: center;
-  margin-bottom: 16px;
-}
-</style>
@@ -1,59 +0,0 @@
-<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';
-</script>
-
-<template>
-  <HomeSectionTitle :headingLevel="3"> Sponsor the Lucide maintainers </HomeSectionTitle>
-  <Card class="sponsor-card">
-    <img
-      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"
-    />
-    <VPButton
-      href="https://opencollective.com/lucide-icons"
-      class="sponsor-button"
-      text="Become a sponsor"
-    />
-  </Card>
-</template>
-
-<style scoped>
-.sponsor-card {
-  margin: 0 auto;
-  max-width: 500px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-}
-
-.sponsor-button {
-  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;
-    justify-content: space-between;
-  }
-}
-</style>
@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { useData } from 'vitepress';
-import HomeContainer from './HomeContainer.vue'
-import GridSection from '../base/GridSection.vue'
-import TeamMemberCard, { TeamMember } from './TeamMemberCard.vue'
-import teamData from '../../../data/teamData.json'
-import HomeSponsorCard from './HomeSponsorCard.vue';
-import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
-
-
-const { theme } = useData()
-</script>
-
-<template>
-   <HomeContainer>
-    <GridSection
-      title="Meet the team"
-      :headingLevel="2"
-      class="team-members"
-    >
-      <TeamMemberCard
-        v-for="teamMember in (teamData as TeamMember[])"
-        v-bind="teamMember"
-      />
-    </GridSection>
-    <HomeSponsorCard />
-    <VPDocAsideCarbonAds
-      :carbon-ads="theme.carbonAds"
-      class="ad-card"
-    />
-  </HomeContainer>
-</template>
-
-
-<style scoped>
-.team-members {
-  gap: 24px;
-  margin-top: 48px;
-  margin-bottom: 48px;
-}
-
-@media (min-width: 640px) {
-  .team-members :deep(.card-grid > *) {
-    flex-basis: 50%;
-  }
-}
-
-@media (min-width: 768px) {
-  .team-members :deep(.card-grid > *) {
-    flex-basis: 33.33%;
-  }
-}
-
-.ad-card {
-  margin: 32px auto 0;
-  width: 100%;;
-  max-width: 500px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  display: none;
-}
-
-@media (min-width: 960px) {
-  .ad-card {
-    display: block;
-  }
-}
-
-.ad-card :deep(.VPCarbonAds) {
-  width: 100%;
-  text-align: left;
-  min-height: auto;
-}
-
-.ad-card :deep(.VPCarbonAds .carbon-wrap) {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 24px;
-}
-
-.ad-card :deep(.VPCarbonAds .carbon-text) {
-  padding-top: 0;
-}
-
-.ad-card :deep(.VPCarbonAds .carbon-poweredby) {
-  text-align: right;
-  margin-top: -24px;
-}
-</style>
@@ -1,92 +0,0 @@
-<script lang="ts">
-export interface TeamMember {
-  name: string
-  title: string
-  image: string
-  sponsor?: string
-  socialLinks: DefaultTheme.SocialLink[]
-}
-</script>
-
-<script setup lang="ts">
-import { DefaultTheme } from 'vitepress';
-import Card from '../base/Card.vue'
-import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'
-import VPSocialLinks from 'vitepress/dist/client/theme-default/components/VPSocialLinks.vue'
-
-defineProps<TeamMember>()
-</script>
-
-<template>
-  <div>
-    <Card class="member-card">
-      <img :src="image" :alt="name" class="member-image"/>
-      <h3 class="member-name">
-        {{name}}
-      </h3>
-      <p class="member-title">
-        {{title}}
-      </p>
-      <div class="member-links">
-        <VPButton
-          v-if="sponsor"
-          :href="sponsor"
-          text="Sponsor"
-          theme="sponsor"
-          class="sponsor-button"
-          size="medium"
-        />
-        <VPSocialLinks
-          :links="socialLinks"
-        />
-      </div>
-
-    </Card>
-  </div>
-</template>
-
-<style scoped>
-.member-card {
-  flex-basis: 100%;
-  height:100%;
-}
-
-.member-image {
-  width: 64px;
-  height: 64px;
-  border-radius: 32px;
-  margin: 0 auto;
-  background-color: var(--vp-c-bg);
-}
-
-.member-name {
-  text-align: center;
-  margin-top: 16px;
-  font-size: 21px;
-  font-weight: 500;
-  color: var(--textColor);
-}
-
-.member-title {
-  flex-grow: 1;
-  padding-top: 8px;
-  line-height: 24px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  text-align: center;
-  text-wrap: balance;
-  margin-bottom: 16px;;
-}
-
-.sponsor-button {
-  width: auto;
-}
-
-.member-links {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-}
-</style>
@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { useData } from 'vitepress';
-import { useSessionStorage } from '@vueuse/core';
-import IconButton from '../base/IconButton.vue';
-import VPDocAsideCarbonAds from 'vitepress/dist/client/theme-default/components/VPDocAsideCarbonAds.vue'
-import { x } from '../../../data/iconNodes'
-import createLucideIcon from 'lucide-vue-next/src/createLucideIcon';
-
-const { theme } = useData()
-const showAd = useSessionStorage('show-carbon-ads',true)
-
-defineProps<{
-  drawerOpen: boolean
-}>()
-
-const CloseIcon = createLucideIcon('Close', x)
-</script>
-
-<template>
-  <div
-    :class="{
-      'drawer-open': drawerOpen,
-      'hide-ad': !showAd
-    }"
-    class="floating-ad"
-    v-if="theme.carbonAds"
-  >
-    <IconButton @click="showAd = false" class="hide-button">
-      <component :is="CloseIcon" :size="20" absoluteStrokeWidth />
-    </IconButton>
-    <VPDocAsideCarbonAds
-      :carbon-ads="theme.carbonAds"
-    />
-  </div>
-</template>
-
-<style scoped>
-.floating-ad {
-  display: none;
-  position: fixed;
-  bottom: 32px;
-  width: 224px;
-  right: 32px;
-  transition: opacity 0.5s, transform 0.25s ease;
-}
-
-.floating-ad.drawer-open {
-  transform: translateY(-288px);
-}
-
-.floating-ad.hide-ad {
-  transform: translateX(224px);
-  opacity: 0;
-}
-
-.floating-ad.drawer-open.hide-ad {
-  transform: translateY(-288px) translateX(224px);
-}
-
-.floating-ad.drawer-open, .floating-ad.hide-ad {
-  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
-}
-
-@media (min-width: 1280px) {
-  .floating-ad {
-    display: block;
-  }
-}
-
-@media (min-width: 1440px) {
-  .floating-ad {
-    right: calc(((100% - (var(--vp-layout-max-width) - var(--vp-sidebar-width))) - 272px) / 2);
-  }
-}
-
-.hide-button {
-  padding: 4px;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  background-color: transparent;
-}
-</style>
@@ -6,7 +6,6 @@ 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()
@@ -47,13 +46,10 @@ watch(headers, () => {

 <template>
  <div class="category-list" ref="container">
-    <SidebarTitle>
-      View
-    </SidebarTitle>
-    <VPLink class="sidebar-link sidebar-text" href="/icons/" :class="{ 'active': overviewIsActive } ">
+    <VPLink class="sidebar-title" href="/icons/" :class="{ 'active': overviewIsActive } ">
      All
    </VPLink>
-    <VPLink class="sidebar-link sidebar-text" href="/icons/categories" :class="{ 'active': categoriesIsActive } ">
+    <VPLink class="sidebar-title" href="/icons/categories" :class="{ 'active': categoriesIsActive } ">
      Categories
    </VPLink>
    <div class="content">
@@ -66,20 +62,17 @@ watch(headers, () => {
 </template>

 <style scoped>
-.sidebar-text {
+.sidebar-title {
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  margin-bottom: 6px;
  line-height: 24px;
  font-size: 14px;
  display: block;
  transition: color 0.25s;
-  padding: 4px 0;
 }

-.sidebar-link {
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-}
-
-.sidebar-link:hover, .sidebar-link.active {
+.sidebar-title:hover, .sidebar-title.active {
  color: var(--vp-c-brand);
 }
 .content {
@@ -39,12 +39,6 @@ function copyJSX() {
  navigator.clipboard.writeText(code)
 }

-function copyComponentName() {
-  const code = componentName.value
-
-  navigator.clipboard.writeText(code)
-}
-
 function copyVue() {
  let attrs = ['']

@@ -107,7 +101,6 @@ 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 },
@@ -11,31 +11,14 @@ 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
+  iconName: string
 }>()

-const { externalIconNodes } = useExternalLibs()
-
-const { go } = useRouter()
-
 const icon = computedAsync<IconEntity | null>(async () => {
  if (props.iconName) {
-    try {
-      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) {
-      if (!props.iconName.includes(':')) {
-        go(`/icons/${props.iconName}`)
-      }
-    }
+    return (await import(`../../../data/iconDetails/${props.iconName}.ts`)).default as IconEntity
  }
  return null
 }, null)
@@ -53,6 +36,8 @@ function onClose() {
  emit('close')
 }

+const { go } = useRouter()
+
 const CloseIcon = createLucideIcon('Close', x)
 const Expand = createLucideIcon('Expand', expand)
 </script>
@@ -66,8 +51,10 @@ 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(icon.externalLibrary ? `/icons/${icon.externalLibrary}/${icon.name}` : `/icons/${icon.name}`)">
+          <IconButton  @click="go(`/icons/${icon.name}`)">
            <component :is="Expand" />
          </IconButton>
          <IconButton  @click="onClose">
@@ -157,11 +144,11 @@ const Expand = createLucideIcon('Expand', expand)
 }

 .drawer-enter-active {
-  transition: opacity 0.5s, transform 0.25s ease;
+  transition: all 0.2s cubic-bezier(.21,.8,.46,.9);
 }

 .drawer-leave-active {
-  transition: opacity 0.25s ease, transform 1.6s ease-out;
+  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
 }

 .drawer-enter-from,
@@ -25,10 +25,8 @@ function setActiveIcon(name: string) {
      :key="icon.name"
    >
      <IconItem
-        :iconNode="icon.iconNode"
-        :name="icon.name"
-        :externalLibrary="icon.externalLibrary"
-        @setActiveIcon="setActiveIcon"
+        v-bind="icon"
+        @setActiveIcon="setActiveIcon(icon.name)"
        :active="activeIcon === icon.name"
        customizable
        :overlayMode="overlayMode"
@@ -7,8 +7,6 @@ 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
@@ -22,21 +20,13 @@ 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">
-    <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>
+    <IconDetailName class="icon-name">
+      {{ icon.name }}
+    </IconDetailName>
    <div class="tags-scroller" v-if="tags.length">
      <p class="icon-tags horizontal-scroller">
        {{ tags }}
@@ -54,10 +44,10 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)

    <div class="group buttons">
      <VPButton
-        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}`"
+        v-if="!page?.relativePath?.startsWith?.(`icons/${icon.name}`)"
+        :href="`/icons/${icon.name}`"
        text="See in action"
-        @click="go(icon.externalLibrary ? `/icons/${icon.externalLibrary}/${icon.name}`: `/icons/${icon.name}`)"
+        @click="go(`/icons/${icon.name}`)"
      />
      <CopySVGButton :name="icon.name" :popoverPosition="popoverPosition"/>
      <CopyCodeButton :name="icon.name" :popoverPosition="popoverPosition"/>
@@ -77,27 +67,9 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
  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);
@@ -6,7 +6,6 @@ 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!'
@@ -17,7 +16,6 @@ const props = defineProps<{
  name: string;
  iconNode: IconNode;
  active: boolean;
-  externalLibrary?: string;
  customizable?: boolean;
  overlayMode?: boolean
  hideIcon?: boolean
@@ -35,9 +33,8 @@ const icon = computed(() => {
  return createLucideIcon(props.name, props.iconNode)
 })

-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, {
@@ -53,16 +50,14 @@ async function navigateToIcon(event) {

  if(props.overlayMode && showOverlay.value) {
    event.preventDefault()
-
-    window.history.pushState({}, '', props.externalLibrary ? `/icons/${props.externalLibrary}/${props.name}` : `/icons/${props.name}`)
-    emit('setActiveIcon', props.externalLibrary ? `${props.externalLibrary}:${props.name}`: props.name)
-  } else {
+    window.history.pushState({}, '', `/icons/${props.name}`)
+    emit('setActiveIcon', props.name)
+  }
+  else {
    event.preventDefault()
-    go(props.externalLibrary ? `/icons/${props.externalLibrary}/${props.name}` : `/icons/${props.name}`)
+    go(`/icons/${props.name}`)
  }
 }
-
-const DiamondIcon = createLucideIcon('Diamond', diamond)
 </script>

 <template>
@@ -72,7 +67,7 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
      @click="navigateToIcon"
      :class="{ active, animate }"
      :aria-label="name"
-
+      :href="`/icons/${props.name}`"
      :data-confetti-text="confettiText"
      ref="ref"
    >
@@ -86,13 +81,6 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
          }"
        />
      </KeepAlive>
-      <div
-        v-if="externalLibrary"
-        class="floating-diamond"
-        aria-hidden="true"
-      >
-        <DiamondIcon fill="currentColor" :size="8"/>
-      </div>
    </a>
  </Tooltip>
 </template>
@@ -101,7 +89,6 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)

 <style scoped>
 .icon-button {
-  position: relative;
  display: inline-block;
  border: 1px solid transparent;
  text-align: center;
@@ -118,13 +105,6 @@ const DiamondIcon = createLucideIcon('Diamond', diamond)
  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;
@@ -19,7 +19,7 @@ export type CategoryRow = CategoryNameRow | CategoryIconsRow;
 import IconGrid from './IconGrid.vue'

 defineProps<{
-  activeIconName: string | null
+  activeIconName: string
  categoryRow: CategoryRow
 }>()

@@ -1,5 +1,5 @@
 <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';
@@ -12,7 +12,6 @@ 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';

 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
@@ -69,7 +68,7 @@ const categories = computed(() => {
  return props.categories
    .map(({ name, title }) => {
      const categoryIcons = props.icons.filter((icon) => {
-        const iconCategories = icon?.externalLibrary ? icon.categories : props.iconCategories[icon.name]
+        const iconCategories = props.iconCategories[icon.name];

        return iconCategories?.includes(name);
      });
@@ -134,18 +133,6 @@ function onFocusSearchInput() {

 const NoResults = defineAsyncComponent(() => import('./NoResults.vue'));
 const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay.vue'));
-
-function handleCloseDrawer() {
-  setActiveIconName('');
-
-  window.history.pushState({}, '', '/icons/categories');
-}
-
-watchEffect(() => {
-
-  console.log(props.icons.find((icon) => icon.name === 'burger'));
-
-});
 </script>

 <template>
@@ -177,10 +164,8 @@ watchEffect(() => {
  <IconDetailOverlay
    v-if="activeIconName != null"
    :iconName="activeIconName"
-    @close="handleCloseDrawer"
+    @close="setActiveIconName('')"
  />
-
-  <CarbonAdOverlay :drawerOpen="!!activeIconName" />
 </template>

 <style scoped>
@@ -10,7 +10,6 @@ import StickyBar from './StickyBar.vue';
 import useFetchTags from '../../composables/useFetchTags';
 import useFetchCategories from '../../composables/useFetchCategories';
 import chunkArray from '../../utils/chunkArray';
-import CarbonAdOverlay from './CarbonAdOverlay.vue';

 const ICON_SIZE = 56;
 const ICON_GRID_GAP = 8;
@@ -94,12 +93,6 @@ const IconDetailOverlay = defineAsyncComponent(() => import('./IconDetailOverlay
 watch(searchQueryDebounced, () => {
  scrollTo(0)
 })
-
-function handleCloseDrawer() {
-  setActiveIconName('');
-
-  window.history.pushState({}, '', '/icons/');
-}
 </script>

 <template>
@@ -131,11 +124,10 @@ function handleCloseDrawer() {
  </div>

  <IconDetailOverlay
+    v-if="activeIconName != null"
    :iconName="activeIconName"
-    @close="handleCloseDrawer"
+    @close="setActiveIconName('')"
  />
-
-  <CarbonAdOverlay :drawerOpen="!!activeIconName" />
 </template>

 <style>
@@ -1,47 +0,0 @@
-<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>
@@ -1,19 +0,0 @@
-<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>
@@ -23,8 +23,8 @@ const links = computed(() => [
    href: `${githubLink.value}/releases`
  },
  {
-    text: 'GitHub',
-    href: `${githubLink.value}`
+    text: 'Github',
+    href: `${githubLink.value}/issues`
  },
  {
    text: 'Issues',
@@ -5,10 +5,9 @@ import fetchPackages from '../../../lib/fetchPackages';
 export default {
  async load() {
    const packages = await fetchPackages();
-
    return {
      packages: packages
-        .filter((p) => p?.name != null && p.name in packageData)
+        .filter((p) => p.name in packageData)
        .map((pData) => ({
          ...pData,
          ...packageData[pData.name],
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { data } from './PackageList.data'
+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
@@ -39,4 +38,33 @@ import PackageListItem from "./PackageListItem.vue";
 .package-group {
  margin-bottom: 96px;
 }
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: center;
+  align-content: space-evenly;
+  box-sizing: border-box;
+  margin: -8px;
+}
+
+.grid > * {
+  flex-basis: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+@media (min-width: 960px) {
+  .grid > * {
+    flex-basis: 50%;
+  }
+}
+
+@media (min-width: 1280px) {
+  .grid > * {
+    flex-basis: 33.33%;
+  }
+}
+
 </style>
@@ -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>
@@ -40,4 +40,33 @@ import ShowcaseListItem from "./ShowcaseListItem.vue";
 .package-group {
  margin-bottom: 96px;
 }
+
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: center;
+  align-content: space-evenly;
+  box-sizing: border-box;
+  margin: -8px;
+}
+
+.grid > * {
+  flex-basis: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+@media (min-width: 960px) {
+  .grid > * {
+    flex-basis: 50%;
+  }
+}
+
+@media (min-width: 1280px) {
+  .grid > * {
+    flex-basis: 33.33%;
+  }
+}
+
 </style>
@@ -1,57 +0,0 @@
-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;
-}
@@ -1,29 +0,0 @@
-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;
@@ -7,7 +7,6 @@ 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,
@@ -21,7 +20,6 @@ const theme: Partial<Theme> = {
  enhanceApp({ app }) {
    app.provide(ICON_STYLE_CONTEXT, iconStyleContext);
    app.provide(CATEGORY_VIEW_CONTEXT, categoryViewContext);
-    app.provide(EXTERNAL_LIBS_CONTEXT, externalLibContext);
  },
 };

@@ -3,7 +3,6 @@ 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()

@@ -12,7 +11,6 @@ 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>
@@ -1,18 +1,13 @@
 export type IconNode = [elementName: string, attrs: Record<string, string>][];
 export type IconNodeWithKeys = [elementName: string, attrs: Record<string, string>, key: string][];

-export interface IconMetaData {
+export interface IconEntity {
+  name: string;
  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;
 }
@@ -1,7 +1,5 @@
-import { IconNode } from 'lucide-vue-next/src/createLucideIcon';
-import Vue from 'vue';
-
 declare module '*.vue' {
+  import Vue from 'vue';
  export default Vue;
 }

@@ -18,7 +16,3 @@ declare const resvg_wasm: RequestInfo | URL | Response | BufferSource | WebAssem
 declare module 'node:module' {
  function createRequire(filename: string): NodeRequire;
 }
-
-declare module '*.node.json' {
-  export default IconNode;
-}
@@ -1,215 +1,4 @@
---
-title: Accessibility
---
-
 # 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. 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/)
+<!-- 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 -->
@@ -1,18 +0,0 @@
---
-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`).
@@ -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 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`.
+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`.

 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.
@@ -20,15 +20,9 @@ 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).
@@ -37,20 +37,6 @@ 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:
@@ -61,13 +47,6 @@ 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

@@ -136,20 +115,3 @@ 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 { }
-```
@@ -67,26 +67,6 @@ 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.
@@ -61,26 +61,6 @@ 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.
@@ -61,26 +61,6 @@ 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.
@@ -41,19 +41,6 @@ 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      |
@@ -74,26 +61,6 @@ 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.
@@ -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
@@ -166,27 +166,6 @@ 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.
@@ -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,28 +69,6 @@ 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.
@@ -130,18 +130,3 @@ 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
-  }
-});
-```
@@ -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,13 +31,8 @@ const tabs = computed(() => data.codeExamples?.map(

 const codeExample = computed(() => data.codeExamples?.map(
    (codeExample) => {
-      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)
+      const pascalCase = startCase(camelCase( params.value.name)).replace(/\s/g, '')
+      return codeExample.code.replace(/PascalCase/g, pascalCase).replace(/Name/g, params.value.name)
    }
  ).join('') ?? []
 )
@@ -74,6 +69,8 @@ function releaseTagLink(version) {
          <Label>Created:</Label>
          <Badge
            :href="releaseTagLink(params.createdRelease.version)"
+            target="_blank"
+            rel="noreferrer noopener"
          >
            v{{params.createdRelease.version}}
          </Badge>
@@ -85,6 +82,8 @@ function releaseTagLink(version) {
          <Label>Last changed:</Label>
          <Badge
            :href="releaseTagLink(params.changedRelease.version)"
+            target="_blank"
+            rel="noreferrer noopener"
          >
            v{{params.changedRelease.version}}
          </Badge>
@@ -105,10 +104,7 @@ function releaseTagLink(version) {
  </div>
 </div>

-<RelatedIcons
-  v-if="params.relatedIcons"
-  :icons="params.relatedIcons"
-/>
+<RelatedIcons :icons="params.relatedIcons" />

 <style module>
  .preview {
@@ -10,16 +10,14 @@ 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="icons"
+      :icons="data.icons"
      :iconCategories="categoriesData.iconCategories"
    />
  </PageContainer>
@@ -1,9 +1,11 @@
-import createCodeExamples from '../.vitepress/lib/codeExamples/createCodeExamples';
+import createCodeExamples from '../.vitepress/lib/createCodeExamples';

 export default {
  async load() {
    const codeExamples = await createCodeExamples();

+    // const randomIcons = Array.from({ length: 200 }, () => getRandomItem(icons))
+
    return {
      codeExamples,
    };
@@ -10,17 +10,13 @@ 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 useIconsWithExternalLibs from '~/.vitepress/theme/composables/useIconsWithExternalLibs'
-
-const icons = useIconsWithExternalLibs(data.icons)
+import IconsOverview from '../.vitepress/theme/components/icons/IconsOverview.vue'
+import PageContainer from '../.vitepress/theme/components/PageContainer.vue'
 </script>

 <div class="VPDoc content">
  <PageContainer>
-    <IconsOverview :icons="icons" />
+    <IconsOverview :icons="data.icons" />
  </PageContainer>
 </div>
@@ -1,10 +0,0 @@
---
-layout: doc
-footer: false
-aside: false
-editLink: false
-next: false
-prev: false
-sidebar: true
---
-<!--@include: ../[name].md -->
@@ -1,19 +0,0 @@
-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,
-      };
-    });
-  },
-};
@@ -1,11 +0,0 @@
-import createCodeExamples from '../../.vitepress/lib/codeExamples/createLabCodeExamples';
-
-export default {
-  async load() {
-    const codeExamples = await createCodeExamples();
-
-    return {
-      codeExamples,
-    };
-  },
-};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jakob Guddas	13aea2d3ac	Update icons/barn.svg	2024-03-21 22:40:25 +01:00
Jakob Guddas	bd7ad68321	Update icons/barn.svg	2024-03-21 22:39:53 +01:00
Jakob Guddas	b708d7d761	Update icons/barn.json	2024-03-21 22:36:48 +01:00
Jakob Guddas	2cdea04562	Update icons/barn.svg	2024-03-21 22:36:33 +01:00
Jakob Guddas	cde043e2fc	Merge branch 'main' into studio/barn	2024-03-21 22:33:11 +01:00
Jakob Guddas	912c81a8d8	chore: pull barn icon from lab branch	2024-03-21 22:28:22 +01:00