feat(icon-component): Creating icons with iconNodes (#1997)

* Add useIconComponent, lucide-react * Add concept useIconComponent * add useIconComponents to packages * Add icon component * Add icon component * Add tests for react packages * Reset changes in icons * Add types * Add support for Icon components in Lucide Vue Next * update tests * Update tests * Enable Svelte component * Fix lucide-react-native tests * Update Solid package * update snapshots * Add docs * add docs * Update tests * Formatting * Formatting * Update package lock * Remove `useIconComponent` * Update guides * Update exports preact and solid package * Formatting * Format createIcons.ts * Add lucide lab repo link in docs
lucide-icons · Apr 26, 2024 · e50582e · e50582e
1 parent 65deefa
commit e50582e
Show file tree

Hide file tree

Showing 77 changed files with 1,706 additions and 429 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,6 +2,10 @@ pnpm-lock.yaml
 
 # docs examples
 docs/**/examples/
+docs/.vitepress/.temp
+docs/.vitepress/cache
+docs/.vitepress/data
+docs/.nitro
 
 # lucide-angular
 packages/lucide-angular/.angular/cache

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

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

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

diff --git a/docs/guide/packages/lucide-solid.md b/docs/guide/packages/lucide-solid.md
@@ -61,6 +61,26 @@ const App = () => {
 };
 ```
 
+## With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+
+They can be used by using the `Icon` component.
+All props like 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.

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

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

diff --git a/docs/guide/packages/lucide.md b/docs/guide/packages/lucide.md
@@ -130,3 +130,18 @@ menuIcon.classList.add('my-icon-class');
 const myApp = document.getElementById('app');
 myApp.appendChild(menuIcon);
 ```
+
+### With Lucide lab or custom icons
+
+[Lucide lab](https://github.com/lucide-icons/lucide-lab) is a collection of icons that are not part of the Lucide main library.
+They can be used in the same way as the official icons.
+
+```js
+import { burger } from '@lucide/lab';
+
+createIcons({
+  icons: {
+    burger
+  }
+});
+```
diff --git a/packages/lucide-preact/src/Icon.ts b/packages/lucide-preact/src/Icon.ts
@@ -0,0 +1,50 @@
+import { h, toChildArray } from 'preact';
+import defaultAttributes from './defaultAttributes';
+import type { IconNode, LucideProps } from './types';
+
+interface IconComponentProps extends LucideProps {
+  iconNode: IconNode;
+}
+
+/**
+ * Lucide icon component
+ *
+ * @component Icon
+ * @param {object} props
+ * @param {string} props.color - The color of the icon
+ * @param {number} props.size - The size of the icon
+ * @param {number} props.strokeWidth - The stroke width of the icon
+ * @param {boolean} props.absoluteStrokeWidth - Whether to use absolute stroke width
+ * @param {string} props.class - The class name of the icon
+ * @param {IconNode} props.children - The children of the icon
+ * @param {IconNode} props.iconNode - The icon node of the icon
+ *
+ * @returns {ForwardRefExoticComponent} LucideIcon
+ */
+const Icon = ({
+  color = 'currentColor',
+  size = 24,
+  strokeWidth = 2,
+  absoluteStrokeWidth,
+  children,
+  iconNode,
+  class: classes = '',
+  ...rest
+}: IconComponentProps) =>
+  h(
+    'svg',
+    {
+      ...defaultAttributes,
+      width: String(size),
+      height: size,
+      stroke: color,
+      ['stroke-width' as 'strokeWidth']: absoluteStrokeWidth
+        ? (Number(strokeWidth) * 24) / Number(size)
+        : strokeWidth,
+      class: ['lucide', classes].join(' '),
+      ...rest,
+    },
+    [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
+  );
+
+export default Icon;
diff --git a/packages/lucide-preact/src/createLucideIcon.ts b/packages/lucide-preact/src/createLucideIcon.ts
@@ -1,17 +1,7 @@
-import { type FunctionComponent, h, type JSX, toChildArray } from 'preact';
-import defaultAttributes from './defaultAttributes';
-import { toKebabCase } from '@lucide/shared';
-
-export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][];
-
-export interface LucideProps extends Partial<Omit<JSX.SVGAttributes, 'ref' | 'size'>> {
-  color?: string;
-  size?: string | number;
-  strokeWidth?: string | number;
-  absoluteStrokeWidth?: boolean;
-}
-
-export type LucideIcon = FunctionComponent<LucideProps>;
+import { h, type JSX } from 'preact';
+import { mergeClasses, toKebabCase } from '@lucide/shared';
+import Icon from './Icon';
+import type { IconNode, LucideIcon, LucideProps } from './types';
 
 /**
  * Create a Lucide icon component
@@ -20,29 +10,18 @@ export type LucideIcon = FunctionComponent<LucideProps>;
  * @returns {FunctionComponent} LucideIcon
  */
 const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
-  const Component = ({
-    color = 'currentColor',
-    size = 24,
-    strokeWidth = 2,
-    absoluteStrokeWidth,
-    children,
-    class: classes = '',
-    ...rest
-  }: LucideProps) =>
+  const Component = ({ class: classes = '', children, ...props }: LucideProps) =>
     h(
-      'svg',
+      Icon,
       {
-        ...defaultAttributes,
-        width: String(size),
-        height: size,
-        stroke: color,
-        ['stroke-width' as 'strokeWidth']: absoluteStrokeWidth
-          ? (Number(strokeWidth) * 24) / Number(size)
-          : strokeWidth,
-        class: ['lucide', `lucide-${toKebabCase(iconName)}`, classes].join(' '),
-        ...rest,
+        ...props,
+        iconNode,
+        class: mergeClasses<string | JSX.SignalLike<string | undefined>>(
+          `lucide-${toKebabCase(iconName)}`,
+          classes,
+        ),
       },
-      [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
+      children,
     );
 
   Component.displayName = `${iconName}`;

diff --git a/packages/lucide-preact/src/lucide-preact.ts b/packages/lucide-preact/src/lucide-preact.ts
@@ -1,4 +1,7 @@
 export * from './icons';
 export * as icons from './icons';
 export * from './aliases';
+export * from './types';
+
 export { default as createLucideIcon } from './createLucideIcon';
+export { default as Icon } from './Icon';
diff --git a/packages/lucide-preact/src/types.ts b/packages/lucide-preact/src/types.ts
@@ -0,0 +1,12 @@
+import { type FunctionComponent, type JSX } from 'preact';
+
+export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][];
+
+export interface LucideProps extends Partial<Omit<JSX.SVGAttributes, 'ref' | 'size'>> {
+  color?: string;
+  size?: string | number;
+  strokeWidth?: string | number;
+  absoluteStrokeWidth?: boolean;
+}
+
+export type LucideIcon = FunctionComponent<LucideProps>;