react-icon-atlas v0.4.1

React Icon Atlas

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

This particular project uses large SVG sprite sheets to distribute the vector graphics and a small javascript footprint to render referencing SVGs in React. The primary motivation is to reduce the initial download for the user, to begin rendering and have the application responsive quickly. Icons are usually additional visual cues but not absolutely required, so icons will appear after the SVGs have been downloaded some time later. This has die additional benefit of being able to cache the SVG sprite sheet which will reduce bandwidth use on subsequent visits.

Remember to always serve javascript and SVGs compressed using gzip or Brotli

This project was heavily inspired by react-icons.

Installation

NPM

npm install react-icon-atlas --save

Usage

import { FaBell } from 'react-icon-atlas/fontawesomeicons';

const MyComponent: FunctionComponent = () => {
    return (
        <h1> This is the FontAwesome Bell icon <FaBell /> </h1>
    )
}

NOTE: Each Icon package has it's own subfolder under react-icon-atlas you import from.

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

Every icon package exports the resulting SVG package name as {subfolder}PackageName like FontawesomeiconsPackageName. Additionally for every icon like FaBell there is an Id-version like FaBellId That enables you to pass the Ids or render the icons yourself.

import { FontawesomeiconsPackageName, FaBellId } from 'react-icon-atlas/fontawesomeicons';
import { Icon } from "react-icon-atlas/Icon";

const MyComponent: FunctionComponent = () => {
    return (
        <>
        <p> This is a manually rendering of the bell icon <svg><use href={`${FontawesomeiconsPackageName}#${FaBellId}`}></use></svg> </p>
        <p> This will render the <FaBell /> exactly the same <Icon pkg={FontawesomeiconsPackageName} ico={FaBellId} /> </p>
        </>
    )
}

Every icon will pass on SVG-properties. Additionally you can specify any of the following properties.

View the documentation for further usage examples and how to use icons from other packages.

Icons

TODO:

CSS

Each Icon has the atlas-icon class, which you can use to style all icons globally. For a default style you can import the _atlasStyle.scss or the AtlasStyle.css

@import "node_modules/react-icon-atlas/atlasStyle";

Related Projects

• react-icons

Licence

MIT

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