docker+vite+vue3環境でfreeのfontawesomeを使い倒す

## docker+vite+vue3環境の構築
まず、ここを参考にdockerで構築してください。
docker compose upで初期ページが起動するところまで。

https://qiita.com/genimura/items/88742085294bd0b234a6

## Font Awesome Free Icons
インストールの前にFont Awesome(6.5.1)のFree Iconについて

https://fontawesome.com/search?o=r&m=free

+ 本家で検索するとfreeで使用できるのは2,037個
<img width="250" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/60b38ebd-839e-c525-4e49-2dca8063a216.png>

### Free Iconsは以下の３種類
+ Solid(1,390個）
<img width="400" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/860d944e-4cc4-c446-99fc-b04f8eb54505.png>

+ Regular（163個)
<img width="400" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/a2a0732b-18db-c6cf-2dea-3c075c9b8c79.png>

+ Brand(484個）
<img width="400" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/1583d747-e5fb-8cd8-de15-d6922fb49c4e.png>

# docker compose up でYou did it!を確認
```sh:
docker compose up -d
```
<img width="600" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/dd9f9e94-a33c-fdc6-6e29-fa49d1250d35.png>

# fontawesome関連のセットアップ
viteの即build感を体験するためにコンテナを起動した状態でインストール。

以下を参考に

https://fontawesome.com/docs/web/use-with/vue/

docker compose upの状態から開始するのでdocker compose execで
+ SVG Coreのインストール
```sh:
docker compose exec frontend yarn add @fortawesome/fontawesome-svg-core
```

+ Icon Packagesのインストール
SolidとRegularとBrandをまとめてインストール
```sh:
docker compose exec frontend yarn add @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons
```
+  Vue Componentのインストール
vue3用のコンポートネントをインストールします。
```sh:
docker compose exec frontend yarn add @fortawesome/vue-fontawesome@latest-3
```
これでfontawesomeを使用する準備ができました。

## main.jsにimport
+部分を追加する。

```diff_javascript:main.js
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

+ /* import the fontawesome core */
+ import { library } from '@fortawesome/fontawesome-svg-core'
+ /* import font awesome icon component */
+ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+ /* import icons */
+ import { fas } from '@fortawesome/free-solid-svg-icons'
+ import { far } from '@fortawesome/free-regular-svg-icons'
+ import { fab } from '@fortawesome/free-brands-svg-icons'
+ /* libraryにアイコンを追加 */
+ library.add(fas,far,fab)

import App from './App.vue'
import router from './router'

const app = createApp(App)
+ /* コンポーネントに追加 */
+ app.component('font-awesome-icon', FontAwesomeIcon)

app.use(createPinia())
app.use(router)

app.mount('#app')
```
※最後のコンポーネントに追加の部分
```js:
app.component('font-awesome-icon', FontAwesomeIcon)
```
の'font-awesome-icon'の部分は、
コンポーネントの名前なので短く'fa'などとしても構わないが、
fontawesomeページのコードが'font-awesome-icon'となっているため、
コピペしてそのまま使えるため、このままの方が良いです。

# 動作確認
+ FontAwesome.vueを作成
App.vueと同じ階層（src以下）にFontAwesome.vueを作成します。
Vueでの表記の仕方は３通りあります。
1. Array Syntax
1. String Syntax
1. Default Style

```js:FontAwesome.vue
<template>
  <body>
    <div>
      <h4>Solid</h4>
      <h6>Array Syntax</h6>
      <font-awesome-icon :icon="['fas', 'ghost']" size="3x" />
      <h6>String Syntax</h6>
      <font-awesome-icon icon="fa-solid fa-ghost" size="3x" />
      <h6>Default Style</h6>
      <font-awesome-icon icon="ghost" size="3x" />
    </div>
  </body>
</template>
```
+ main.jsでFontAwesome.vueを読み込むように変更する。

```diff_javascript:main.js
import './assets/main.css'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
import { createApp } from 'vue'
import { createPinia } from 'pinia'

- import App from './App.vue'
+ import App from './FontAwesome.vue'
//****以下略****
```
ブラウザではどの表記でも同様に表示されます。
<img width="150" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/ad756f31-ffe7-b5e0-ed5f-9bed3036193f.png>
+ SolidとRegularとBrandの比較
```js:FontAwesome.vue
<template>
  <body>
    <div>
      <h4>Solid</h4>
      <h6>Array Syntax</h6>
      <font-awesome-icon :icon="['fas', 'ghost']" size="3x" />
      <h6>String Syntax</h6>
      <font-awesome-icon icon="fa-solid fa-ghost" size="3x" />
      <h6>Default Style</h6>
      <font-awesome-icon icon="ghost" size="3x" />
    </div>
        <div>
      <h4>Regular</h4>
      <h6>Array Syntax</h6>
      <font-awesome-icon :icon="['far', 'newspaper']" size="3x" />
      <h6>String Syntax</h6>
      <font-awesome-icon icon="fa-regular fa-newspaper" size="3x" />
      <h6>Default Style</h6>
      <font-awesome-icon icon="newspaper" size="3x" />
    </div>
    <div>
      <h4>Brand</h4>
      <h6>Array Syntax</h6>
      <font-awesome-icon :icon="['fab', 'docker']" size="3x" />
      <h6>String Syntax</h6>
      <font-awesome-icon icon="fa-brands fa-docker" size="3x" />
      <h6>Default Style</h6>
      <font-awesome-icon icon="docker" size="3x" />
    </div> 
  </body>
</template>
```
BrandはなぜかDefault Styleでは表示されません。

<img width="400" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/c5f20a7e-a9a4-b7c5-bada-57415bba575f.png>

# fontawesomeの応用編
FontAwesome.vueを編集して確認してみてください。
## color
<img width="250" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/e18a9baa-6d84-03a6-0366-34c298a15720.png>

```js:FontAwesome.vue
<template>
  <body>
    <div>
      <h4>color</h4>
      <span style="font-size: 3em; color: Tomato;">
        <font-awesome-icon icon="fa-solid fa-camera"/>
      </span>
      <span style="font-size: 48px; color: Dodgerblue;">
        <font-awesome-icon icon="fa-solid fa-camera"/>
      </span>
      <span style="font-size: 3rem;">
        <span style="color: Mediumslateblue;">
        <font-awesome-icon icon="fa-solid fa-camera"/>
        </span>
      </span>
    </div>
  </body>
</template>
```

## size
<img width="480" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/6ad2cef4-7f0a-4e87-9019-8be791977631.png>

```js:FontAwesome.vue
<template>
  <body>
    <h4>size</h4>
    <div class="green">
      <font-awesome-icon icon="fa-solid fa-frog" size="1x" />
      <font-awesome-icon icon="fa-solid fa-frog" size="2x" />
      <font-awesome-icon icon="fa-solid fa-frog" size="3x" />
      <font-awesome-icon icon="fa-solid fa-frog" size="4x" />
      <font-awesome-icon icon="fa-solid fa-frog" size="5x" />
      <font-awesome-icon icon="fa-solid fa-frog" size="6x" />
      <font-awesome-icon icon="fa-solid fa-frog" size="7x" />
    </div>
  </body>
</template>
```


## 固定幅アイコン
アイコンの幅はフォントによってまちまちなのでfa-fwを追加すると幅が固定されます。
<img width="600" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/fea22f24-34e5-4f72-425d-9cbe41cbc886.png>

```js:FontAwesome.vue
<template>
  <body>
    <h4>fix width Icons</h4>
    <div style="font-size: 2rem;">
      <div><font-awesome-icon icon="fa-solid fa-skating fa-fw" style="background:DodgerBlue" /> Skating</div>
      <div><font-awesome-icon icon="fa-solid fa-skiing fa-fw" style="background:SkyBlue" /> Skiing</div>
      <div><font-awesome-icon icon="fa-solid fa-skiing-nordic fa-fw" style="background:DodgerBlue" /> Nordic Skiing</div>
      <div><font-awesome-icon icon="fa-solid fa-snowboarding fa-fw" style="background:SkyBlue" /> Snowboarding</div>
      <div><font-awesome-icon icon="fa-solid fa-snowplow fa-fw" style="background:DodgerBlue" /> Snowplow</div>
    </div>
    <div>
      <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><font-awesome-icon icon="fa-solid fa-arrow-left fa-fw" title="Back" /></span>
      <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><font-awesome-icon icon="fa-solid fa-arrow-right fa-fw" title="Forward" /></span>
      <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><font-awesome-icon icon="fa-solid fa-arrows-rotate fa-fw" title="Refresh" /></span>
      <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><font-awesome-icon icon="fa-solid fa-house fa-fw" title="Home" /></span>
      <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><font-awesome-icon icon="fa-solid fa-info fa-fw" title="Info" /></span>
      <span style="border: 1px solid silver; border-radius: 0.25em; padding: 0.5em;"><font-awesome-icon icon="fa-solid fa-download fa-fw" title="Download" /></span>
    </div>
  </body>
</template>
```
## Animating Icons
簡単なアニメーション
<img width=600 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/772ceb20-eadb-f672-3974-1fa351a5bf24.gif>

```js:FontAwesome.vue
<template>
  <body>
    <h4>Animating Icons</h4>
    <div class="fa-3x">
      <font-awesome-icon icon="fa-solid fa-heart" beat />
      <font-awesome-icon icon="fa-solid fa-circle-info" beat-fade />
      <font-awesome-icon icon="fa-solid fa-basketball" bounce />
      <font-awesome-icon icon="fa-solid fa-triangle-exclamation" fade />
      <font-awesome-icon icon="fa-solid fa-compact-disc" flip />
      <font-awesome-icon icon="fa-solid fa-bell" shake />
      <font-awesome-icon icon="fa-solid fa-cog" spin />
      <font-awesome-icon icon="fa-solid fa-compass" spin spin-reverse />
      <font-awesome-icon icon="fa-solid fa-spinner" spin-pulse />
    </div>
  </body>
</template>
```
## レイヤー
レイヤーを使いたい場合はmain.jsに設定追加が必要です。
```diff_javascript:main.js
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
- import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+ import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
/* import icons */
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
/* libraryにアイコンを追加 */
library.add(fas,far,fab)

import App from './App.vue'
import router from './router'

const app = createApp(App)
app.component('font-awesome-icon', FontAwesomeIcon)
/* レイヤーを使用する場合追加 */
+ app.component('font-awesome-layers', FontAwesomeLayers)
+ app.component('font-awesome-layer-text', FontAwesomeLayersText)

app.use(createPinia())
app.use(router)

app.mount('#app')
```

<img width=600 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82975/3cb40418-9e1c-a69c-c0ae-f011ed1f14d7.png>

```js:FontAwesome.vue
<template>
    <h1>レイヤーいろいろ</h1>
    <div></div>
    <div class="fa-4x">
      <h4>相対位置</h4>
      <font-awesome-icon icon="fa-solid fa-seedling shrink-8" transform="shrink-8" style="background:MistyRose" />
      <font-awesome-icon icon="fa-solid fa-seedling" transform="shrink-6 up-6" style="background:MistyRose" />
      <font-awesome-icon icon="fa-solid fa-seedling" transform="shrink-4 right-6" style="background:MistyRose" />
      <font-awesome-icon icon="fa-solid fa-seedling" transform="shrink-10 down-6" style="background:MistyRose" />
      <font-awesome-icon icon="fa-solid fa-seedling" transform="shrink-10 left-6" style="background:MistyRose" />
    </div>
    <div class="fa-4x">
      <h4>回転</h4>
      <font-awesome-icon icon="fas fa-magic" />
      <font-awesome-icon icon="fas fa-magic" transform="rotate-90" />
      <font-awesome-icon icon="fas fa-magic" transform="rotate-180" />
      <font-awesome-icon icon="fas fa-magic" transform="rotate-270" />
      <font-awesome-icon icon="fas fa-magic" transform="rotate-25" />
      <font-awesome-icon icon="fas fa-magic" transform="rotate--30" />
    </div>
    <div class="fa-4x">
      <h4>複数フォントのレイヤー</h4>
      <span class="fa-layers fa-fw" style="background:MistyRose">
        <font-awesome-icon icon="fa-solid fa-circle" style="color:Tomato" />
        <font-awesome-icon icon="fa-inverse fa-solid fa-times" transform="shrink-6" />
      </span>
      <span class="fa-layers fa-fw" style="background:MistyRose">
        <font-awesome-icon icon="fa-solid fa-bookmark" />
        <font-awesome-icon icon="fa-solid fa-heart fa-inverse" transform="shrink-10 up-2" style="color:Tomato" />
      </span>
      <span class="fa-layers fa-fw" style="background:MistyRose">
        <font-awesome-icon icon="fa-solid fa-play" transform="rotate--90 grow-4" />
        <font-awesome-icon icon="fa-solid fa-sun fa-inverse" transform="shrink-10 up-2" style="color:white"/>
        <font-awesome-icon icon="fa-solid fa-moon fa-inverse" transform="shrink-11 down-4.2 left-4" style="color:white" />
        <font-awesome-icon icon="fa-inverse fa-solid fa-star" transform="shrink-11 down-4.2 right-4" style="color:white" />
      </span>
    </div>
    
    <div class="fa-4x">
      <h4>フォントとテキストのレイヤー</h4>
      <font-awesome-layers class="fa-layers fa-fw" style="background:MistyRose">
        <font-awesome-icon icon="fa-solid fa-calendar" />
        <fa-layers-text class="fa-inverse" transform="shrink-8 down-3" style="font-weight:900"  value="27" />
      </font-awesome-layers>
      <font-awesome-layers class="fa-layers fa-fw" style="background:MistyRose">
        <font-awesome-icon icon="fa-solid fa-certificate" />
        <fa-layers-text class="fa-inverse" transform="shrink-11 rotate--30" style="font-weight:900" value="New" />
      </font-awesome-layers>
      <span class="fa-layers fa-fw" style="background:MistyRose">
        <font-awesome-icon icon="fa-solid fa-envelope" />
        <span class="fa-layers-counter" style="background:Tomato">1,419</span>
      </span>
    </div>
</template>

```
### 参考
以下を参考させていただきました。ありがとうございます。

https://qiita.com/itachi/items/e95ffd50dd4c1db9a85f

https://qiita.com/moromi25/items/0719f8abe8cb9f2807c2

https://www.aska-ltd.jp/jp/blog/231

https://www.webdesignleaves.com/pr/plugins/fontawesome_02.html

https://fontawesome.com/v6/docs/web/style/layer?#contentHeader

https://fontawesome.com/v5/docs/web/style/power-transforms