Lucide 0.15.0 (#272)

* add configs

* Add vue components

* Add documentation

* add alpha release version

* improve npm ignore files

* add tests

* Make style and class attrs work

* 📦 bump version

* Add Icon suffix for component names

* bump version

* Add icon component example

* remove space

* add new build strategy

* Write a better intro

* add other node design

* fix

* add new default template

* add tempalte

* improve code

* small improvements

* small improvements

* move files

* Connect lucide with lucide-react

* Add support for vue

* Add licenses to packages

* Fix tests

* refactor build scripts

* Minor code fixes

* update homepage readme

* Update footer text

* Add a better introduction to packages

* Split up in tempaltes

* Add new types build file

* Setup workflow file

* update readme

* update

* Fix build

* remove debug code

* Add check if svgs have duplicated children

* Add check if their are no children

* small fixes

* last fixes in the build

* Move script to packages folder

* Fix tests and add types for lucide

* Add rule to package.json

* add types in build

* add npm ignore

* update package.jsons

packages/lucide-react/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.

packages/lucide-react/README.md

@@ -1,6 +1,8 @@
 # Lucide React
 
-Use the lucide icon library in you react app.
+Implementation of the lucide icon library for react applications.
+
+> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
 
 ## Installation
 

packages/lucide-react/babel.config.js

@@ -1,3 +1,6 @@
+const mainConfig = require('../../babel.config');
+
 module.exports = {
   presets: ['react-app'],
+  env: mainConfig.env,
 };

packages/lucide-react/build-types.js

@@ -1,54 +0,0 @@
-const fs = require("fs")
-const path = require("path")
-const srcDirectory = path.join(__dirname, "dist")
-
-// Declare type definitions
-const typeDefinitions = `
-/// <reference types="react" />
-import { SVGAttributes } from 'react'
-
-// Create interface extending SVGAttributes
-export interface LucideProps extends Partial<React.SVGProps<SVGSVGElement>> {
-    color?: string
-    size?: string | number
-    stroke?: string | number
-    strokeWidth?: string | number
-}
-
-// Generated icons
-`
-
-// Write type definitions to file
-fs.writeFileSync(
-  path.join(srcDirectory, "index.d.ts"),
-  typeDefinitions,
-  "utf-8",
-)
-
-const iconsFolder = "./build/icons"
-fs.readdir(iconsFolder, (err, files) => {
-
-  files.forEach(file => {
-
-    const fileName = file.replace(".js", "")
-
-    // Convert fileName to component name
-    const componentName = fileName.split("-")
-                                  .map(word => word[0].toUpperCase() + word.substr(1, word.length))
-                                  .join("")
-
-    // Declare component type
-    const exportTypeString = `export declare const ${componentName}: (props: LucideProps) => JSX.Element;\n`
-
-    // Add component to the types file
-    fs.appendFileSync(
-      path.join(srcDirectory, "index.d.ts"),
-      exportTypeString,
-      "utf-8",
-    )
-
-  })
-
-  console.log("Generated index.d.ts file with", files.length, "icons")
-
-})

packages/lucide-react/jest.config.js

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

packages/lucide-react/package.json

@@ -16,14 +16,13 @@
   "main:umd": "dist/umd/lucide-react.js",
   "module": "dist/esm/lucide-react.js",
   "unpkg": "dist/umd/lucide-react.min.js",
-  "typings": "dist/index.d.ts",
+  "typings": "dist/lucide-react.d.ts",
   "scripts": {
-    "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:types && 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 --noDefaultAttrs --renderUniqueKey",
-    "build:types": "node build-types.js",
-    "build:es": "yarn --cwd ../../ babel packages/lucide-react/build -d packages/lucide-react/dist/esm",
+    "build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
+    "clean": "rm -rf dist && 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: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"
   },

packages/lucide-react/rollup.config.js

@@ -1,11 +1,11 @@
-const plugins = require('../../rollup.plugins');
-const pkg = require('./package.json');
+import plugins from '../../rollup.plugins';
+import pkg from './package.json';
 
 const packageName = 'LucideReact';
 const outputFileName = 'lucide-react';
 const rootDir = 'packages/lucide-react'; // It runs from the root
 const outputDir = `${rootDir}/dist`;
-const inputs = [`${rootDir}/build/lucide-react.js`];
+const inputs = [`${rootDir}/src/lucide-react.js`];
 const bundles = [
   {
     format: 'umd',
@@ -30,7 +30,7 @@ const configs = bundles
     inputs.map(input => ({
       input,
       plugins: plugins(pkg, minify),
-      external: ['react', 'prop-types'],
+      external: ['react', 'prop-types', 'lucide'],
       output: {
         name: packageName,
         file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
@@ -39,6 +39,7 @@ const configs = bundles
         globals: {
           react: 'react',
           'prop-types': 'PropTypes',
+          lucide: 'lucide',
         },
       },
     })),

packages/lucide-react/scripts/buildTypes.js

@@ -0,0 +1,44 @@
+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="react" />
+import { SVGAttributes } from 'react'
+
+// Create interface extending SVGAttributes
+export interface LucideProps extends Partial<React.SVGProps<SVGSVGElement>> {
+    color?: string
+    size?: string | number
+    stroke?: string | number
+    strokeWidth?: string | number
+}
+
+// Generated icons
+`;
+
+const ICONS_DIR = path.resolve(__dirname, '../../../icons');
+const TYPES_FILE = 'lucide-react.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');

packages/lucide-react/scripts/exportTemplate.js

@@ -1,8 +1,7 @@
-export default ({ componentName, node }) => `
+export default ({ componentName, children }) => `
 import createReactComponent from '../createReactComponent';
-import defaultAttributes from '../defaultAttributes';
 
-const ${componentName} = createReactComponent('${componentName}', ['svg', defaultAttributes, ${node}]);
+const ${componentName} = createReactComponent('${componentName}', ${JSON.stringify(children)});
 
 export default ${componentName};
 `;

packages/lucide-react/src/createReactComponent.js

@@ -1,21 +1,22 @@
 import { forwardRef, createElement } from 'react';
 import PropTypes from 'prop-types';
+import defaultAttributes from './defaultAttributes';
 
-export default (iconName, [tag, attrs, children]) => {
+export default (iconName, iconNode) => {
   const Component = forwardRef(
     ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }, ref) =>
       createElement(
-        tag,
+        'svg',
         {
           ref,
-          ...attrs,
+          ...defaultAttributes,
           width: size,
           height: size,
           stroke: color,
           strokeWidth,
           ...rest,
         },
-        children.map(([childTag, childAttrs]) => createElement(childTag, childAttrs)),
+        iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
       ),
   );
 

packages/lucide-react/src/icons/.gitkeep

@@ -0,0 +1 @@
+Folder for generated icons

packages/lucide-react/src/icons/index.js

@@ -1,5 +0,0 @@
-/*
- Icons exports.
-
- Will be generated
-*/

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { Grid } from '..'
+import { Grid } from '../src/icons'
 
 describe('Using lucide icon components', () => {
   it('should render an component', () => {