GatsbyでFeatherIconsを使う方法

Gatsbyでアイコンフォントを使うときのメモ。

使い方

アイコンフォントをインストールする。

npm install feather-icons --save

yarnの場合

yarn add feather-icons

コンポーネント内でインポート。

{feather.icons.facebook.toSvg()}だけだとHTMLがエスケープされて表示されるので注意。

// src/components/header.js
import React from "react"
import { Link } from "gatsby"
import feather from 'feather-icons'

const Header = () => {
  return (
<header id="header">
  <div className="container">
    <h1 className="logo">サイトタイトル</h1>
    <nav className="header-menu">
      <ul className="nav">
        <li><Link to="/about">メニュー</Link></li>
        <li>
          <Link to="/facebook-url">
            <div dangerouslySetInnerHTML={
              { __html: feather.icons.facebook.toSvg({width: 15,height: 13}) }
            } />
          </Link>
        </li>
      </ul>
    </nav>
  </div>
</header>
  )
}

export default Header

utilを使う場合

utilにコード入れて関数呼び出しの方が便利

// src/utils/feather.js
import React from 'react';
import feather from 'feather-icons';

export default (name, sizeArray) => {
  const featherString = feather.icons[name].toSvg({
    width: sizeArray[0],
    height: sizeArray[1]
  });
  return <div dangerouslySetInnerHTML={{ __html: featherString }} />;
};

コンポーネントで呼び出し

// src/components/header.js
import React from "react"
import feather from '../utils/feather';

const Header = () => {
  return (
<header id="header">
  {feather('facebook', ['30', '30'])}
</header>
  )
}
export default Header