FontAwesome を SVG で使用する【JavaScript なし】

2019/05/102023/03/14

はじめに

「FontAwesome を JavaScript なしで使用する方法」または、「FontAwesome の一部のアイコンを使用する方法」です。

JavaScript 無効環境で FontAwesome を使用したページを閲覧すると文字化けしたような表示になるのを目にします。そうなるのを防ぐため、 FontAwesome を JavaScript なしで使用します。または、 FontAwesome は、使用しないアイコンも含めてすべてのアイコンを読み込むため、数個のアイコンのみを使用する場合、不必要なコストが掛かります。それを回避するため、必要なアイコンのみを読み込んで使用します。

FontAwesome は、上記の方法を PNG 画像でも実現できます。ですが今回は、後述する理由により SVG を利用して実現します。

ちなみに、 JavaScript 無効環境だと次のように文字化けします。

SVG を取得する

GitHub に SVG ファイルが格納されているので取得できます。

GitHub - FortAwesome/Font-Awesome
- svgs フォルダにスタイル毎で格納されています
- solid（塗りつぶし）、regular（線・標準の太さ）、brands（ブランド）

SVG のファイル名は、公式のサイトから検索できます。

Icons | Font Awesome
- ファイル名とスタイルは、個別のページで確認できる
- 例：https://fontawesome.com/icons/search?style=solid
  - ファイル：search
  - スタイル：solid
  - GitHub：https://github.com/FortAwesome/Font-Awesome/blob/master/svgs/solid/search.svg

SVG を使用する

SVG は、 <use> で複数回呼び出して使い回せます。定義部で SVG を定義して、 <use> で呼び出して使用します。 CSS で文字色やサイズを指定します。使用箇所に直接記述することもできますが、後述するライセンス記載場所が問題となるため、 <use> で使いまわして使用します。

定義部

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
  <defs>
    <symbol id="fa-search" viewbox="..."><path d="..."/></symbol>
    ...
    <symbol id="fa-..." viewbox="..."><path d="..."/></symbol>
  </defs>
</svg>

※ symbol 単位で SVG を定義する

具体的には、次のような書き換えを使用するファイル毎に行います。

例：search.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 ... 128-128 128z"/></svg>
↓↓↓
<symbol id="fa-search" viewbox="0 0 512 512"><path d="M505 442.7L405.3 ... 128-128 128z"/></symbol>

呼び出し部

<svg class="fa fa-search"><use href="#fa-search"/></svg>

CSS

.fa {
  /* 領域を確保する */
  width: 1em;
  height: 1em;
  /* 前後の間隔を確保する */
  margin: 0 0.25em;
  /* 文字列と高さをあわせる */
  vertical-align: -0.125em;
  /* 文字色をあわせる */
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}
.fa-flip-horizontal {
  /* ひっくり返す */
  transform: scale(-1, 1);
}
#fa-search {
  /* 個別に指定するものがあれば、記載する（SVG に関わるもの、色など） */
  /*color: #666; */
}
.fa-search {
  /* 個別に指定するものがあれば、記載する（領域に関するもの） */
  /* 変更不要ならclassを追加しなくても良い */
  /*width: 2em; */
  /*height: 2em; */
  /*float: right; */
}

ライセンスを記載する

CSS 版や JavaScript 版は、コードの先頭にライセンスが記載されているため、新たに追記する必要はありません。ですが、 SVG を抜き出す場合、使用者側でライセンスを記載する必要があります。

今回は、「JavaScript のライセンス記載と同程度の記載」でかつ「部分的に組み合わせて使用されていることがわかる記載」とするため、次のようにライセンスを記載します。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
<!--
This SVG is used in combination with some of the following libraries:
Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->
  <defs>
    ...
  </defs>
</svg>

※バージョンは適時変更して下さい
※サイト内に「権利表記」のようなページを作成して、そこに記載することもできます

ちなみに、 JavaScript コード上のライセンス記載は以下の通りでした。

/*!
 * Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/js/all.js

変更履歴

もしも、 SVG に変更を加えた場合、「CC BY 4.0ライセンス」に従って変更を示す必要があります。 SVG ファイル圧縮した場合の例を次に示します。

<!--
This SVG is used in combination with some of the following libraries:
Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
Change history: SVG is compressed.
-->

SVG を個別に使用する

SVG を個別に利用したい場合、SVG ファイル毎にライセンスを記載しておくと漏れなく記載できます。 SVG ファイルの記載例を次に示します。

<!--
This SVG uses some of the following library:
Font Awesome Free 5.8.2 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 ... 128z"/></svg>

この形式であれば、 CSS で背景画像として利用することもできます。

.search-text {
  background: url("data:image/svg+xml;base64,PCEtL...2Zz4=") 4px center no-repeat;
}

※BASE64変換時に付加したライセンス記載が削除されていないことを確認してください

個別の SVG では、 CSS が効いてきません。そのため、 SVG ファイルで直接幅高さ・塗り色を指定する必要があります。 width, heightで幅高さ、fill, stroke で指定できます。指定例を次に示します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="32" height="32"><path fill="#666" d="M505 ... 128z"/></svg>

※ rgba() で透過もできます（例：rgba(0, 0, 0, 0.6)）
※線や図形単位で別の色を指定することもできます

FontAwesome を使用しないと言う選択肢

ここまで、 FontAwesome の使用について説明してきました。ですが、 FontAwesome の使用にこだわらないと言う考え方もあります。 SVG を個別に使用する前提であれば、著作権表示なし、ライセンス表記なしで使用できる SVG 素材が存在します。 FontAwesome ほど豊富な素材はないかもしれませんが、探せば自分が必要としている素材だけを集めることができるかもしれません。そのような、ライセンス記載不要な素材であれば、ライセンス記載なく使用できます。また、 Inkspace などのフリーソフトを使用して SVG を自作することも考えられます。

「商用利用可」「著作権表示なし」で利用できる素材集として次のサイトがあります。

※ネット上には、個別のページで素材を配布しているサイトもあります。
　調べ方次第では、目的にあった SVG が発見できるかもしれません。

備考

FontAwesome は、アイコンを PNG 画像に変換して使用することができます。ですが今回は、 PNG 画像を使用しませんでした。 PNG 画像を使用しないで SVG を採用した理由は次の通りです。

色の動的変更が難しい
- SVG なら CSS で簡単に実現できる
サイズの動的変更が難しい
- SVG なら CSS で簡単に実現できる
SVG でも PNG でも対してデータ容量は大差ない
- PNG 画像は、大きな画像だとデータ容量が巨大になる
- アイコンは小さいため、データ容量の差は対してない
ライセンス記載場所が難しい
- SVG ならば、定義部にライセンス記載できて記載漏れがない
- SVG ならば、XML形式のため、最悪個別にコメントデータとして埋め込める

※ SVG であれば、 SVG 内の線や領域を個別に着色することも可能です。

バグ取りの日々