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.

Sign up for GitHub

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

Jump to bottom

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

Closed
ciffelia opened this issue Dec 3, 2023 · 2 comments · Fixed by #61
Closed

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

ciffelia opened this issue Dec 3, 2023 · 2 comments · Fixed by #61
Assignees
@ciffelia

Comments

@ciffelia
Copy link
Member

ciffelia commented Dec 3, 2023

No description provided.

@ciffelia ciffelia self-assigned this Dec 3, 2023
@ciffelia
Copy link
Member Author

ciffelia commented Dec 5, 2023

メモ：もともとインラインSVGを使っていたのはcurrentColorで色を変えるため。ただこれはmask-imageを使えばインラインSVGを使わずとも実現できる。インラインSVGはブラウザによって微妙に挙動が違って困ることが多いのでやめる。

今後は、色を変えたいものは<Icon>コンポーネントを使いmask-imageで色を変える。それ以外は普通に<img> で読み込めば良い。SVGOでの最適化は不可能ではないが面倒なので諦める。

@ciffelia
Copy link
Member Author

ciffelia commented Dec 5, 2023

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

@ciffelia ciffelia mentioned this issue Dec 7, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ciffelia ciffelia

Labels
None yet
Projects
None yet
Milestone
No milestone
1 participant
@ciffelia