diff --git a/README.md b/README.md
index 98b0ff52..5d3a9d23 100644
--- a/README.md
+++ b/README.md
@@ -58,3 +58,19 @@ const App = () => {
export default App;
```
+Icons can be configured with Provider:
+
+```jsx
+import React from 'react';
+import { FeatherIconProvider, Camera } from 'react-feather-icon';
+
+const App = () => {
+ return (
+
+
+
+ );
+};
+
+export default App;
+```
diff --git a/bin/build.js b/bin/build.js
index 45036e8d..ba8ca271 100644
--- a/bin/build.js
+++ b/bin/build.js
@@ -17,7 +17,7 @@ if (!fs.existsSync(dir)) {
}
const initialTypeDefinitions = `///
-import { FC, SVGAttributes } from 'react';
+import { FC, SVGAttributes, PropsWithChildren } from 'react';
export interface IconProps extends SVGAttributes {
color?: string;
@@ -25,14 +25,50 @@ export interface IconProps extends SVGAttributes {
}
export type Icon = FC;
+export type FeatherIconProvider = FC>\r\n;
`;
-fs.writeFileSync(path.join(rootDir, 'src', 'index.js'), '', 'utf-8');
+const Provider = `
+import React from "react";
+
+const defaultValues = {
+ size: 24,
+ color: "currentColor",
+};
+const FeatherIconContext = React.createContext(defaultValues);
+
+const FeatherIconProvider = ({
+ children,
+ size = defaultValues.size,
+ color = defaultValues.color,
+}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export const useDefaultProps = () => {
+ const { size, color } = React.useContext(FeatherIconContext) || defaultValues;
+ return { size, color };
+};
+
+export default FeatherIconProvider;
+`
+const providerExportString = `export { default as FeatherIconProvider } from './provider';\r\n`;
+
+fs.writeFileSync(path.join(rootDir, 'src', 'index.js'), providerExportString, 'utf-8');
fs.writeFileSync(
path.join(rootDir, 'src', 'index.d.ts'),
initialTypeDefinitions,
'utf-8',
);
+fs.writeFileSync(
+ path.join(rootDir, 'src', 'provider.js'),
+ Provider,
+ 'utf-8',
+);
const attrsToString = (attrs) => {
return Object.keys(attrs).map((key) => {
@@ -46,7 +82,8 @@ const attrsToString = (attrs) => {
}).join(' ');
};
-icons.forEach((i) => {
+Promise.all(
+icons.map(async (i) => {
const location = path.join(rootDir, 'src/icons', `${i}.js`);
const ComponentName = (i === 'github') ? 'GitHub' : upperCamelCase(i);
const defaultAttrs = {
@@ -65,8 +102,12 @@ icons.forEach((i) => {
const element = `
import React, {forwardRef} from 'react';
import PropTypes from 'prop-types';
+ import { useDefaultProps } from '../provider';
- const ${ComponentName} = forwardRef(({ color = 'currentColor', size = 24, ...rest }, ref) => {
+ const ${ComponentName} = forwardRef(({ color: colorFromProp, size: sizeFromProp, ...rest }, ref) => {
+ const { size: defaultSize, color: defaultColor } = useDefaultProps();
+ const size = sizeFromProp || defaultSize;
+ const color = colorFromProp || defaultColor;
return (