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>
)
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} />
}