aboutsummaryrefslogtreecommitdiffstats
path: root/src/react/SVGIcon.js
diff options
context:
space:
mode:
authorIsrael Lavi <israel.lavi@intl.att.com>2018-05-21 17:42:00 +0300
committerIsrael Lavi <il0695@att.com>2018-05-21 17:52:01 +0300
commit1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch)
treef30beeaf15a8358f6da78fdd74bcbda74bd334f8 /src/react/SVGIcon.js
parent4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff)
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'src/react/SVGIcon.js')
-rw-r--r--src/react/SVGIcon.js47
1 files changed, 47 insertions, 0 deletions
diff --git a/src/react/SVGIcon.js b/src/react/SVGIcon.js
new file mode 100644
index 0000000..8a5b1ae
--- /dev/null
+++ b/src/react/SVGIcon.js
@@ -0,0 +1,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;