これまでサイト制作でアイコンを使う時は
| 方法 | メリット | デメリット |
|---|---|---|
| pngで背景画像 | 簡単 | 拡大縮小に弱い、色変えできない |
| SVGで背景画像 | 拡大縮小に強い | 色変えできない |
| アイコンフォント | すでにあるものを取り入れるなら簡単 色変えできる、拡大縮小に強い |
カスタムの手間がかかる |
| SVGをそのまま埋め込む | 色変えできる、拡大縮小に強い | HTMLのSVGのコードが多い |
| left | right | center |
| aligned | aligned | aligned |
ということで、どれも一長一短だな・・・と思ってたんですが、どこかで見かけたmask-imageが一番よさそうだったのでメモ
SVG＋mask-imageの使い方
::afterに指定する前提です
button::after {
content: "";
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
width: 26px;
height: 4px;
mask-image: url('画像パス');
mask-size: 100% auto;
mask-repeat: no-repeat;
mask-position: center;
background: blue;
}
SVG＋mask-imageのメリット・デメリット
メリット
色変えできる
→backgroundを変えればOK
もちろんtransitionもできる
拡大縮小に強い
→SVGなので！
mask-sizeは指定した方が良さそう
ないと崩れるブラウザがある
SVGは背景画像のようにして使うので、HTMLにSVGのコードを書かなくて良い
→base64でもいいんですが、そこまでじゃない時はSVGの画像パスを書くのが良さそう
参考にしたサイト
https://zenn.dev/kagan/articles/cf3332462262f1
https://manamiw.com/svg-icon-color/