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
2025-12-16 21:17:43 +01:00 · 2021-05-23 13:13:18 +02:00
parent 81b85839eb
commit 9e63e97f31
27 changed files with 555 additions and 135 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -175,7 +175,7 @@ jobs:
      - name: Upload package.json
        uses: actions/upload-artifact@v2
        with:
-          name: lucide-vue-package-json
+          name: lucide-vue-next-package-json
          path: packages/lucide-vue-next/package.json

  lucide-angular:
@@ -212,12 +212,50 @@ jobs:
      - name: Upload package.json
        uses: actions/upload-artifact@v2
        with:
+        name: lucide-angular-package-json
          path: packages/lucide-angular/package.json

+  lucide-preact:
+    if: github.repository == 'lucide-icons/lucide'
+    runs-on: ubuntu-latest
+    needs: pre-build
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/cache@v2
+        with:
+          path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        run: yarn --pure-lockfile
+
+      - name: Set Auth Token
+        run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
+
+      - name: Set package.json version lucide
+        run: yarn workspace lucide-preact version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
+
+      - name: Build
+        run: yarn workspace lucide-preact build
+
+      - name: Test
+        run: yarn workspace lucide-preact test
+
+      - name: Publish
+        run: yarn workspace lucide-preact publish
+
+      - name: Upload package.json
+        uses: actions/upload-artifact@v2
+        with:
+          name: lucide-preact-package-json
+          path: packages/lucide-preact/package.json
+
  upload-package-jsons:
    if: github.repository == 'lucide-icons/lucide'
    runs-on: ubuntu-latest
-    needs: [pre-build, lucide, lucide-react, lucide-vue, lucide-vue-next, lucide-angular]
+    needs: [pre-build, lucide, lucide-react, lucide-vue, lucide-vue-next, lucide-angular, lucide-preact]

    steps:
    - uses: actions/checkout@v2
@@ -228,7 +266,8 @@ jobs:
        mv lucide-package-json/package.json packages/lucide/package.json
        mv lucide-react-package-json/package.json packages/lucide-react/package.json
        mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
-        mv lucide-vue-package-json/package.json packages/lucide-vue-next/package.json
+        mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
+        mv lucide-vue-next-package-json/package.json packages/lucide-vue-next/package.json
        mv lucide-angular-json/package.json packages/lucide-angular/package.json

    - name: Commit package.jsons
