diff --git a/.gitignore b/.gitignore
index 27b93d5e..63520da7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,3 @@
node_modules
dist
-es
+build
diff --git a/.gitmodules b/.gitmodules
deleted file mode 100644
index c8e5e1d5..00000000
--- a/.gitmodules
+++ /dev/null
@@ -1,3 +0,0 @@
-[submodule "src/feather"]
- path = src/feather
- url = https://github.com/colebemis/feather.git
diff --git a/.npmignore b/.npmignore
index 51c694be..ecf8ed48 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,2 +1,3 @@
bin
+src
.babelrc
diff --git a/README.md b/README.md
index 0b092d38..98b0ff52 100644
--- a/README.md
+++ b/README.md
@@ -6,12 +6,15 @@
#### What is react-feather?
react-feather is a collection of simply beautiful open source icons for React.js. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.
-#### Based on Feather Icons ```v4.22.1```
-
-#### Version `2.0.0` adds support for tree-shaking, to help you reduce bundle size.
+#### Based on Feather Icons ```v4.29.0```
+https://feathericons.com/
### Installation
- npm install react-feather --save
+ yarn add react-feather
+
+ or
+
+ npm i react-feather
### Usage
diff --git a/bin/build.js b/bin/build.js
index dae0cc65..45036e8d 100644
--- a/bin/build.js
+++ b/bin/build.js
@@ -17,14 +17,14 @@ if (!fs.existsSync(dir)) {
}
const initialTypeDefinitions = `///
-import { ComponentType, SVGAttributes } from 'react';
+import { FC, SVGAttributes } from 'react';
-interface Props extends SVGAttributes {
+export interface IconProps extends SVGAttributes {
color?: string;
size?: string | number;
}
-type Icon = ComponentType;
+export type Icon = FC;
`;
fs.writeFileSync(path.join(rootDir, 'src', 'index.js'), '', 'utf-8');
@@ -39,8 +39,8 @@ const attrsToString = (attrs) => {
if (key === 'width' || key === 'height' || key === 'stroke') {
return key + '={' + attrs[key] + '}';
}
- if (key === 'otherProps') {
- return '{...otherProps}';
+ if (key === 'rest') {
+ return '{...rest}';
}
return key + '="' + attrs[key] + '"';
}).join(' ');
@@ -59,21 +59,20 @@ icons.forEach((i) => {
strokeWidth: 2,
strokeLinecap: 'round',
strokeLinejoin: 'round',
- otherProps: '...otherProps',
+ rest: '...rest',
};
const element = `
- import React from 'react';
+ import React, {forwardRef} from 'react';
import PropTypes from 'prop-types';
- const ${ComponentName} = (props) => {
- const { color, size, ...otherProps } = props;
+ const ${ComponentName} = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
return (
-