[pull] main from lucide-icons:main

.github/workflows/ci.yml

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

.github/workflows/linting.yml

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

.github/workflows/lucide-angular.yml

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

.github/workflows/lucide-font.yml

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

.github/workflows/lucide-preact.yml

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

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

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

.github/workflows/lucide-react.yml

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

.github/workflows/lucide-solid.yml

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

.github/workflows/lucide-static.yml

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

.github/workflows/lucide-svelte.yml

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

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

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

.github/workflows/lucide-vue.yml

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

.github/workflows/lucide.yml

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

.github/workflows/release.yml

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

CONTRIBUTING.md

@@ -72,7 +72,7 @@ pnpm install # Install dependencies, including the workspace packages
 
 ### Packages -> PNPM Workspaces
 
-To distribute different packages we use PNPM workspaces. Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/lang/enhttps://lucide.dev/docs/workspaces).
+To distribute different packages we use [PNPM workspaces](https://pnpm.io/workspaces). Before you start make sure you are familiar with this concept. The concept of working in workspaces is created by Yarn, they have a well written introduction: [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces).
 
 The configured directory for workspaces is the [packages](https://github.com/lucide-icons/lucide/tree/main/packages) directory, located in the root directory. There you will find all the current packages from lucide.
 There are more workspaces defined, see [`pnpm-workspace.yaml`](https://github.com/lucide-icons/lucide/blob/main/pnpm-workspace.yaml).

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

@@ -28,7 +28,7 @@ export default eventHandler((event) => {
     .map((_, idx, arr) => arr.slice(0, idx + 1).join('-'))
     .reverse()
     .find((groupName) => groupName in iconNodes);
-  if (backdropName) {
+  if (!(name in iconNodes) && backdropName) {
     const iconNode = iconNodes[backdropName];
 
     const LucideIcon = createLucideIcon(backdropName, iconNode);
@@ -39,18 +39,9 @@ export default eventHandler((event) => {
       createElement(Backdrop, {
         backdropString,
         src,
-        color: name in iconNodes ? 'red' : '#777',
+        color: '#777',
       }),
     );
-    if (name in iconNodes) {
-      children.push(
-        createElement(Backdrop, {
-          backdropString: src,
-          src: backdropString,
-          color: 'lime',
-        }),
-      );
-    }
   }
 
   const svg = Buffer.from(

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

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

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

@@ -3,10 +3,16 @@ import React from 'react';
 interface BackdropProps {
   src: string;
   color?: string;
+  outline?: boolean;
   backdropString: string;
 }
 
-const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.Element => {
+const Backdrop = ({
+  src,
+  color = 'red',
+  outline = true,
+  backdropString,
+}: BackdropProps): JSX.Element => {
   const id = React.useId();
   return (
     <>
@@ -73,13 +79,15 @@ const Backdrop = ({ src, color = 'red', backdropString }: BackdropProps): JSX.El
           opacity={0.75}
           dangerouslySetInnerHTML={{ __html: src }}
         />
-        <g
-          stroke={color}
-          strokeWidth={2.25}
-          opacity={0.75}
-          mask={`url(#svg-preview-backdrop-mask-outline-${id})`}
-          dangerouslySetInnerHTML={{ __html: backdropString }}
-        />
+        {outline && (
+          <g
+            stroke={color}
+            strokeWidth={2.25}
+            opacity={0.75}
+            mask={`url(#svg-preview-backdrop-mask-outline-${id})`}
+            dangerouslySetInnerHTML={{ __html: backdropString }}
+          />
+        )}
       </g>
     </>
   );

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

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