🐶

アイコンとsvg

2022/12/12に公開

HTML

Web

SVG

tech

アイコンをどう実装してる？という話。

svgにしている人が多いのかなと思うのですが、svgをどう使うかもいろいろ。
ざっと思いつくパターンでこんな感じ。

インラインで記述する
symbolタグとuseタグを使う
FontAwesome(javascriptライブラリ版)を使う
IcoMoonを使ってアイコンフォントにする

新規構築時に毎回悩みがちなので、それぞれの使い方・メリット・デメリットをまとめておこうと思います🤔

1. インラインで記述する

📝使い方

svgのソースコードをそのままhtmlに。
htmlに記述する際は不要な記述は削ってもOK。

<svg width="100" height="100" viewBox="0 0 100 100">
  <path d="..." />
  <!-- 省略 -->
</svg>

⭕️メリット

シンプルに使える
stroke-dasharray stroke-dashoffsetのアニメーションに対応できる

❌デメリット

複数箇所で使う時に一元管理できない
コンテンツのhtmlの可読性が低い

😎使い所

1箇所でしかつかわないアイコンなどはこれでOK
1~数ページのサイトなど

2. symbolタグとuseタグを使う

📝使い方

シンボルを定義して、htmlのどっかに非表示でまとめておいとく。idつけておく。

<svg style="display: none;" width="0" height="0">
  <symbol id="svg-hoge" width="100" height="100" viewBox="0 0 100 100">
    <path d="..." />
    <!-- 省略 -->
  </symbol>
</svg>

useタグでidを指定して表示！

<svg width="100" height="100" viewBox="0 0 100 100">
  <use href="#svg-hoge" />
</svg>

かに先生の記事がわかりやすいので置いておきます！🦀

⭕️メリット

アイコンを一元管理できる
コンテンツのhtmlの可読性が高い
stroke-dasharray stroke-dashoffsetのアニメーションに対応できる

❌デメリット

htmlに表示されていないsvgタグ(symbolタグのもの)が列挙される

😎使い所

アイコンの種類が少ない場合
1~数ページのサイトなど
アイコンじゃないけどサイトロゴとかに使うのも◎

3. FontAwesome(javascriptライブラリ版)を使う

FontAwesomeはCSS版もあります。
CSS版との違いは、svg + jsであること。(CSS版は、WebFont + CSS)
使い方はjavascriptのライブラリ版で説明していきます。
(CDNなどでも簡単に使用できますが、全てのフォントを読み込むのでリソース削減したい人はこちらがおすすめ)

📝使い方

公式のドキュメントがわかりやすいです。

ライブラリをinstallする

yarn install @fortawesome/fontawesome-svg-core

使うアイコンを選んでimportする

// core
import {dom, library} from '@fortawesome/fontawesome-svg-core';

// solid
import {faDog, faComments as fasComments} from '@fortawesome/free-solid-svg-icons';

// regular
// solidとregularで同じアイコンを使いたい場合、名前が重複するのでasで回避する
import {faComments as farComments} from '@fortawesome/free-regular-svg-icons';

library.add(faDog,fasComments,farComments);

dom.i2svg();

htmlで使う

<span class="fas fa-dog"></span>
<span class="fas fa-comments"></span>
<span class="far fa-comments"></span>

⭕️メリット

アイコンの管理・更新(増やしたり)のが簡単
デザインファイルにもフォントとして読み込めるので、svgの作成が不要
css, js　さらに、CDNやダウンロード、jsライブラリ版などの方法が用意されているので、取り入れやすい
フォントと同じように使えるので、テキストリンクなどの時にとても楽
stroke-dasharray stroke-dashoffsetのアニメーションに対応できる(svgの場合)
コンテンツのhtmlの可読性が高い(WebFontの場合)

❌デメリット

無料版は種類が限られている
コンテンツのhtmlの可読性が低い(svgの場合)
単色のものしか使えない(WebFontの場合)
stroke-dasharray stroke-dashoffsetのアニメーションに対応できない(WebFontの場合)

😎使い所

シンプルなアイコンのみを使う場合
ページ作成後も運用などでアイコンが増える・変更する場合
fontawesome + 特定の箇所はインラインなどの併用もありだと思います🤔

4. IcoMoonを使ってアイコンフォントにする

📝使い方

IcoMoonサイトのAppをひらく

https://icomoon.io/app/#/select

アイコンを選ぶ / 自作アイコンを追加する場合はsvgをimportする(Import Icons)
右下の Generate Font から設定画面へ
アイコン名とか、読み込んだsvgの調整もできる。詳しくは公式にのってます↓

https://icomoon.io/docs.html

ダウンロードする (Download)
ダウンロードしたファイルから、必要なもの(WebFontとcssなど)をコピーして使う
フォントファイルをダウンロードした時と同様に、フォントファイル(.woff,.svgなど)をサーバーにアップしてcssで指定すれば使えます。

アイコンが一覧できるdemo.htmlが入ってるのが地味に嬉しい。

⭕️メリット

フォントと同じように使えるので、テキストリンクなどの時にとても楽
アイコンの自由度が高い (自作アイコンが使える)
複数のアイコンセットからアイコンが選べるので、作成しなくてもある程度のアイコンが揃っている
アイコンを一元管理しやすい
コンテンツのhtmlの可読性が高い

❌デメリット

アイコンフォントの更新をするのにひと手間かかる
自作のものはsvgを用意する必要がある
単色のものしか使えない。
stroke-dasharray stroke-dashoffsetのアニメーションに対応できない

😎使い所

アイコンにもこだわる・自作アイコンを使う場合

結局・・・？

結局どれがいいのか迷いますが・・・

標準的なアイコンのみの時はFontAwesome
自作アイコンが多い・頻出する場合はIcoMoon
ページ数・アイコン数が少ない時はsymbol + インラインでsvgを使う

が今のところ私の中ではベターかな〜と思っています。難しい🥺
以上、アイコンに関してのメモでした〜〜〜🙌

1. インラインで記述する

📝使い方

⭕️メリット

❌デメリット

😎使い所

2. symbolタグとuseタグを使う

📝使い方

⭕️メリット

❌デメリット

😎使い所

3. FontAwesome(javascriptライブラリ版)を使う

📝使い方

⭕️メリット

❌デメリット

😎使い所

4. IcoMoonを使ってアイコンフォントにする

📝使い方

⭕️メリット

❌デメリット

😎使い所

結局・・・？

Discussion