initial commit

src/app/atoms/system-icons/RawIcon.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RawIcon.scss';
+
+function RawIcon({ color, size, src }) {
+  const style = {
+    WebkitMaskImage: `url(${src})`,
+    maskImage: `url(${src})`,
+  };
+  if (color !== null) style.backgroundColor = color;
+  return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>;
+}
+
+RawIcon.defaultProps = {
+  color: null,
+  size: 'normal',
+};
+
+RawIcon.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
+  src: PropTypes.string.isRequired,
+};
+
+export default RawIcon;

src/app/atoms/system-icons/RawIcon.scss

@@ -0,0 +1,25 @@
+@mixin icSize($size) {
+  width: $size;
+  height: $size;
+}
+
+.ic-raw {
+  display: inline-block;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: cover;
+  mask-size: cover;
+  background-color: var(--ic-surface-normal);
+}
+.ic-raw-large {
+  @include icSize(var(--ic-large));
+}
+.ic-raw-normal {
+  @include icSize(var(--ic-normal));
+}
+.ic-raw-small {
+  @include icSize(var(--ic-small));
+}
+.ic-raw-extra-small {
+  @include icSize(var(--ic-extra-small));
+}