Next.js でうまく tree shaking できない react-icons の代わりに Icônes を使ってみる

Overview

https://icones.js.org/
https://github.com/antfu-collective/icones

• react-icons は nextjs の dev server と相性悪い
  • https://github.com/vercel/next.js/discussions/17977
  • https://github.com/react-icons/react-icons/issues/786
  • どうも特定の icon set が tree shaking 対応してなくて compile を遅くするみたい
  • 自分の環境でも特定 icon を利用したときだけ compile が 60 sec とかに跳ねて困った
• 代替を探したところ iconify の icon 検索特化サイト icones で icon 検索 => react component としての書き出しが楽そうだった
  • iconify と同じ contributor さんが作ってるみたい
  • 最近の ui library も component ごとに code 入れちゃう運用にシフトしてるので、もうこういうのでいいかなという気持ち
• 当然 https://icon-sets.iconify.design/ で検索でも同じことができるんだけど ↓ 理由からこっちにしてみた
  • icones のが個人的に探しやすい & url で共有しやすい
  • package 利用をしない割り切りで別サービス使ったほうが区別しやすい

Utility Links

実際の利用シーンでは統一感出したいので、ある程度そろってる 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

Usage

適当に ui/icons.tsx とか作ってコピペしまくって各所から import する感じでよきかな。

/* 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>
  )
}