FontAwesomeのフォントをSVGで使用する

FontAwesomeをSVGで使用する。

SVGを取得する

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

SVGを使用する

SVGは、useタグで使い回せます。定義部ですべて定義してしまい、useで呼び出して使用します。

定義部

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

呼び出し部

<svg class="icon icon-..." aria-label='...' role='img'><use xlink:href="#icon-..."/></svg>

ライセンスを記載する

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を採用しました。

  • 色の動的変更が難しい
  • サイズの動的変更が難しい
  • ライセンス記載場所が難しい

参考

コメント: 0

コメントを書く