p5.js-web-editor/client/common/Icon.jsx
2020-04-27 10:20:07 +02:00

48 lines
1 KiB
JavaScript

/* eslint-disable global-require */
import InlineSVG from 'react-inlinesvg';
import PropTypes from 'prop-types';
import React from 'react';
import lodash from 'lodash';
import styled from 'styled-components';
const icons = {
sortArrowUp: require('../images/sort-arrow-up.svg'),
sortArrowDown: require('../images/sort-arrow-down.svg'),
github: require('../images/github.svg'),
google: require('../images/google.svg'),
plus: require('../images/plus-icon.svg'),
close: require('../images/close.svg'),
};
/*
names will be an mirror-object of icon names:
{
github: 'github',
...
}
*/
const names = lodash.mapValues(icons, (value, key) => key);
export const ValidIconNameType = PropTypes.oneOf(Object.keys(names));
const StyledInlineSVG = styled(InlineSVG)`
> svg {
width: 100%;
height: 100%;
}
`;
function Icon({ name, ...props }) {
return (
<StyledInlineSVG src={icons[name]} {...props} />
);
}
Icon.names = names;
Icon.propTypes = {
name: ValidIconNameType.isRequired
};
export default Icon;