🐛 fix: アイコンの font-weight を 500 に固定し親要素からの継承を防ぐ

[touyou]

概要

goodpatch/sparkle-design-internal#198 の修正です。

Button の character-*-bold-pro（font-weight: 700）がボタン全体にかかり、icon の span にも継承されることで、アイコンが太く（もっさり）描画されるバグを修正します。

原因

• Material Symbols Rounded は wght 500 のみ読み込んでいる（SparkleHead.tsx）
• .icon-*-fill-* クラスは font-variation-settings: 'wght' 500 を指定しているが、font-weight 自体は未指定のため親から 700 を継承する
• 継承された font-weight: 700 に対して 500 のフォントフェイスしかないため、ブラウザが**疑似ボールド（faux bold）**で描画していた
  • font-variation-settings は疑似ボールドを抑止できない（合成は font-weight プロパティとフェイス宣言の差分で発動するため）

修正内容

• Icon の span に font-medium（font-weight: 500）を明示付与
  • アイコンの weight は 500 統一という設計意図をコンポーネント側で保証
  • Button に限らず、bold な文脈に置かれた全アイコンで再発を防止
• className からの font-weight 上書きは tailwind-merge により引き続き可能
• フォントウェイトに関するテストを 2 件追加

確認

• pnpm test: 611 passed（新規 2 件含む）
• tsc --noEmit: pass
• prettier: pass

Fixes goodpatch/sparkle-design-internal#198

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
sparkle-design	Ready	Preview, Comment	Jun 5, 2026 7:52am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9e78c783-a67e-439b-b76b-8a1eec175f7b

📥 Commits

Reviewing files that changed from the base of the PR and between 4628fe3 and a5adc1f.

📒 Files selected for processing (2)

• src/components/ui/icon/index.test.tsx
• src/components/ui/icon/index.tsx

---

Walkthrough

Icon コンポーネントの span に font-medium（500）を明示的に付与し、親要素からのフォント継承によるfaux bold を防ぎます。実装変更とフォントウェイト仕様の検証テストが追加されました。

Changes

Icon フォントウェイト固定化

レイヤー / ファイル	説明
Icon フォントウェイト実装とテスト src/components/ui/icon/index.tsx, src/components/ui/icon/index.test.tsx	Icon の span に font-medium を明示的に付与し、親要素由来の font-weight 継承を防ぎます。フォントウェイト検証テストが追加され、デフォルトで font-medium が付与されること、および className による上書き（例：font-bold）が動作することを確認します。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 アイコンのウェイトを整えて、
font-medium で五百に固定。
親からの継承は避けつつ、
className で上書きも可能。
スタイルよく、シンプルに。 ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	プルリクエストのタイトルは「アイコンの font-weight を 500 に固定し親要素からの継承を防ぐ」という変更内容を正確かつ簡潔に要約しており、主要な変更を明確に表現しています。
Description check	✅ Passed	プルリクエストの説明は概要、原因分析、修正内容、確認結果などが網羅されており、変更の背景と目的が明確に記述されています。テンプレートの必須セクションは全て含まれています。
Linked Issues check	✅ Passed	本PRはIssue #198の要件を完全に実装しており、Icon コンポーネントに font-weight: 500 を明示的に付与することで、Button等の親要素からの font-weight 継承を防止し、アイコンの視認性を向上させています。
Out of Scope Changes check	✅ Passed	変更内容は Icon コンポーネントの font-weight 固定とそのテスト追加に限定されており、Issue #198の要件「アイコンとラベルのウェイト指定を分離する」に完全に範囲内です。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/198-icon-font-weight-500

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR fixes a visual bug where icons could render with faux-bold when placed inside bold text contexts (e.g., Button), by explicitly setting the icon’s font-weight to 500 at the component level and adding regression tests.

Changes:

• Add font-medium to the Icon root <span> to prevent inherited bold font-weight from triggering faux-bold rendering.
• Add unit tests to ensure font-medium is applied by default and remains overridable via className (via tailwind-merge).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
src/components/ui/icon/index.tsx	Explicitly applies font-medium to prevent inherited bold weight from affecting icon rendering.
src/components/ui/icon/index.test.tsx	Adds tests covering default font weight application and override behavior via className.