React Inline Icons

A collection of inline SVG React components from your favorite icon packs

About

React Inline Icons was created to solve several issues with using web font icon packs:

• Slow load times
• Large application size
• Additional requests for fonts
• Poor accessibility
• Limited styling
• Unexpected emoji replacement

You can find out more about the benefits of inline SVG over web font icon packs here:

• The Great Icon Debate: Fonts Vs SVG
• Icon Fonts vs SVG
• Seriously, Don’t Use Icon Fonts
• Font Awesome? Not awesome at all

By extracting the glyphs from an SVG web font, we are able to generate a collection of React components with the glyphs as inline SVGs.

Installation

You can install React Inline Icons from npm (with --save to automatically add it to your package.json and --save-exact to pin the version).

npm install react-inline-icons --save --save-exact

Usage

Using React Inline Icons is considerably easier than using a web font icon pack. Just import the icon you want to use, and put it in your markup.

Because the icons are distributed as individual files, you only need to include the ones you are actually using.

Importing

There's plenty of different ways to import our icons

// Import a single icon (this will only include the single module needed for this icon)
import IconName from 'react-inline-icons/dist/icon-pack/icon-name';

// Import an icon pack & namespace the ones you want (loads all icons from this pack into your bundle)
import { IconName } from 'react-inline-icons/dist/icon-pack';

// Import all icon packs (loads every icon pack into your bundle)
import ReactInlineIcons from 'react-inline-icons';

const { IconPack: { IconName } } = ReactInlineIcons;

React

import IconGithub from 'react-inline-icons/dist/font-awesome/icon-github';

function MyComponent() {
  return (
    <p>
      GitHub <IconGithub />
    </p>
  );
}

Styling

Because the icons are inline SVGs (as opposed to an image tag) you can style them using CSS or inline styles.

CSS

svg {
  width: 20px;
  height: 20px;
  fill: red;
}

Inline styles

<IconGithub width={20} height={20} fill="red" />

Sizing

You can define the icon sizes relative to the font-size or at an explicit size. This example uses LESS (css pre-processor), but you can do the same thing with SASS, SCSS or plain CSS.

@base-font-size: 14px;
@icon-size: 1em;

html,
body {
  font-size: @base-font-size;
}

// Default icon size is relative to the font size
svg {
  width: @icon-size;
  height: @icon-size;
}

h1 {
  font-size: @base-font-size * 2;

  // Override the default size for h1s with an explicit size not relative to the font
  svg {
    width: 20px;
    height: 20px;
  }
}