Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<Icon>コンポーネントの実装をインラインSVGからmask-imageに移行 #61

Merged
merged 1 commit into from
Dec 8, 2023

Conversation

ciffelia
Copy link
Member

@ciffelia ciffelia commented Dec 7, 2023

What

<Icon>コンポーネントの実装を、SVGをHTML内に埋め込む方式から、mask-imageでSVG画像を表示する方式に変更した。

Why

インラインSVGには次の問題があるため。

  • CSSで正しくサイズを指定しないとブラウザによって表示が崩れる。特にChromeで動くがFirefoxとSafariでは動かないことが多かった。
  • 同じページで同じSVGを複数回読み込むとHTML内に同じSVGが複数回出現する。これによりレンダリングコストが増加する。

Note

  • mask-imageでSVG画像を表示する場合、HTMLの読み込みからアイコン表示までのタイムラグが増加するが許容する。
  • SVGOによるSVGの最適化ができなくなるが許容する。
  • <img>でSVG画像を読み込む方式はSVGの色を変えられないため採用できない。

cf. https://zenn.dev/takepepe/articles/mask-image-icon

Close #43

@ciffelia ciffelia marked this pull request as ready for review December 8, 2023 14:43
@ciffelia ciffelia merged commit 3e0feae into main Dec 8, 2023
6 checks passed
@ciffelia ciffelia deleted the ciffelia/rewrite-icon-3 branch December 8, 2023 15:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

アイコンをインラインSVGから<img>mask-imageに移行する
1 participant