React Component which let you use icomoon selection.json file to display svg's icons
for YARN:
yarn add icomoon-react
for NPM:
npm install icomoon-react
use selection.json
generated from http://icomoon.io/app
import iconSet from 'somewhere/selection.json'
import IcomoonReact, {iconList} from 'icomoon-react'
than just use component in code:
<IcomoonReact iconSet={iconSet} color="#444" size={100} icon="shower" />
To console.log all icons use: iconList(iconSet)
function
To not include set all over again just create your wraper component:
import React from 'react';
import PropTypes from 'prop-types';
import IcomoonReact from '../IcomoonReact';
import iconSet from '../../assets/icons/selection.json';
const Icon = (props) => {
const { color, size, icon } = props;
return <IcomoonReact
iconSet={iconSet}
color={color || '#f00'}
size={size || 100}
icon={icon}
/>;
};
Icon.propTypes = {
color: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
size: PropTypes.number.isRequired,
};
export default Icon;
import React from 'react';
import Icon from '../Icon';
const App = () => (
<div>
<Icon color="#444" size={100} icon="bath" />
</div>
);
export default App;