A React component library for the latest Octicons

React Component for Octicons

react-component-octicons is a React component library for the latest Octicons (v7.x). This library wraps SVG icons and provides one React component . Built by and ready for TypeScript.

This library has no dependency because all

To see the catalog of icons, please visit the document page built with Storybook.

Installation

$ npm install --save react-component-octicons

Usage

<Octicon/> component has a required property name and optional properties zoom, style.

import * as React from 'react';
import { render } from 'react-dom';
import Octicon from 'react-component-octicons';

render(
    <div>
        // Normal size
        <Octicon name="alert" />

        // Twice bigger
        <Octicon name="star" zoom="x2" />

        // Size 100px x 100px
        <div style={{width: '100px', height: '100px'}}>
            <Octicon name="flame" zoom="100%" />
        </div>

        // Styled icon
        <Octicon name="flame" zoom="100%" style={{color: 'blue'}}/>
    </div>,
    document.getElementById('root'),
);

name property (required)

name is a symbol name for an icon. Symbol names are described in [Octicons document][Octicons].

zoom property (optional)

zoom is a string value and it represents the zoom factor of the icon.

• x{N}: N is a number (integer or float). Zoom the icon by xN (i.e. x4 means 4 times bigger than normal).
• N%: N is a number between 0~100. It means N% size of its parent element. So 100% means to fit to the parent element.

style property (optional)

style is a CSS property to specify the style of the icon itself. The styles are applied to underlying <svg> element.

className property (optional)

className is a class name of underlying <svg> element.

Typo Safety for Icon Names

name property of <Octicon/> is restricted to actual symbol names. For example, following code contains typo allow-right (arrow-right is correct).

// ERROR! 'allow-right' is typo of 'arrow-right'
render(
    <Octicon name="allow-right" />,
    document.getElementById('root'),
);

It falls into a compilation error.

test.tsx(5,17): error TS2322: Type '{ name: "allow-right"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Octicon> & Readonly<{ children?: ReactNode; }> & R...'.
  Type '{ name: "allow-right"; }' is not assignable to type 'Readonly<OcticonProps>'.
    Types of property 'name' are incompatible.
      Type '"allow-right"' is not assignable to type 'OcticonSymbol'.

Development

Following is a process to develop this library.

$ # Install all development dependencies
$ npm install

$ # Build the library and run all unit tests
$ npm test

$ # See manually if the library is working
$ # Open http://localhost:4321 in your browser
$ npm run smoke-test

$ # Run storybook locally on port 6006
$ npm run storybook

$ # Build storybook (catalog site) in docs/ directory
$ npm run build-storybook

GitHub