Icon options

options.md

Option 1

Pregenerate the exports in the index.js using a script

// ionic/index.js

import SvgIosAdd from './IosAdd';
import SvgIosAddCircle from './IosAddCircle';

export const IosAdd = ({icon, ...props}) => (
    <IconContext.Consumer>
        {(value) => {
            let newProps = Object.assign({}, value.props, props);
            newProps.fill = newProps.fill || 'currentcolor';
            newProps.stroke = newProps.stroke || 'currentcolor';
            return <SvgIosAdd {...props} />;
        }}
    </IconContext.Consumer>
)

export const IosAddCircle = ({icon, ...props}) => (
    <IconContext.Consumer>
        {(value) => {
            let newProps = Object.assign({}, value.props, props);
            newProps.fill = newProps.fill || 'currentcolor';
            newProps.stroke = newProps.stroke || 'currentcolor';
            return <SvgIosAddCircle {...props} />;
        }}
    </IconContext.Consumer>
)

Option 2

Use an Icon component and the SVG components directly

// icons/index.js
export const Icon = ({icon, ...props}) => (
    <IconContext.Consumer>
        {(value) => {
            let newProps = Object.assign({}, value.props, props);
            newProps.fill = newProps.fill || 'currentcolor';
            newProps.stroke = newProps.stroke || 'currentcolor';
            return React.createElement(icon, props);
        }}
    </IconContext.Consumer>
)

// yard-check.jsx

import { Icon } from '../icons';
import { IosAdd } from '../icons/ionic';

render(){
   <Icon icon={IosAdd} />
}