Reusable PNG Icons in React
import React from 'react';
import Icon from "./Icon";
import { ICONS } from "./constants";
const Demo = ({}) => (
<div>
Here's my cool icon: <Icon icon={ICON.ADD_CARD}/>
</div>
);
export const ICONS = {
ADD_CARD: require("./assets/icon_credit_card_add.png")
};
import React, { PropTypes } from "react";
const Icon = props => {
const styles = {
img: {
width: `${props.size}`,
height: `${props.size}`
}
};
return <img style={styles.img} src={props.icon} />;
};
Icon.propTypes = {
size: PropTypes.string,
icon: PropTypes.string.isRequired
};
Icon.defaultProps = {
size: 32
};
export default Icon;