Lucide preact package (#291)

* Add preact package

* Fix types

* update types

* fix types

* remove dependecies

* bump version

* improve test setup for react as well

* Add workflow for preact

* Fix types

* bump version

* Add white space

* remove forward ref

* bump package

* Fix types

* Fix types

* bump version

* Remove proptypings

* Test new version

* Add some extra documentation

packages/lucide-react/tests/__snapshots__/lucide-react.spec.js.snap

@@ -1,95 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
-<svg
-  fill="none"
-  height={48}
-  stroke="red"
-  strokeLinecap="round"
-  strokeLinejoin="round"
-  strokeWidth={4}
-  viewBox="0 0 24 24"
-  width={48}
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect
-    height="18"
-    rx="2"
-    ry="2"
-    width="18"
-    x="3"
-    y="3"
-  />
-  <line
-    x1="3"
-    x2="21"
-    y1="9"
-    y2="9"
-  />
-  <line
-    x1="3"
-    x2="21"
-    y1="15"
-    y2="15"
-  />
-  <line
-    x1="9"
-    x2="9"
-    y1="3"
-    y2="21"
-  />
-  <line
-    x1="15"
-    x2="15"
-    y1="3"
-    y2="21"
-  />
-</svg>
-`;
+exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
 
-exports[`Using lucide icon components should render an component 1`] = `
-<svg
-  fill="none"
-  height={24}
-  stroke="currentColor"
-  strokeLinecap="round"
-  strokeLinejoin="round"
-  strokeWidth={2}
-  viewBox="0 0 24 24"
-  width={24}
-  xmlns="http://www.w3.org/2000/svg"
->
-  <rect
-    height="18"
-    rx="2"
-    ry="2"
-    width="18"
-    x="3"
-    y="3"
-  />
-  <line
-    x1="3"
-    x2="21"
-    y1="9"
-    y2="9"
-  />
-  <line
-    x1="3"
-    x2="21"
-    y1="15"
-    y2="15"
-  />
-  <line
-    x1="9"
-    x2="9"
-    y1="3"
-    y2="21"
-  />
-  <line
-    x1="15"
-    x2="15"
-    y1="3"
-    y2="21"
-  />
-</svg>
-`;
+exports[`Using lucide icon components should render an component 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;

packages/lucide-react/tests/lucide-react.spec.js

@@ -1,27 +1,31 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react'
 import { Grid } from '../src/icons'
 
 describe('Using lucide icon components', () => {
   it('should render an component', () => {
-    const component = renderer.create(
-      <Grid/>,
-    );
+    const { container } = render( <Grid/> );
 
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+    expect( container.innerHTML ).toMatchSnapshot();
   });
 
   it('should adjust the size, stroke color and stroke width', () => {
-    const component = renderer.create(
+    const testId = 'grid-icon';
+    const { container, getByTestId } = render(
       <Grid
+        data-testid={testId}
         size={48}
         stroke="red"
         strokeWidth={4}
       />,
     );
 
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
+    const { attributes } = getByTestId(testId);
+    expect(attributes.stroke.value).toBe('red');
+    expect(attributes.width.value).toBe('48');
+    expect(attributes.height.value).toBe('48');
+    expect(attributes['stroke-width'].value).toBe('4');
+
+    expect( container.innerHTML ).toMatchSnapshot();
   });
 })