Font awesome を Vue.js で使ってみよう

## Font awesome is 何？

公式によると
> ### Icons. Easy. Done.
>
> Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

なツールキットです！

画像を用いるよりアイコンを利用するほうが便利なときがありますよね。

Font awesome は可愛い・かっこいいアイコンがたくさん用意されていて、使い方も簡単なのでおすすめです！

（昔は Qiita 内でも使えたりしたんですよー）

:link: [Font awesome 公式](https://fontawesome.com/)



## Font awesome をインストール

まずはプロジェクトへ移動して。

```shell
> cd my-project
```

次のコマンドでインストールします。

- Yarn を使った場合

```shell
> yarn add @fortawesome/fontawesome-svg-core
> yarn add @fortawesome/free-solid-svg-icons
> yarn add @fortawesome/vue-fontawesome
```

- npm を使った場合

```shell
> npm install --save @fortawesome/fontawesome-svg-core
> npm install --save @fortawesome/free-solid-svg-icons
> npm install --save @fortawesome/vue-fontawesome
```



Font awesome が用意しているアイコンには他にもあります。

1. Solid（上でインストール済み）
2. Regular
3. Light（有料プランのみ）
4. Brands

必要な場合はインストールしましょう。

```shell

> yarn add @fortawesome/free-regular-svg-icons
> yarn add @fortawesome/pro-regular-svg-icons
> yarn add @fortawesome/free-brands-svg-icons
```


## Vue.js で使うには？

`main.js` に次のようにコーディングします。

```javascript:src/main.js
import Vue from 'vue'
import App from './App.vue'

/* ここから */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)
/* ここまで */

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
```

後はテンプレートにアイコン用のタグを埋め込むだけで使用することができます。



### 補足

```javascript
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
// ...
library.add(faCoffee)
```

この部分で `library` にアイコンを追加しているわけですが、複数追加したい場合はカンマ区切りで複数のアイコンを追加できます。

```javascript
import { faCoffee, faSpinner } from '@fortawesome/free-solid-svg-icons'
// ...
library.add(faCoffee, faSpinner)
```

アイコン一個一個だなんてめんどい．．．って人はこんな感じに全部追加できます。

```javascript
import { fas } from '@fortawesome/free-solid-svg-icons'
// ...
library.add(fas)
```

ちなみに私の設定は．．．

```javascript
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
// ...
library.add(fas, far, fab)
```

（~~めんどくさがり屋って言わないで~~）



## 確認しよう

About ページにアイコンを表示してみましょう！

```vuejs:src/views/About.vue
<template>
  <div class="about">
    <h1>This is an about page <font-awesome-icon icon="coffee" /></h1>
  </div>
</template>

```

アプリ起動して。

```shell
> cd my-project
> yarn serve
```

[http://localhost:8080/about](http://localhost:8080/about) にアクセスです！

![display font awesome.png](https://qiita-image-store.s3.amazonaws.com/0/135956/706e3836-e236-8046-bc92-73ee38f17d74.png)


いえい！


## まとめ

Vue.js は単一ファイルコンポーネントなので `import` したりコンポーネントとして登録したりひと手間あります。

~~普通にクラス指定で使えばいいんじゃない？とか思っちゃいますけど~~ まあ、このあたりは慣れになると思いますが、フレームワークの推奨する使い方に従って使ったほうがいいのかな？

:link: [Font awesome - How to Use Vue](https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs)



## インデックスページから来た人向け

アプリにアイコンが表示されると洗練された感じが出てきますよね～（思い込み）

これから少しづつ機能を増やしていきますので、よかったら他の記事も見てみてください！


:link: [Vue.js 初心者がなにか作りきってみる（願望）](https://qiita.com/kurararara/items/9c4f78eb42e657221c06)