SVGアイコンボタン
ポイントは2つ。
display: inline-flex
でアイコンをコンテナーの中心に配置- マウスオーバーなど、インタラクションに合わせて色が変えられるように
svg
要素のfill
プロパティにはinherit
を指定
.iconButton { display: inline-flex; /* アイコンをコンテナーの中心に配置 */ padding: 1rem; cursor: pointer; box-sizing: border-box; fill: black; } .iconButton:hover { fill: gray; background-color: whiteSmoke; border-radius: 4px; transition: .3s; } .iconButton__image { width: 2rem; height: 2rem; fill: inherit; /* インタラクションに合わせて色が変えられるように */ }
ちなみにこれは人のコードを見て盗んだ技術。いろいろ見てると良いことある。