With React-Icomoon you can easily use the icons you have selected or created in icomoon.

Overview

React-IcoMoon

npm npm size License

React-Icomoon Logo

📦 Zero Dependencies

With React-Icomoon you can easily use the icons you have selected or created in icomoon.

Demo

Install

npm install react-icomoon

Usage

You can use the icons you selected on IcoMoon by downloading the selection.json file.

https://icomoon.io/app/

Declare

// icon.js
import React from "react";
import IcoMoon from "react-icomoon";
const iconSet = require("./selection.json");

const Icon = ({ ...props }) => {
  return <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 undefined "selection.json file content"
icon String undefined "home"
size Number,String undefined "1em", 10, "100px"
color String undefined "red", "#f00", "rgb(0,0,0)"
style Object {...} { color: '#ff0'}
className String undefined "icomoon"
disableFill Boolean undefined true
removeInlineStyle Boolean undefined 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

Step 2: Declare

// icon.js
import React from "react";
import IcoMoon from "react-icomoon";
import { Svg, Path } from "react-native-svg";
const iconSet = require("./selection.json");

const Icon = ({ ...props }) => {
  return (
    <IcoMoon
      native
      iconSet={iconSet}
      SvgComponent={Svg}
      PathComponent={Path}
      {...props}
    />
  );
};

export default Icon;

Step 3: Usage

import Icon from "./icon";

<Icon icon="pencil" size={20} color="orange" />;
Issues
  • Add new icons

    Add new icons

    Is it possible using this lib add new icons?

    enhancement 
    opened by ithustle 6
  • Add types for typescript

    Add types for typescript

    It's always nice to have type information and it would be great to have type information for this awesome package.

    I'm thinking to create @types/react-icomoon or maybe even better to just re-write this project (well, single js file) to TypeScript. Then users will know props just from autocompletion for example.

    What do you think?

    enhancement 
    opened by iezepov 5
  • typescript support ☑

    typescript support ☑

    changed project to typescript and did my best to type the selection JSON file from icomoon.io, I quite did the similar approach in my existing project when this package still doesn't support typescript.

    opened by davidkhierl 5
  • Fix static height value of viewBox

    Fix static height value of viewBox

    https://github.com/aykutkardas/react-icomoon/blob/master/src/index.tsx#L66

    Current:

     props.viewBox = `0 0 ${width} 1024`;
    

    Expected:

     props.viewBox = `0 0 ${width} ${width}`;
    
    good first issue 
    opened by aykutkardas 3
  • Not find path name

    Not find path name

    screenshot_1550086416

    opened by adrielcardoso 2
  • Add support of

    Add support of "title" attribute

    It seams like title attribute do not support by browsers on <svg/> tags like they do for other tags. Example for default usage:

    <span title="I'm accessible tip">Some text</span>
    

    Example for <svg/> tag from MDN:

    <svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
      <circle cx="5" cy="5" r="4">
        <title>I'm a circle</title>
      </circle>
    
      <rect x="11" y="1" width="8" height="8">
        <title>I'm a square</title>
      </rect>
    </svg>
    

    It would be grate if next code

    <IcoMoon iconSet={iconSet} icon="MyIcon" title="My icon" />
    

    would transforms into

    <svg ... >
      <path ... >
        <title>My icon</title>
      </path>
    </svg>
    

    cos for now if I want browser tips on icons I must make a wrapper tag with title attribute on it

    enhancement 
    opened by Eugene-Musika 2
  • react-native support?

    react-native support?

    Hello, is this package compatible with react native? I cannot get it work.

    opened by kockok 2
  • Rendering issue within a <Text> wrapper

    Rendering issue within a wrapper

    Hi,

    I have the following code:

     <Text>
        <Icon icon={IconFonts.SOMEICON} style={quote} size={10} marginLeft={10}/>
        <Text style={myStyle}>{someText}</Text>
        <Icon icon={IconFonts.ANOTHERICON} style={quote} size={10} marginRight={10}/>
    </Text>
    

    The icons are styled quotation marks, that are expected to be in the sentence, around the inner text.

    However it doesn't render correctly. If I comment out the icons, the inner text shows. If I comment out the inner Text, the icons show.

    If I comment out the outer wrapper Text, both the icons and text show, but they are inline, as views, and not inline as expected in a sentence.

    It seems to me that somehow the Icons are not being treated as Text. Is there are way to make this work?

    Thanks!

    opened by ericpolkadoc 2
  • Update react peerDependencies version

    Update react peerDependencies version

    Currently react version mentioned in package.json is "^16.4.1"

     "peerDependencies": {
        "react": "^16.4.1"
      },
    

    and it causes error while installing package for react >=17.0.0 with npm. Not a big issue, but you must every time add flag --legacy-peer-deps

    I suppose that it will work fine if change peer deps version to this

     "peerDependencies": {
        "react": ">=16.4.1 <18.0.0-0"
      },
    
    opened by Eugene-Musika 1
  • Bump ansi-regex from 5.0.0 to 5.0.1

    Bump ansi-regex from 5.0.0 to 5.0.1

    Bumps ansi-regex from 5.0.0 to 5.0.1.

    Release notes

    Sourced from ansi-regex's releases.

    v5.0.1

    Fixes (backport of 6.0.1 to v5)

    This is a backport of the minor ReDos vulnerability in [email protected]<6.0.1, as requested in #38.

    • Fix ReDoS in certain cases (#37) You are only really affected if you run the regex on untrusted user input in a server context, which it's very unlikely anyone is doing, since this regex is mainly used in command-line tools.

    CVE-2021-3807

    https://github.com/chalk/ansi-regex/compare/v5.0.0..v5.0.1

    Thank you @​yetingli for the patch and reproduction case!

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • RNWeb: The style props works only with Inline style

    RNWeb: The style props works only with Inline style

    In RNWeb, The style property works only as an inline style. It didn't work if it's passed as an object from StyleSheet.create({})

    Here is an expo link, switch to web tab and see the issue. working fine in iOS & Android

    https://snack.expo.dev/@heykarthick/react-icomoon

    import * as React from 'react';
    import { View, StyleSheet } from 'react-native';
    
    import Icon from './components/Icon';
    const styles = StyleSheet.create({
      iconStyle: {
        color: 'red',
        margin: 20,
      },
    });
    export default function App() {
      return (
        <View>
          <Icon icon="pencil" size={100} style={styles.iconStyle} /> {/* didn't work */}
          <Icon icon="pencil" size={100} style={{ color: 'red', margin: 20 }} /> {/*Works*/}
        </View>
      );
    }
    
    bug help wanted 
    opened by karthick-t2s 2
Releases(v2.4.1)
  • v2.4.1(Aug 15, 2021)

  • v2.3.0(May 22, 2021)

  • v2.1.4(Aug 22, 2020)

    • Readme and .npmignore file update. 01a8391
    • yarn.lock file update. dcb44e2
    • Merge pull request #11 from aykutkardas/dependabot/npm_and_yarn/lodash-4.17.19 fe3d656
    • Bump lodash from 4.17.15 to 4.17.19 266cd44
    • 2.1.3 139ebcb
    • .npmignore file update. 4cd9612
    • 2.1.2 5bb1219
    • README update for iconList. 9a1465c
    • 2.1.1 68539ec
    • iconList bugfix. d8cc4ae
    • 2.1.0 61dd98a
    • iconList feature added. d9a9db4

    https://github.com/aykutkardas/React-IcoMoon/compare/v2.0.6...v2.1.4

    Source code(tar.gz)
    Source code(zip)
Owner
Aykut Kardaş
I'm JavaScript Developer.
Aykut Kardaş
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

X  Fruit Team 78 Aug 3, 2021
null 117 Jan 10, 2022
📱⚛ 🔄 The Image360Viewer has support for React Native CLI and Expo. This library allows the user to explore and have the freedom to view all product details in 360 degrees.

?? About ?? Getting started ?? Usage ?? Properties ?? Demo ?? Contributing ?? License About People want to see all the details of a product before the

Rodrigo Gonçalves S. 107 Jan 12, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 117 Aug 30, 2021
Welcome to react-native-coachmark! It helps you easily create Coach Marks to enhance user experience!

react-native-coachmarks Welcome to react-native-coachmarks! It helps you easily create Coach Marks to enhance user experience! DEMO Installation npm i

TranLuongTuanAnh 29 Dec 3, 2021
Quick and easy icons in React Native

WARNING: This library is discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons There's far bigger problems to so

Cory Smith 1.2k Dec 28, 2021
Customizable Icons for React Native with support for image source and full styling.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. Table of Contents Bundled Icon Sets Installation i

Joel Arvidsson 15.5k Jan 22, 2022
React Native - Native Animated Icons with different states

ReactNative: Native Iconic (Android/iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, You can still use

Pranav Raj Singh Chauhan 224 Dec 26, 2021
icons for react-native android using android-iconify

react-native-android-iconify icons for react native android using android-iconify Installation and How to use Step 1 - NPM Install npm install --save

Layton Whiteley 32 May 26, 2020
⭐Eva Icons for React Native

react-native-eva-icons ❤️ Clean and powerful Eva Icons implementation for React Native based on react-native-svg elements. Demo Installation npm i rea

Artur Yorsh 168 Dec 26, 2021
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Rishabh Sharma 19 Nov 15, 2021
Credit cards and other payment icons in React Native

react-native-payment-icons There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't! We use SVGs tha

Henrique Bruno 9 Jan 11, 2022
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Eva Icons Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4

Akveo 8.1k Jan 18, 2022
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
:level_slider: Yet another, big one, pure JS easily customisable and hackable react-native slider component

react-native-big-slider This package powers Yeti Smart Home and is used in production. A react native reusable and efficient dial knob element. Usage

Netbeast 86 Jan 13, 2022
Easily animate react-native components between two styles.

react-native-animated-styles Easily animate react-native components between two styles. Similar concept to adding and removing a CSS class to animate

Eric Kerr 20 Oct 7, 2021
TV App Framework - Simply and easily build an application for Smart TV, with a unique project for AndroidTV, TvOS and Web platforms (Tizen, webOs)

RTS APP TV RTS TV App Framework Simply and easily build an application for Smart TV, with a unique project for AndroidTV, TvOS and Web platforms (Tize

Rinaldo Stevenazzi 1 Nov 12, 2021
🚀 Organize your games easily. Create groups to play your favorite games with your friends.

?? Introduction ?? Technologies This project was developed using the following technologies: React Native Expo ??️ Features OAuth2 Social Authenticati

Tundê Cavalcante 3 Sep 10, 2021