Meronex React Icons

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Check the icons here.

Installation

Yarn

yarn add @meronex/icons

NPM

npm install @meronex/icons --save

Usage

import  FaBeer from '@meronex/icons/FaBeer';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under @meronex/icons you import from.

For example, to use an icon from Material Design, your import would be: import ICON_NAME from 'react-icons/md/ICON_NAME';

Icons

Configuration

You can configure react-icons props using React Context API.

Requires React 16.3 or higher.

import { IconContext } from "@meronex/icons";

<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>

Adjustment CSS

From version 3, vertical-align: middle is not automatically given. Please use IconContext to specify className or specify an inline style.

Global Inline Styling

<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>

Global className Styling

Component

<IconContext.Provider value={{ className: 'react-icons' }}>

CSS

.react-icons {
  vertical-align: middle;
}

TypeScript native support

Dependencies on @types/@meronex/icons can be deleted.

Yarn

yarn remove @types/@meronex/icons

NPM

npm remove @types/@meronex/icons

Contributing

Development

yarn
yarn submodule  # fetch icon sources
cd packages/react-icons
yarn build

Preview

The preview site is the meronex-icons website, built in NextJS.

cd packages/react-icons
yarn build

cd ../preview
yarn start

Demo

The demo is a Create React App boilerplate with react-icons added as a dependency for easy testing.

cd packages/react-icons
yarn build

cd ../demo
yarn start

How to add an icon set

1. Add new git submodule

From the main directory (where this file is located) run the following command:

bash bash cd packages/react-icons git submodule add --name packages/react-icons/src/icons/ yarn build ```

cd ../demo #### 2. Modify README.md (this document) yarn start Add the name, URL, and the license link to the table in the ##Icons section of this file. Keep the list in alphabetical order.

3. Modify packages/react-icons/.gitignore

Add the two-letter folder name for the new icon set, e.g.:

...
/xy/
...

4. Modify packages/react-icons/LICENSE

Add license details about the new icon set.

5. Modify packages/react-icons/src/icons/index.js

Add the object with the following structure:

{
      id: "xy",                                    // Two-letter id
      name: "e.g. Xenon Yellow Icons",             // The full icon set name
      contents: [
        {
          files: path.resolve(__dirname, "<relative-path-to-git-submodule>/<path-to-svg-icons>/<filter>"),
          formatter: name => `Xy${name}`            // So that all icon names from this set will start with "Xy"
        }
      ],
      // URL of the github repo
      projectUrl: "https://github.com/xy/xy-icons",
      license: "Apache License Version 2.0",        // License type
      licenseUrl: "http://www.apache.org/licenses/" // URL of the license definition
}

to the icons array.

6. Once everything builds and looks right in the preview, create a pull request

Why React SVG components instead of fonts?

SVG is supported by all major browsers. With react-icons, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.

Credits & Motivation for the fork

This is a fork of react-icons and was created specifically to resolve issue the bundling issue #154, see here.

It was meant to be used temporary until the changes are merged upstream however due to the lack of activity in react-icons, I have decided to put it publicly due to the inactivity.

Why did you change the logo/theme of the preview site?

Again,this was meant for internal consumption, the bundle issue was show stopper for us. I shared it because I thought it might help others, I hope those changes gets merged upstream.

What else did you change?

I've merged some open pull requests, added icons and fixed some performance issue with the preview site, more specifically:

• Added Icon Sets

  • flag-icon-css
  • IcoMoon Free
  • Simple Icons
  • Logos
  • VS Code Icons
  • Remix Icons fill
  • Heroicons
  • BoxIcons

• Merged open PRs

  • Remove pId attribute from AI icons #310
  • Add support for stroke-based icons #284

• Improved Preview Site

  • Show the icon set next to the titles
  • Improve search performance by caching results
  • Copy the entire absolute URL so it can be easily inserted

Do you plan to keep maintaining it?

I'd rather have the changes merged upstream, but I will keep this maintained if saves others time and effort and the main react-icons remains in active.

Related Projects

• forked from react-icons
• react-svg-morph

Licence

MIT

• Icons are taken from the other projects so please check each project licences accordingly.