48 lines
1 KiB
JavaScript
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;
|