React package (#105)

* init new react package project

* setup react package

* Fix config for build

* update package

* Fix build

* update package

* fix package.json

* refactor and cleanup

* bumb beta version

* fix regex

* bump version

* Add hashing

* Add tests

* bump version

* Add peer dependecies

* Add docs

* Add readme link

Author: ericfennis

.eslintrc.js

@@ -1,21 +1,21 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "node": true
+  env: {
+    browser: true,
+    node: true
   },
-  "extends": ["airbnb-base", "prettier"],
-  "plugins": ["import", "prettier"],
-  "rules": {
-    "no-console": "off",
-    "no-param-reassign": "off",
-    "no-shadow": "off",
-    "no-use-before-define": "off",
-    "prettier/prettier": [
-      "error",
+  extends: ['airbnb-base', 'prettier'],
+  plugins: ['import', 'prettier'],
+  rules: {
+    'no-console': 'off',
+    'no-param-reassign': 'off',
+    'no-shadow': 'off',
+    'no-use-before-define': 'off',
+    'prettier/prettier': [
+      'error',
       {
-        "singleQuote": true,
-        "trailingComma": "all"
+        singleQuote: true,
+        trailingComma: 'all'
       }
     ]
   }
-}
+};

README.md

@@ -148,6 +148,12 @@ const myApp = document.getElementById('app');
 myApp.appendChild(menuIcon);
 ```
 
+### With React
+
+You can also use the lucide library as react icons.
+
+See [documentation](https://github.com/lucide-icons/lucide/blob/master/packages/lucide-react/README.md).
+
 ### Figma
 
 You can use the components from [this Figma file](https://www.figma.com/file/g0UipfQlRfGrntKPxZknM7/Featherity).

package.json

@@ -3,10 +3,12 @@
   "description": "Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
   "version": "0.11.0",
   "license": "ISC",
-  "amdName": "lucide",
   "homepage": "https://lucide.netlify.app",
-  "url": "https://github.com/owner/project/issues",
   "repository": "github:lucide-icons/lucide",
+  "bugs": {
+    "url": "https://github.com/lucide-icons/lucide/issues"
+  },
+  "amdName": "lucide",
   "source": "build/lucide.js",
   "main": "dist/cjs/lucide.js",
   "main:umd": "dist/umd/lucide.js",
@@ -15,11 +17,11 @@
   "sideEffects": false,
   "scripts": {
     "start": "babel-watch --watch src",
-    "clean": "rimraf lib && rimraf dist && rimraf build",
+    "clean": "rimraf dist && rimraf build",
     "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:bundles",
     "build:move": "cp -av src build",
     "build:icons": "npx babel-node ./scripts/buildIcons.js --presets @babel/env",
-    "build:es": "babel build -d dist/esm --ignore '**/*.test.js','**/__mocks__'",
+    "build:es": "babel build -d dist/esm",
     "build:bundles": "rollup -c rollup.config.js",
     "optimize": "npx babel-node ./scripts/optimizeSvgs.js --presets @babel/env",
     "test": "jest"
@@ -30,19 +32,22 @@
     "@babel/cli": "^7.10.5",
     "@babel/core": "^7.11.1",
     "@babel/node": "^7.10.5",
+    "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.11.0",
     "@rollup/plugin-babel": "^5.0.0",
     "babel-jest": "^26.3.0",
     "babel-plugin-add-import-extension": "^1.4.3",
     "cheerio": "^1.0.0-rc.2",
+    "core-js": "3",
     "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.5.0",
     "eslint-plugin-prettier": "^2.5.0",
     "html-minifier": "^3.5.8",
+    "htmlparser2": "^4.1.0",
     "jest": "^26.4.2",
-    "lodash": "^4.17.19",
+    "minimist": "^1.2.5",
     "prettier": "^1.8.2",
     "rollup": "^2.7.3",
     "rollup-plugin-commonjs": "^10.1.0",
@@ -52,12 +57,5 @@
     "rollup-plugin-terser": "^5.2.0",
     "rollup-plugin-visualizer": "^4.1.0",
     "svgo": "^1.3.2"
-  },
-  "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.11.5",
-    "core-js": "3",
-    "htmlparser2": "^4.1.0",
-    "lodash-es": "^4.17.15",
-    "prop-types": "^15.7.2"
   }
 }

packages/lucide-react/README.md

@@ -0,0 +1,73 @@
+# Lucide React
+
+Use the lucide icon library in you react app.
+
+## Installation
+
+```sh
+yarn add lucide-react
+
+# or
+
+npm install lucide-react
+```
+
+## How to use
+
+It's build with ESmodules so it's completely threeshakable.
+Each icon can be imported as an react component.
+
+### Example
+
+You can pass additional props to adjust the icon.
+
+``` js
+import { Camera } from 'lucide-react';
+// Returns ReactComponent
+
+// 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
+
+You can also pass custom props that will be added in the svg as attributes.
+
+``` js
+// Usage
+const App = () => {
+  return <Camera fill="red"/>
+};
+```
+
+### 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.
+
+#### Icon Component Example
+
+``` js
+import * as icons from 'lucide-react';
+
+const Icon = ({name, color, size}) => {
+  const LucideIcon = icons[name];
+
+  return <LucideIcon color={color} size={size} />
+};
+
+export default Icon;
+```

packages/lucide-react/babel.config.js

@@ -0,0 +1,4 @@
+// module.exports = require('../../babel.config');
+module.exports = {
+  presets: ['react-app'],
+};

packages/lucide-react/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  verbose: true,
+  roots: ['<rootDir>/src/', '<rootDir>/tests/'],
+  moduleFileExtensions: ['js'],
+  transformIgnorePatterns: [`/node_modules`],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+  },
+};

