nlog

とめどなく流れるよだれ

SVGアイコンボタン

f:id:namikuguri:20180220000440p:plain

SVGアイコンボタン | JSFiddle

ポイントは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; /* インタラクションに合わせて色が変えられるように */
}

ちなみにこれは人のコードを見て盗んだ技術。いろいろ見てると良いことある。