--- a/README.md
+++ b/README.md
@@ -30,6 +30,7 @@ We're trying to expanding the icon set as much as possible while keeping it nice
  * [Vue 2](#vue-2)
  * [Vue 3](#vue-3)
  * [Angular](#angular)
+  * [Preact](#preact)
  * [Figma](#figma)
 * [Contributing](#contributing)
 * [Community](#community)
@@ -110,6 +111,20 @@ npm install lucide-angular

 For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/packages/lucide-angular#lucide-angular).

+### Preact
+
+Implementation of the lucide icon library for preact applications.
+
+```sh
+yarn add lucide-preact
+
+# or
+
+npm install lucide-preact
+```
+
+For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact#lucide-preact).
+
 ### Figma

 The lucide figma plugin.
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,6 @@
 module.exports = {
  presets: ['@babel/env'],
+  // babelrcRoots: ['.', './packages/*'],
  env: {
    test: {
      presets: ['@babel/env'],
--- a/icons/bell-ring.svg
+++ b/icons/bell-ring.svg
@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
-  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
--- a/icons/clipboard-copy.svg
+++ b/icons/clipboard-copy.svg
@@ -1,7 +1,7 @@
 <svg
+  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
-  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
--- a/icons/settings.svg
+++ b/icons/settings.svg
@@ -1,12 +1,13 @@
 <svg
- width="24"
- height="24" 
- fill="none" 
- xmlns="http://www.w3.org/2000/svg" 
- stroke="currentColor" 
- stroke-width="2" 
- stroke-linecap="round" 
- stroke-linejoin="round"
+  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"
 >
  <path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z" />
  <circle cx="12" cy="12" r="3" />
--- a/icons/vibrate.svg
+++ b/icons/vibrate.svg
@@ -9,7 +9,7 @@
  stroke-linecap="round"
  stroke-linejoin="round"
 >
-  <path d="M2 8L4 10L2 12L4 14L2 16" />
-  <path d="M22 8L20 10L22 12L20 14L22 16" />
+  <path d="M2 8l2 2-2 2 2 2-2 2" />
+  <path d="M22 8l-2 2 2 2-2 2 2 2" />
  <rect x="8" y="5" width="8" height="14" rx="1" />
 </svg>
--- a/packages/lucide-preact/.npmignore
+++ b/packages/lucide-preact/.npmignore
@@ -0,0 +1,9 @@
+stats
+node_modules
+tests
+scripts
+build
+src
+babel.config.js
+jest.config.js
+rollup.config.js
--- a/packages/lucide-preact/LICENSE
+++ b/packages/lucide-preact/LICENSE
@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2020, Lucide Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
--- a/packages/lucide-preact/README.md
+++ b/packages/lucide-preact/README.md
@@ -0,0 +1,77 @@
+# Lucide Preact
+
+Implementation of the lucide icon library for preact applications.
+
+> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
+
+## Installation
+
+```sh
+yarn add lucide-preact
+
+# or
+
+npm install lucide-preact
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as a preact component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` js
+import { Camera } from 'lucide-preact';
+// Returns PreactComponent
+
+// Usage
+const App = () => {
+  return <Camera color="red" size={48}/>
+};
+
+export default App;
+```
+
+### Props
+
+|  name        |   type   |  default
+| ------------ | -------- | --------
+| `size`       | *Number* | 24
+| `color`      | *String* | currentColor
+| `strokeWidth`| *Number* | 2
+
+### Custom props / svg attributes
+
+You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
+
+``` js
+// Usage
+const App = () => {
+  return <Camera fill="red" stroke-linejoin="bevel"/>
+};
+```
+
+> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
+
+### One generic icon component
+
+It is possible to create one generic icon component to load icons.
+
+> :warning: Example below importing all EsModules, caution  using this example, not recommended when you using bundlers, your application build size will grow strongly.
+
+#### Icon Component Example
+
+``` js
+import * as icons from 'lucide-preact';
+
+const Icon = ({name, color, size}) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} />
+};
+
+export default Icon;
+```
--- a/packages/lucide-preact/babel.config.js
+++ b/packages/lucide-preact/babel.config.js
@@ -0,0 +1,6 @@
+const mainConfig = require('../../babel.config');
+
+module.exports = {
+  presets: ['preact'],
+  env: mainConfig.env,
+};
--- a/packages/lucide-preact/jest.config.js
+++ b/packages/lucide-preact/jest.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  verbose: true,
+  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
+  moduleFileExtensions: ['js'],
+  transformIgnorePatterns: [`/node_modules`],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+  },
+};
--- a/packages/lucide-preact/package.json
+++ b/packages/lucide-preact/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "lucide-preact",
+  "description": "Lucide Preact package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "version": "0.15.10-beta.7",
+  "license": "ISC",
+  "homepage": "https://lucide.dev",
+  "bugs": "https://github.com/lucide-icons/lucide/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lucide-icons/lucide.git",
+    "directory": "packages/lucide-preact"
+  },
+  "author": "Eric Fennis",
+  "amdName": "lucide-preact",
+  "main": "dist/cjs/lucide-preact.js",
+  "main:umd": "dist/umd/lucide-preact.js",
+  "module": "dist/esm/lucide-preact.js",
+  "unpkg": "dist/umd/lucide-preact.min.js",
+  "typings": "dist/lucide-preact.d.ts",
+  "scripts": {
+    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-preact/src --templateSrc=../packages/lucide-preact/scripts/exportTemplate --renderUniqueKey",
+    "build:es": "babel src -d dist/esm",
+    "build:types": "yarn --cwd ../../ babel-node packages/lucide-preact/scripts/buildTypes.js",
+    "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-preact/rollup.config.js",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@testing-library/preact": "^2.0.1",
+    "babel-preset-preact": "^2.0.0",
+    "jest": "^26.6.3",
+    "preact": "^10.5.13"
+  },
+  "peerDependencies": {
+    "preact": "^10.5.13"
+  }
+}
--- a/packages/lucide-preact/rollup.config.js
+++ b/packages/lucide-preact/rollup.config.js
@@ -0,0 +1,48 @@
+import plugins from '../../rollup.plugins';
+import pkg from './package.json';
+
+const packageName = 'LucidePreact';
+const outputFileName = 'lucide-preact';
+const rootDir = 'packages/lucide-preact'; // It runs from the root
+const outputDir = `${rootDir}/dist`;
+const inputs = [`${rootDir}/src/lucide-preact.js`];
+const bundles = [
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+    minify: true,
+  },
+  {
+    format: 'umd',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'cjs',
+    inputs,
+    outputDir,
+  },
+];
+
+const configs = bundles
+  .map(({ inputs, outputDir, format, minify }) =>
+    inputs.map(input => ({
+      input,
+      plugins: plugins(pkg, minify),
+      external: ['preact', 'prop-types', 'lucide'],
+      output: {
+        name: packageName,
+        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        format,
+        sourcemap: true,
+        globals: {
+          preact: 'preact',
+          'prop-types': 'PropTypes',
+        },
+      },
+    })),
+  )
+  .flat();
+
+export default configs;
--- a/packages/lucide-preact/scripts/buildTypes.js
+++ b/packages/lucide-preact/scripts/buildTypes.js
@@ -0,0 +1,43 @@
+import path from 'path';
+import {
+  writeFile,
+  readSvgDirectory,
+  resetFile,
+  toPascalCase,
+  appendFile,
+} from '../../../scripts/helpers';
+
+const srcDirectory = path.join(__dirname, '../dist');
+
+// Declare type definitions
+const typeDefinitions = `\
+/// <reference types="preact" />
+import { JSX, RefObject } from 'preact'
+
+interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
+  key?: string | number;
+  ref?: string | ((component: any) => any) | RefObject<any>;
+  color?: string
+  size?: string | number
+}
+
+// Generated icons
+`;
+
+const ICONS_DIR = path.resolve(__dirname, '../../../icons');
+const TYPES_FILE = 'lucide-preact.d.ts';
+
+resetFile(TYPES_FILE, srcDirectory);
+writeFile(typeDefinitions, TYPES_FILE, srcDirectory);
+
+const svgFiles = readSvgDirectory(ICONS_DIR);
+
+svgFiles.forEach(svgFile => {
+  const iconName = path.basename(svgFile, '.svg');
+  const componentName = toPascalCase(iconName);
+
+  const exportTypeString = `export declare const ${componentName}: (props: LucideProps) => JSX.Element;\n`;
+  appendFile(exportTypeString, TYPES_FILE, srcDirectory);
+});
+
+console.log(`Generated ${TYPES_FILE} file with`, svgFiles.length, 'icons');
--- a/packages/lucide-preact/scripts/exportTemplate.js
+++ b/packages/lucide-preact/scripts/exportTemplate.js
@@ -0,0 +1,7 @@
+export default ({ componentName, children }) => `
+import createPreactComponent from '../createPreactComponent';
+
+const ${componentName} = createPreactComponent('${componentName}', ${JSON.stringify(children)});
+
+export default ${componentName};
+`;
--- a/packages/lucide-preact/src/createPreactComponent.js
+++ b/packages/lucide-preact/src/createPreactComponent.js
@@ -0,0 +1,22 @@
+import { h } from 'preact';
+import defaultAttributes from './defaultAttributes';
+
+export default (iconName, iconNode) => {
+  const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }) =>
+    h(
+      'svg',
+      {
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        stroke: color,
+        'stroke-width': strokeWidth,
+        ...rest,
+      },
+      iconNode.map(([tag, attrs]) => h(tag, attrs)),
+    );
+
+  Component.displayName = `${iconName}`;
+
+  return Component;
+};
--- a/packages/lucide-preact/src/defaultAttributes.js
+++ b/packages/lucide-preact/src/defaultAttributes.js
@@ -0,0 +1,11 @@
+export default {
+  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',
+};
--- a/packages/lucide-preact/src/icons/.gitkeep
+++ b/packages/lucide-preact/src/icons/.gitkeep
@@ -0,0 +1 @@
+Folder for generated icons
--- a/packages/lucide-preact/src/lucide-preact.js
+++ b/packages/lucide-preact/src/lucide-preact.js
@@ -0,0 +1 @@
+export * from './icons';
--- a/packages/lucide-preact/tests/snapshots/lucide-preact.spec.js.snap
+++ b/packages/lucide-preact/tests/snapshots/lucide-preact.spec.js.snap
@@ -0,0 +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 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 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>"`;
--- a/packages/lucide-preact/tests/lucide-preact.spec.js
+++ b/packages/lucide-preact/tests/lucide-preact.spec.js
@@ -0,0 +1,30 @@
+import { h } from 'preact'
+import { render } from '@testing-library/preact'
+import { Grid } from '../src/icons'
+
+describe('Using lucide icon components', () => {
+  it('should render an component', () => {
+    const { container } = render( <Grid/> );
+
+    expect( container.innerHTML ).toMatchSnapshot();
+  });
+
+  it('should adjust the size, stroke color and stroke width', () => {
+    const testId = 'grid-icon';
+    const { container, getByTestId } = render(
+      <Grid
+        data-testid={testId}
+        size={48}
+        stroke="red"
+        strokeWidth={4}
+      />,
+    );
+
+    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();
+  });
+})
--- a/packages/lucide-react/babel.config.js
+++ b/packages/lucide-react/babel.config.js
@@ -1,6 +1,19 @@
 const mainConfig = require('../../babel.config');

 module.exports = {
-  presets: ['react-app'],
-  env: mainConfig.env,
+  presets: [
+    [
+      '@babel/env',
+      {
+        loose: true,
+        modules: false,
+      },
+    ],
+  ],
+  env: {
+    ...mainConfig.env,
+    test: {
+      presets: ['react-app'],
+    },
+  },
 };
--- a/packages/lucide-react/package.json
+++ b/packages/lucide-react/package.json
@@ -21,19 +21,18 @@
    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
    "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-react/src --templateSrc=../packages/lucide-react/scripts/exportTemplate --renderUniqueKey",
-    "build:es": "yarn --cwd ../../ babel packages/lucide-react/src -d packages/lucide-react/dist/esm",
+    "build:es": "babel src -d dist/esm",
    "build:types": "yarn --cwd ../../ babel-node packages/lucide-react/scripts/buildTypes.js",
    "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-react/rollup.config.js",
    "test": "jest"
  },
-  "dependencies": {
-    "prop-types": "^15.7.2",
-    "react": "^16.5.1"
-  },
  "devDependencies": {
+    "@testing-library/react": "^11.2.6",
    "babel-preset-react-app": "^10.0.0",
    "jest": "^26.6.3",
-    "react-test-renderer": "^16.5.1"
+    "prop-types": "^15.7.2",
+    "react": "^16.5.1",
+    "react-dom": "^17.0.2"
  },
  "peerDependencies": {
    "prop-types": "^15.7.2",
--- a/packages/lucide-react/tests/snapshots/lucide-react.spec.js.snap
+++ b/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>"`;
--- a/packages/lucide-react/tests/lucide-react.spec.js
+++ b/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();
  });
 })
--- a/yarn.lock
+++ b/yarn.lock
@@ -1252,6 +1252,17 @@
    "@babel/plugin-syntax-jsx" "^7.12.13"
    "@babel/types" "^7.12.17"

+"@babel/plugin-transform-react-jsx@^7.3.0":
+  version "7.13.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.13.12.tgz#1df5dfaf0f4b784b43e96da6f28d630e775f68b3"
+  integrity sha512-jcEI2UqIcpCqB5U5DRxIl0tQEProI2gcu+g8VTIqxLO5Iidojb4d77q+fwGseCvd8af/lJ9masp4QWzBXFE2xA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.12.13"
+    "@babel/helper-module-imports" "^7.13.12"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/types" "^7.13.12"
+
 "@babel/plugin-transform-react-pure-annotations@^7.12.1":
  version "7.12.1"
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.12.1.tgz#05d46f0ab4d1339ac59adf20a1462c91b37a1a42"
@@ -1626,6 +1637,14 @@
    pirates "^4.0.0"
    source-map-support "^0.5.16"

+"@babel/runtime-corejs3@^7.10.2":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.14.0.tgz#6bf5fbc0b961f8e3202888cb2cd0fb7a0a9a3f66"
+  integrity sha512-0R0HTZWHLk6G8jIk0FtoX+AatCtKnswS98VhXwGImFc759PJRp4Tru0PQYZofyijTFUr+gT8Mu7sgXVJLQ0ceg==
+  dependencies:
+    core-js-pure "^3.0.0"
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@7.12.1":
  version "7.12.1"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.1.tgz#b4116a6b6711d010b2dad3b7b6e43bf1b9954740"
@@ -1640,6 +1659,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
  version "7.13.10"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
@@ -2244,11 +2270,59 @@
  dependencies:
    "@sinonjs/commons" "^1.7.0"

+"@testing-library/dom@^7.16.2":
+  version "7.30.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.30.3.tgz#779ea9bbb92d63302461800a388a5a890ac22519"
+  integrity sha512-7JhIg2MW6WPwyikH2iL3o7z+FTVgSOd2jqCwTAHqK7Qal2gRRYiUQyURAxtbK9VXm/UTyG9bRihv8C5Tznr2zw==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^4.2.2"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.4"
+    lz-string "^1.4.4"
+    pretty-format "^26.6.2"
+
+"@testing-library/dom@^7.28.1":
+  version "7.30.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.30.0.tgz#53697851f7708a1448cc30b74a2ea056dd709cd6"
+  integrity sha512-v4GzWtltaiDE0yRikLlcLAfEiiK8+ptu6OuuIebm9GdC2XlZTNDPGEfM2UkEtnH7hr9TRq2sivT5EA9P1Oy7bw==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^4.2.0"
+    aria-query "^4.2.2"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.4"
+    lz-string "^1.4.4"
+    pretty-format "^26.6.2"
+
+"@testing-library/preact@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/preact/-/preact-2.0.1.tgz#c69200b16c4eda58986c8d65e1043ad9cbe409d3"
+  integrity sha512-79kwVOY+3caoLgaPbiPzikjgY0Aya7Fc7TvGtR1upCnz2wrtmPDnN2t9vO7I7vDP2zoA+feSwOH5Q0BFErhaaQ==
+  dependencies:
+    "@testing-library/dom" "^7.16.2"
+
+"@testing-library/react@^11.2.6":
+  version "11.2.6"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-11.2.6.tgz#586a23adc63615985d85be0c903f374dab19200b"
+  integrity sha512-TXMCg0jT8xmuU8BkKMtp8l7Z50Ykew5WNX8UoIKTaLFwKkP2+1YDhOLA2Ga3wY4x29jyntk7EWfum0kjlYiSjQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^7.28.1"
+
 "@tootallnate/once@1":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==

+"@types/aria-query@^4.2.0":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"
+  integrity sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
  version "7.1.13"
  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.13.tgz#bc6eea53975fdf163aff66c086522c6f293ae4cf"
@@ -3050,6 +3124,14 @@ aria-query@^3.0.0:
    ast-types-flow "0.0.7"
    commander "^2.11.0"

+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
+
 arity-n@^1.0.4:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
@@ -3423,6 +3505,13 @@ babel-preset-jest@^26.6.2:
    babel-plugin-jest-hoist "^26.6.2"
    babel-preset-current-node-syntax "^1.0.0"

+babel-preset-preact@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-preact/-/babel-preset-preact-2.0.0.tgz#3437b713a03b1d2031740b06b19c9115964ae619"
+  integrity sha512-gqJCALE4XXEienLkzgAQ351XyoVHTIiZRAKjEJupK7cTVhFyovEuSrVoNrTNrUu3R78vAarjxkrR6j0vr+Rg8Q==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.3.0"
+
 babel-preset-react-app@^10.0.0:
  version "10.0.0"
  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-10.0.0.tgz#689b60edc705f8a70ce87f47ab0e560a317d7045"
@@ -4613,6 +4702,11 @@ core-js-compat@^3.8.0:
    browserslist "^4.16.3"
    semver "7.0.0"

+core-js-pure@^3.0.0:
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.12.1.tgz#934da8b9b7221e2a2443dc71dfa5bd77a7ea00b8"
+  integrity sha512-1cch+qads4JnDSWsvc7d6nzlKAippwjUlf6vykkTLW53VSV+NkE6muGBToAjEA8pG90cSfcud3JgVmW2ds5TaQ==
+
 core-js@3, core-js@^3.2.1:
  version "3.9.1"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae"
@@ -5329,6 +5423,11 @@ doctrine@^2.1.0:
  dependencies:
    esutils "^2.0.2"

+dom-accessibility-api@^0.5.4:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz#b06d059cdd4a4ad9a79275f9d414a5c126241166"
+  integrity sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==
+
 dom-converter@^0.2:
  version "0.2.0"
  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -8797,6 +8896,11 @@ lru-cache@^6.0.0:
  dependencies:
    yallist "^4.0.0"

+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
+
 lucide-react@0.15.11:
  version "0.15.11"
  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.15.11.tgz#34f2d76d1e7fda978f4a8b2d0538b84ecbecf106"
@@ -10617,6 +10721,11 @@ postcss@^8.1.4, postcss@^8.2.4:
    nanoid "^3.1.22"
    source-map "^0.6.1"

+preact@^10.5.13:
+  version "10.5.13"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019"
+  integrity sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ==
+
 prelude-ls@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -10929,7 +11038,16 @@ react-dom@^16.8.6:
    prop-types "^15.6.2"
    scheduler "^0.19.1"

-react-is@^16.8.1, react-is@^16.8.6:
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
+react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10939,16 +11057,6 @@ react-is@^17.0.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==

-react-test-renderer@^16.5.1:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
-  integrity sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==
-  dependencies:
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    react-is "^16.8.6"
-    scheduler "^0.19.1"
-
 react@^16.5.1, react@^16.8.6:
  version "16.14.0"
  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
@@ -11640,6 +11748,14 @@ scheduler@^0.19.1:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"

+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"