How to2020.06.20

VueやReactでFontAwesomeをCSSの疑似要素で表示

VueやReactをFontAwesome使いたいことってありますよね。

FontAwesomeは基本的にHTMLでCSSを読み込んで指定のクラスをつければアイコンは表示されます。
ですが、VueやReactにはSVGを表示するための専用のライブラリがあります。

vue-fontawesome
react-fontawesome

使うアイコンだけ読み込んでコード量を減らすことができたり、VueやReactでFontAwesomeを使うときにはまずは使う第一候補のライブラリだと思います。

コンポーネントベースでアイコンを表示するだけなら問題ないのですが、CSSの疑似要素で表示する時に困ることがあります。

目次

FontAwesomeをCSSの疑似要素で表示
1. コンポーネントで表示する
コンポーネントを読み込んで疑似要素は使えない
1. アイコンがHTMLにコードとして入り込んでしまう
コンポーネントを文字列に変換してCSSで指定
CSSの疑似要素で表示する場合は素直にFontAwesomeのCSSを読み込む

FontAwesomeをCSSの疑似要素で表示

FontAwesomeをCSSの疑似要素で表示するには通常下記のようなコードで実現できます。

1
2
3
4
5
6
a:before {
  display: inline-block;
  font-family: Font Awesome\ 5 Free;
  font-weight: 900;
  content: 'アイコンの文字コード'
}

HTMLでCSSを読みこんで表示するならこれで問題ないのですが、vue-fontawesomeやreact-fontawesomeを使っている場合はどうでしょうか。

コンポーネントで表示する

Vueの場合を例にすると通常アイコンを表示するにはコンポーネントをライブラリからimportしてtemplateに記述するのが基本的な使い方です。

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <font-awesome-icon :icon="['fas', 'user-secret']" />
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

export default {
  components: {
    FontAwesomeIcon
  }
}
</script>

これでアイコンは表示できるのですが、CSSの疑似要素で表示できません。

どうすればいいんだろうとVue、React共にライブラリのREADMEを見ても擬似要素で表示する方法の記載がありません。

コンポーネントを読み込んで疑似要素は使えない

READMEに記載がないのでissueを探してみると「どうすれば疑似要素で表示できるか」という質問がVue、React共にありました。

https://github.com/FortAwesome/vue-fontawesome/issues/229
https://github.com/FortAwesome/react-fontawesome/issues/72

結論的にvue-fontawesomeやreact-fontawesomeではCSSの疑似要素で表示できないようです。
どのような場合に擬似要素で表示したいの、という旨の質問もコメントがありました。

確かにコンポーネントで表示しても実現は可能ですが、リストでリンクを表す矢印を表示する、みたいな繰り返しの要素の時だったり装飾目的のときはやはりCSSで表示したくなります。

アイコンがHTMLにコードとして入り込んでしまう

アイコンをCSSで表示したい理由はライブラリの使い方だとアイコンを表示する度、コードがHTMLに表示されることです。

実際のコードは下記のようなsvgです。

1
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>

1箇所2箇所くらいなら妥協しても良いのですが、このコードがいくつもHTMLに表示されるのはファイルサイズが大きくなります。
またSSRやSSGをしているような場合には生成されるHTMLにも気を配りたいはずです。

そんな要望をクリアするにはやはりコンポーネントでアイコンを表示するのは気が引けます。

コンポーネントを文字列に変換してCSSで指定

基本的に疑似要素で使えないのですが、コンポーネントを文字列に変換してCSSで指定する方法がissueで紹介されています。

https://github.com/FortAwesome/react-fontawesome/issues/72#issuecomment-408848755

Reactのコードですが下記のようにrenderToStringで表示する方法も存在するようです。

1
2
3
4
5
const ListItem = styled.li`
  &:before {
    content: url(data:image/svg+xml,${encodeURIComponent(renderToString(<FontAwesomeIcon icon={faGithub} />))});
  }
`;

個人的にはかなり無理矢理感があるので、そこまでしてライブラリ使う?という印象がありますが・・。

CSSの疑似要素で表示する場合は素直にFontAwesomeのCSSを読み込む

vue-fontawesomeやreact-fontawesomeを使って疑似要素が使えないことはこれまで書いたとおりです。

ではVueやReactでどうすればいいのかというと、**基本的にはFontAwesomeのCSSを読み込んで使うのが無難**だと思います。

ライブラリが存在するばかりにどうやって疑似要素使うの・・という問題が出てきてしまうのが、なんとも本末転倒というような感じがします。

もちろん先にも書いたようにライブラリを使うことで使用するアイコンを制限してコードサイズを減らすことができたり、ライブラリをimportしてすぐに使えるというメリットはありますが。

もしもFontAwesomeを擬似要素で表示する可能性があるのであれば、ライブラリは使わずにCSSを読み込んで使用する方向で進めるのが良さそうです。