Change default size to 1em

README.md

@@ -7,6 +7,7 @@
 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.28.0```
+https://feathericons.com/
 
 ### Installation
     yarn add react-feather

bin/build.js

@@ -19,12 +19,12 @@ if (!fs.existsSync(dir)) {
 const initialTypeDefinitions = `/// <reference types="react" />
 import { FC, SVGAttributes } from 'react';
 
-interface Props extends SVGAttributes<SVGElement> {
+export interface IconProps extends SVGAttributes<SVGElement> {
   color?: string;
   size?: string | number;
 }
 
-type Icon = FC<Props>;
+export type Icon = FC<IconProps>;
 `;
 
 fs.writeFileSync(path.join(rootDir, 'src', 'index.js'), '', 'utf-8');
@@ -66,7 +66,7 @@ icons.forEach((i) => {
     import React, {forwardRef} from 'react';
     import PropTypes from 'prop-types';
 
-    const ${ComponentName} = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+    const ${ComponentName} = forwardRef(({ color = 'currentColor', size = 1em, ...rest }, ref) => {
       return (
         <svg ref={ref} ${attrsToString(defaultAttrs)}>
           ${featherIcons[i]}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-feather",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "React component for Feather icons",
   "main": "build/index.js",
   "module": "dist/index.js",
@@ -56,7 +56,7 @@
     "uppercamelcase": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.6"
+    "react": "^16.8.6 || ^17"
   },
   "dependencies": {
     "prop-types": "^15.7.2"

src/icons/activity.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Activity = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Activity = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/airplay.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Airplay = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Airplay = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/alert-circle.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const AlertCircle = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const AlertCircle = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/alert-octagon.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const AlertOctagon = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const AlertOctagon = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/alert-triangle.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const AlertTriangle = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const AlertTriangle = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/align-center.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const AlignCenter = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const AlignCenter = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/align-justify.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const AlignJustify = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const AlignJustify = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/align-left.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const AlignLeft = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const AlignLeft = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/align-right.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const AlignRight = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const AlignRight = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/anchor.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Anchor = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Anchor = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/aperture.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Aperture = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Aperture = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/archive.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Archive = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Archive = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-down-circle.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowDownCircle = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowDownCircle = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-down-left.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowDownLeft = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowDownLeft = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-down-right.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowDownRight = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowDownRight = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-down.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowDown = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowDown = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-left-circle.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowLeftCircle = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowLeftCircle = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-left.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowLeft = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowLeft = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-right-circle.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowRightCircle = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowRightCircle = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-right.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowRight = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowRight = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-up-circle.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowUpCircle = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowUpCircle = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-up-left.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowUpLeft = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowUpLeft = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-up-right.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowUpRight = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowUpRight = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/arrow-up.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowUp = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const ArrowUp = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/at-sign.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const AtSign = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const AtSign = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/award.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Award = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Award = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/bar-chart-2.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const BarChart2 = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const BarChart2 = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/bar-chart.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const BarChart = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const BarChart = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/battery-charging.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const BatteryCharging = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const BatteryCharging = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/battery.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Battery = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Battery = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/bell-off.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const BellOff = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const BellOff = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/bell.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Bell = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Bell = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/bluetooth.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Bluetooth = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Bluetooth = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/bold.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Bold = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Bold = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/book-open.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const BookOpen = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const BookOpen = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/book.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Book = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Book = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/bookmark.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Bookmark = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Bookmark = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}

src/icons/box.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 
-const Box = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+const Box = forwardRef(({ color = 'currentColor', size = "1em", ...rest }, ref) => {
   return (
     <svg
       ref={ref}