Files
lucide/packages/lucide-react/src/createReactComponent.js
2021-09-17 16:23:17 +02:00

44 lines
1.2 KiB
JavaScript

import { forwardRef, createElement } from 'react';
import PropTypes from 'prop-types';
import defaultAttributes from './defaultAttributes';
/**
* Converts string to KebabCase
* Copied from scripts/helper. If anyone knows how to properly import it here
* then please fix it.
*
* @param {string} string
* @returns {string} A kebabized string
*/
export const toKebabCase = string => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
export default (iconName, iconNode) => {
const Component = forwardRef(
({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }, ref) =>
createElement(
'svg',
{
ref,
...defaultAttributes,
width: size,
height: size,
stroke: color,
strokeWidth,
className: `lucide lucide-${toKebabCase(iconName)}`,
...rest,
},
iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
),
);
Component.propTypes = {
color: PropTypes.string,
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
strokeWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
Component.displayName = `${iconName}`;
return Component;
};