SVGアイコンをHTMLで使ってみる

2024.05.10 09:00
2024.05.06 12:22
SVGアイコンをHTMLで使ってみる

Webサイトにアイコンを入れる方法を探ってみました。

アイコンをいれる方法はいくつかあるみたいで、有名なのは「FontAwesome」です。
でもバージョンが変わったり使えないものが出てきたりと、どこかで使えなくなる可能性があるので、別な方法を探したところ、SVGファイルを直接セットして読み込むのが良いということになりました。

ただ問題はSVGファイルを用意するのが大変ということですが、
大量のSVGアイコンをフリーで使えるサイトがあったので解決しました。
サイトはこちらの「MingCute Icon」というところ。

https://www.mingcute.com

このサイトの右上に「Download」があるので、
そこをクリックすると全種類ダウンロードできます。

その中にあるSVGアイコンをhtmlと同じ場所にいれて
以下のコードを書いてやればOK!簡単ですね。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    .icon1 {
      width: 16px;
    }
    .icon2 {
      width: 1em;
    }
  </style>
</head>
  <body>
    <img src="close_line.svg" class="icon1">
    <img src="close_line.svg" class="icon2">
  </body>
</html>

デモはこちら

大きさはCSSで指定できます。楽ですね。

色を変える場合はfilterを使います。
ただし指定がちょっと特殊なので、ツールを使います。

https://angel-rs.github.io/css-color-filter-generator

#cc0000のようにカラーコードで指定すると、
filter記述で返してくれて、すぐコピーも出来ます。
これをcssに貼り付けると色指定が可能です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    .icon1 {
      filter: invert(22%) sepia(99%) saturate(7468%) hue-rotate(358deg) brightness(106%) contrast(118%);
      width: 2em;
    }
    .icon1:hover {
      filter: brightness(0) saturate(100%) invert(57%) sepia(63%) saturate(471%) hue-rotate(138deg) brightness(97%) contrast(86%);
    }
  </style>
</head>
  <body>
    <img src="close_line.svg" class="icon1">
  </body>
</html>

デモはこちら

マウスオーバー時の色変更ももちろんOK。楽ですね！

今回は以上です！