React で Octicon を使うためのコンポーネントライブラリ書いた

Octicons は GitHub がオープンソースで配布しているアイコンセットです．

Octicons は以前はウェブフォントを利用してつくられていたのですが，最新のnpm の octicons パッケージの中身を見る限りでは，最近では SVG での配布になったようです．以前は class に octicon octicon-alert などを指定すれば使えていたのですが，それができなくなってしまいました．

React を使って書いているので Octicon の React 向けコンポーネントを探してみると react-octicon がヒットするのですが，

ウェブフォント時代の古い Octicon（v4系）のみサポート
webpack が必須（CSS ローダを使って Octicon の CSS をロードしている）

という点で私のユースケースに合いませんでした．

動いた
— ドッグ (@Linda_pp) 2018年1月5日

というわけで，最新の Octicon（v7.0.1）で動く React コンポーネントライブラリをつくりました．

github.com

特徴は

依存なし: octicons パッケージの SVG を React コンポーネント内に直接埋め込んでいるので依存パッケージなし．よって特定の bundler にも依存していない
TypeScript 対応済み．本体も TypeScript で書かれてます

使い方

npm パッケージとして配布しています．

$ npm install --save react-component-octicons

でインストールできます．

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

render(
    <div>
        <Octicon name="alert" />
        <Octicon name="star" />
    </div>,
    document.getElementById('root'),
);

のように <Octicon/> コンポーネントとして使えます．ここでは TypeScript で書いていますが，もちろん JavaScript からも使えます．

name プロパティに Octicon のアイコン名を指定するだけです．

追記：アイコンのサイズを変えられるようになりました

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>
    </div>,
    document.getElementById('root'),
);

x{N}（{N} は整数か小数点数）とすると N 倍のサイズのアイコンになります（例：x4, x1.5）．また，{N}%（{N} は0〜100）とすると親の要素に対して N% のサイズになります．なので 100% を指定すれば親のサイズに合わせたサイズのアイコンになります．

Typo Safety

name プロパティは文字列リテラル型で定義しているので，間違ったアイコン名を指定しているとコンパイルエラーになります．

render(
    <Octicon name="allow-right" />,
    document.getElementById('root'),
);

例えば上記のアイコン名は arrow-right を allow-right にタイポしていますが，これをコンパイルすると

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'.

のようにエラーになります．