
React Native Vector Icons
June 25, 2022
1 min
It makes using SVG icons in your React
and React-Native
projects really simple.
NPM
npm install react-icomoon
Yarn
yarn add react-icomoon
You can use the icons you selected on IcoMoon by downloading the selection.json file.
// Icon.jsximport IcoMoon from "react-icomoon";import iconSet from "./selection.json";const Icon = (props) => <IcoMoon iconSet={iconSet} {...props} />;export default Icon;
// Icon.tsximport IcoMoon, { IconProps } from "react-icomoon";import iconSet from "./selection.json";const Icon = (props: IconProps) => <IcoMoon iconSet={iconSet} {...props} />;export default Icon;
import Icon from "./Icon";<Icon icon="pencil" size={20} color="orange" />;
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 |
{display: "inline-block",stroke: "currentColor",fill: "currentColor",}
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",];
NPM
npm install react-icomoon react-native-svg
YARN
yarn add react-icomoon react-native-svg
Name | Type | Default | Sample |
---|---|---|---|
native | Boolean | - | true |
SvgComponent | React.Component | - | SvgComponent |
PathComponent | React.Component | - | PathComponent |
// Icon.jsximport IcoMoon from "react-icomoon";import { Svg, Path } from "react-native-svg";import iconSet from "./selection.json";const Icon = (props) => (<IcoMoonnativeSvgComponent={Svg}PathComponent={Path}iconSet={iconSet}{...props}/>);export default Icon;
Step 3: Use
import Icon from "./Icon";<Icon icon="pencil" size={20} color="orange" />;
https://snack.expo.dev/TSt6uEi5a
Quick Links
Legal Stuff