JMDC TECH BLOG

JMDCのエンジニアブログです

トップ > アイコンのデフォルトサイズを 1em から 1lh にする

アイコンのデフォルトサイズを 1em から 1lh にする

今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2025 5日目の記事です。

はじめに

React のプロジェクトでアイコンを表示する場合、 SVG ファイルから React コンポーネントを生成することがしばしば行われます。弊社でも、いくつかのプロジェクトで SVGR を使用しています。

最近、 SVGR で生成するアイコンのデフォルトサイズを 1em から 1lh に変更したので、今日はその話を紹介します。

SVGR の --icon オプション

SVGR は SVG ファイルを元に React コンポーネントのコードを出力する OSS のツールです。 CLI も提供されていて、--icon オプションでアイコンのサイズを指定できます。

--icon オプションを指定すると、 width と height 属性がその値に置き換わります。単に --icon と指定した場合は 1em になります。

// `svgr --icon` で生成した React コンポーネント
const SvgHomeIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg
    width="1em"
    height="1em"
    viewBox="0 0 24 24"
    {...props}
  >
    <path d="..." />
  </svg>
);

ちなみに、 --icon オプションを指定しない場合、元の SVG ファイルの width と height の値がそのまま使われます。これはアイコンとしてはあまり使いやすくありません。Figma などのデザインツールからエクスポートした SVG には通常、具体的なサイズ指定（width="24" height="24" など）が含まれます。採用しているデザインシステムのルールにもよりますが、一般に、アイコンは隣り合うテキストとだいたい同じ大きさで表示することが多いので、デフォルトは相対サイズになっている方が実用的です。

1em の課題

そういうわけで、 SVGR の --icon オプションのデフォルト値は 1em となっています。ところが、1em はフォントサイズを基準とした単位なので、行の高さに対してサイズが合わず、中央揃えのために調整が必要になります。また、アイコンにセーフエリアを設けている場合は、 1em ではアイコンがやや小さく見えてしまうことがあります。

そこで lh の出番です。これは文字サイズではなく行の高さを基準とする相対単位です。

画像の引用元: https://css-tricks.com/lh-and-rlh-units/

css-tricks.com

SVGR なら、アイコンの生成コマンドを以下のように変更するだけで対応できます。

- svgr ... --icon
+ svgr ... --icon 1lh

ブラウザサポートと導入のタイミング

lh は比較的新しい CSS 仕様ですが、主要ブラウザでは既にサポートされています。

lh unit | Can I use... Support tables for HTML5, CSS3, etc

弊社のプロジェクトでは長らく 1em を使用していましたが、 2025年10月に Safari 16.3 以下のサポートを終了したことに伴い、 1lh に変更しました。

まとめ

この記事では、 SVGR で出力するアイコンのデフォルトサイズを 1em から 1lh に変更した話を紹介しました。アイコンがデフォルトで適切な大きさになり、中央揃えのための手間を削減できました。新しい単位 lh を活用していきましょう。

明日6日目は、甲さんによる「CloudWatch Logsをパーティショニングしつつ雑にS3に保存する方法」です。お楽しみに！ JMDCでは、ヘルスケア領域の課題解決に一緒に取り組んでいただける方を積極採用中です！フロントエンド /バックエンド/ データベースエンジニア等、様々なポジションで募集をしています。詳細は下記の募集一覧からご確認ください。 hrmos.co まずはカジュアルにJMDCメンバーと話してみたい／経験が活かせそうなポジションの話を聞いてみたい等ございましたら、下記よりエントリーいただけますと幸いです。 hrmos.co ★最新記事のお知らせはぜひ X（Twitter）、またはBlueskyをご覧ください！ twitter.com bsky.app