packages/lucide-react/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "lucide-react",
+  "description": "Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
+  "version": "0.1.2-beta.5",
+  "license": "ISC",
+  "amdName": "lucide-react",
+  "source": "build/lucide-react.js",
+  "main": "dist/cjs/lucide-react.js",
+  "main:umd": "dist/umd/lucide-react.js",
+  "module": "dist/esm/lucide-react.js",
+  "unpkg": "dist/umd/lucide-react.min.js",
+  "repository": "github:lucide-icons/lucide",
+  "author": "Eric Fennis",
+  "scripts": {
+    "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:bundles",
+    "clean": "rm -rf dist && rm -rf build",
+    "build:move": "cp -av src build",
+    "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-react/build --templateSrc=../packages/lucide-react/scripts/exportTemplate --camelizeAttrs --renderUniqueKey",
+    "build:es": "yarn --cwd ../../ babel packages/lucide-react/build -d packages/lucide-react/dist/esm",
+    "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-react/rollup.config.js",
+    "test": "jest"
+  },
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1"
+  },
+  "devDependencies": {
+    "babel-preset-react-app": "^10.0.0",
+    "jest": "^26.6.3",
+    "lucide": "file:../..",
+    "react-test-renderer": "^17.0.1"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1"
+  }
+}

packages/lucide-react/rollup.config.js

@@ -0,0 +1,47 @@
+const plugins = require('lucide/rollup.plugins');
+const pkg = require('./package.json');
+
+const outputFileName = pkg.name;
+const rootDir = 'packages/lucide-react'; // It runs from the root
+const outputDir = `${rootDir}/dist`;
+const inputs = [`${rootDir}/build/lucide-react.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: ['react', 'prop-types'],
+      output: {
+        name: outputFileName,
+        file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+        format,
+        sourcemap: true,
+        globals: {
+          react: 'react',
+          'prop-types': 'PropTypes',
+        },
+      },
+    })),
+  )
+  .flat();
+
+export default configs;

packages/lucide-react/scripts/exportTemplate.js

@@ -0,0 +1,7 @@
+export default ({ componentName, node }) => `
+import createReactComponent from '../createReactComponent';
+
+const ${componentName} = createReactComponent('${componentName}', ${node});
+
+export default ${componentName};
+`;

packages/lucide-react/src/createReactComponent.js

@@ -0,0 +1,31 @@
+import { forwardRef, createElement } from 'react';
+import PropTypes from 'prop-types';
+
+export default (iconName, [tag, attrs, children]) => {
+  const Component = forwardRef(
+    ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }, ref) =>
+      createElement(
+        tag,
+        {
+          ref,
+          ...attrs,
+          width: size,
+          height: size,
+          color,
+          strokeWidth,
+          ...rest,
+        },
+        children.map(([childTag, childAttrs]) => createElement(childTag, childAttrs)),
+      ),
+  );
+
+  Component.propTypes = {
+    color: PropTypes.string,
+    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  };
+
+  Component.displayName = `${iconName}`;
+
+  return Component;
+};