Add Icon component for icons

This commit is contained in:
Andrew Nicolaou 2020-04-19 20:30:32 +02:00
parent c2734ab5be
commit b61bd69505
2 changed files with 51 additions and 0 deletions

34
client/common/Icon.jsx Normal file
View file

@ -0,0 +1,34 @@
/* eslint-disable global-require */
import InlineSVG from 'react-inlinesvg';
import PropTypes from 'prop-types';
import React from 'react';
import lodash from 'lodash';
const icons = {
github: require('../images/github.svg'),
google: require('../images/google.svg'),
};
/*
names will be an mirror-object of icon names:
{
github: 'github',
...
}
*/
const names = lodash.mapValues(icons, (value, key) => key);
function Icon({ name, ...props }) {
return (
<InlineSVG src={icons[name]} {...props} />
);
}
Icon.names = names;
Icon.propTypes = {
name: PropTypes.oneOf(Object.keys(names)).isRequired
};
export default Icon;

View file

@ -0,0 +1,17 @@
import React from 'react';
import { select } from '@storybook/addon-knobs';
import Icon from './Icon';
export default {
title: 'Common/Icon',
component: Icon
};
export const AllIcons = () => {
const firstIconName = Object.keys(Icon.names)[0];
return (
<Icon name={select('name', Icon.names, firstIconName)} />
);
};