- react-icons は nextjs の dev build と相性悪い
- react-icons/react-icons#786
- どうも特定の icon set が tree shaking 対応してなくて build 遅くするぽい
- 最近の ui library 同様に必要な分だけ code コピペして導入するのがよさそう
- で icones で icon 検索 => react component としての書き出しが楽そうだった
実際の利用シーンでは統一感出したいので、ある程度そろってる font awesome とか mui とかの collection を絞ってから探すのがいい。
- fontawesome https://icones.js.org/collection/fa
- material icon https://icones.js.org/collection/ic
- svg logo https://icones.js.org/collection/logos
- noto emoji https://icones.js.org/collection/noto-v1
/* eslint-disable react/self-closing-comp */
/* eslint-disable @stylistic/jsx-quotes */
import React, { SVGProps } from 'react'
// https://icones.js.org/collection/fa?s=sign&icon=fa:sign-in
export function FaSignIn (props: SVGProps<SVGSVGElement>) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1em" viewBox="0 0 1536 1280" {...props}><path fill="currentColor" d="M1184 640q0 26-19 45l-544 544q-19 19-45 19t-45-19t-19-45V896H64q-26 0-45-19T0 832V448q0-26 19-45t45-19h448V96q0-26 19-45t45-19t45 19l544 544q19 19 19 45m352-352v704q0 119-84.5 203.5T1248 1280H928q-13 0-22.5-9.5T896 1248q0-4-1-20t-.5-26.5t3-23.5t10-19.5t20.5-6.5h320q66 0 113-47t47-113V288q0-66-47-113t-113-47H936l-11.5-1l-11.5-3l-8-5.5l-7-9l-2-13.5q0-4-1-20t-.5-26.5t3-23.5t10-19.5T928 0h320q119 0 203.5 84.5T1536 288"></path></svg>
)
}