Reusable PNG Icons in React

constants.js

export const ICONS = {
    ADD_CARD: require("./assets/icon_credit_card_add.png")
};

demo.jsx

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>
);

Icon.jsx

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;