1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
import React from 'react';
import PropTypes from 'prop-types';
import iconMap from './utils/iconMap.js';
const SVGIcon = ({name, onClick, label, className, iconClassName, labelClassName, labelPosition, color, disabled, ...other}) => {
let colorClass = (color !== '') ? '__' + color : '';
let classes = `svg-icon-wrapper ${iconClassName} ${className} ${colorClass} ${onClick ? 'clickable' : ''} ${labelPosition}`;
let camelCasedName = name.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
let IconComponent = iconMap[camelCasedName];
if (!IconComponent) {
console.error('Icon by the name ' + camelCasedName + ' is missing.');
}
return (
<div {...other} onClick={onClick} className={classes} disabled={disabled}>
{ IconComponent && <IconComponent className={`svg-icon __${name}`} /> }
{ !IconComponent && <span className='svg-icon-missing'>Missing Icon</span> }
{label && <span className={`svg-icon-label ${labelClassName}`}>{label}</span>}
</div>
);
};
SVGIcon.propTypes = {
name: PropTypes.string.isRequired,
onClick: PropTypes.func,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
labelPosition: PropTypes.string,
className: PropTypes.string,
iconClassName: PropTypes.string,
labelClassName: PropTypes.string,
color: PropTypes.string
};
SVGIcon.defaultProps = {
name: '',
label: '',
className: '',
iconClassName: '',
labelClassName: '',
labelPosition: 'bottom',
color: ''
};
export default SVGIcon;
|
