vue-fontawesomeのスタイルがcontent-security-policyにより適用されない問題

問題

とある PaaS で Vue.js のアプリを作っていたところ Font Awesome で描いたアイコン(SVG)だけ妙に巨大化する現象に遭遇しました。

調べてみたところ、index.html に自動的に content-security-policy header が付加されていました。
index.html にあらかじめ記述されている link 要素や style 要素には自動的に nonce 属性が付加されており読み込まれていたのですが、vue-fontawesome が動的に組み込む style 要素には nonce 属性が付かないため、読み込まれていないのが原因でした。

解決方法

vue-fontawesome には動的に CSS を適用するのをキャンセルするオプション autoAddCss がありました。

環境

• vue 3.2.21
• @fortawesome/vue-fontawesome 3.0.0-5

main.ts

import { createApp } from 'vue'
import App from '@/App.vue'
import store from '@/store'
import router from '@/router'
import '@/font-awesome' // Font Awesome 関連は font-awesome.ts に移す
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

createApp(App)
  .use(store)
  .use(router)
  .component('font-awesome-icon', FontAwesomeIcon)
  .mount('#app')

font-awesome.ts

import { config, library } from '@fortawesome/fontawesome-svg-core'
import { faCheck, faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'

// 以下の2行がポイント
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

library.add(faCheck, faChevronLeft, faChevronRight)

config.autoAddCss = false で CSS の自動挿入を無効化して、import で CSS を自力で読み込むことで、最初から index.html に style 属性として追加された状態になります。