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

WebページでFontAwesomeをSVGで使用する。

SVGを取得する

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

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

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

SVGを使用する

SVGは、useタグで使い回せます。定義部でSVGを定義してしまい、useタグで呼び出して使用します。CSSで文字色やサイズを指定します。

定義部

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

呼び出し部

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

CSS

.fas, .far, .fab {
  /* 領域を確保する */
  width: 1em;
  height: 1em;
  /* 前後の間隔を確保する */
  margin: 0 .25em;
  /* 文字色をあわせる */
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  /* 文字列と高さをあわせる */
  transform: translateY(.125em);
}
.fa-flip-horizontal {
  /* ひっくり返す */
  transform: translateY(.125em) scale(-1, 1);
}
.fa-search {
  /* 個別に指定するものがあれば、… */
}

ライセンスを記載する

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

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

<svg style='display:none;' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<!--
This SVG uses the font glyph of the following library.
Font Awesome Free 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コード上のライセンス記載は以下の通りです。

https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/js/all.js
/*!
 * 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)
 */

備考

FontAwesomeは、PNGとして埋め込むここともできます。ですが、今回は、PNGを使用しませんでした。以下の理由からPNGを使用せず、SVGを採用しました。

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

参考

コメント: 0

コメントを書く