react-icomoon
v2.5.7
Published
It makes it very simple to use SVG icons in your React and React-Native projects.
Downloads
94,973
Maintainers
Readme
It makes it very simple to use SVG icons in your React
and React-Native
projects.
Cheatsheet - Interactive Demo - Buy Me a Coffee
Install
npm install react-icomoon
yarn add react-icomoon
Usage
You can use svgps.app to access over 40,000
free icons and convert your own icons into selection.json
.
Or you can use IcoMoon to generate the selection.json
file.
Declare
// Icon.jsx
import IcoMoon from "react-icomoon";
import iconSet from "./selection.json";
const Icon = (props) => <IcoMoon iconSet={iconSet} {...props} />;
export default Icon;
With TypeScript
// Icon.tsx
import IcoMoon, { IconProps } from "react-icomoon";
import iconSet from "./selection.json";
const Icon = (props: IconProps) => <IcoMoon iconSet={iconSet} {...props} />;
export default Icon;
Use
import Icon from "./Icon";
<Icon icon="pencil" size={20} color="orange" />;
Props List
| Name | Type | Default | Sample | | ----------------- | ------------- | ------- | ----------------------------- | | iconSet | Object | - | "selection.json file content" | | icon | String | - | "home" | | size | Number,String | - | "1em", 10, "100px" | | color | String | - | "red", "#f00", "rgb(0,0,0)" | | style | Object | {...} | { color: '#ff0'} | | title | String | - | "Icon Title" | | className | String | - | "icomoon" | | disableFill | Boolean | - | true | | removeInlineStyle | Boolean | - | true |
Default Style
{
display: "inline-block",
stroke: "currentColor",
fill: "currentColor",
}
iconList
You can use the iconList method to see a complete list of icons you can use.
import IcoMoon, { iconList } from "react-icomoon";
iconList(iconSet);
// sample output
[
"document",
"camera",
"genius",
"chat",
"heart1",
"alarmclock",
"star-full",
"heart",
"play3",
"pause2",
"bin1",
];
React Native 🎉 • Demo
Step 1: Install Dependencies
npm install react-icomoon react-native-svg
yarn add react-icomoon react-native-svg
Step 2: Declare
Additional props for React Native
| Name | Type | Default | Sample | | ------------- | --------------- | ------- | ------------- | | native | Boolean | - | true | | SvgComponent | React.Component | - | SvgComponent | | PathComponent | React.Component | - | PathComponent |
// Icon.jsx
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
import iconSet from "./selection.json";
const Icon = (props) => (
<IcoMoon
native
SvgComponent={Svg}
PathComponent={Path}
iconSet={iconSet}
{...props}
/>
);
export default Icon;
Step 3: Use
import Icon from "./Icon";
<Icon icon="pencil" size={20} color="orange" />;