react-icons はカテゴリ別で import する

React 向けの アイコンライブラリである、react-icons。

公式の Usage にも記載がある通り、基本的には使用するカテゴリ別に import して利用する。

code:ts

import { FaGithub } from 'react-icons/fa';

code:ts

import { FaGithub } from 'react-icons/all';

理由

code:sh

$ yarn dev

yarn run v1.22.11

$ next dev

event - compiled successfully

/xxxxxx/project/node_modules/react-icons/all.js:2

export * from './fa';

^^^^^^

SyntaxError: Unexpected token 'export'

at wrapSafe (internal/modules/cjs/loader.js:988:16)

at Module._compile (internal/modules/cjs/loader.js:1036:27)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)

at Module.load (internal/modules/cjs/loader.js:937:32)

at Function.Module._load (internal/modules/cjs/loader.js:778:12)

at Module.require (internal/modules/cjs/loader.js:961:19)

at require (internal/modules/cjs/helpers.js:92:18)

...

tsconfig の taeger は es6 なんだけどな....

ライブラリバージョン

一応 ライブラリのバージョンは以下の通り（抜粋）

code:package.json

"dependencies": {

"next": "11.0.1",

"react": "17.0.2",

"react-dom": "17.0.2",

"react-icons": "^4.2.0",

}

TODO