1 files changed, 38 insertions, 0 deletions
diff --git a/vnext/src/ui/Icon.js b/vnext/src/ui/Icon.js
new file mode 100644
index 00000000..faf1a704
--- /dev/null
+++ b/vnext/src/ui/Icon.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Icon = React.memo(props => {
+    var size = props.size ? ' icon--' + props.size : '';
+    var className = props.className ? ' ' + props.className : '';
+    var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className;
+
+    var name = '#' + props.name + '-icon';
+    var useTag = '<use xlink:href=' + name + ' />';
+    var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } });
+    return React.createElement(
+        'div',
+        { className: klass },
+        wrapSpinner(Icon, klass)
+    );
+});
+
+function wrapSpinner(Html, klass) {
+    if (klass.indexOf('spinner') > -1) {
+        return React.createElement(
+            'div',
+            { className: 'icon__spinner' },
+            Html
+        );
+    } else {
+        return Html;
+    }
+}
+
+export default Icon;
+
+Icon.propTypes = {
+    size: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    noFill: PropTypes.bool
+};