happiness (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) happiness

【chrome拡張機能】fontoawesomeを使う方法(yarnやnpm使用)

前提

  • npmやyarn使って開発している
  • node v12.8.0

方針

  • シンプルに導入する。あんまり記述量を増やしたくない(調べた限りでは最小限のマシな方法だと思う)
  • 他のライブラリに依存しなくて良い

結論

下記手順にて設定する。

  • fontawesomeのDL
  • javascriptを設定
  • scssを設定 なくていいかも説(自分の環境でキャッシュしているだけかもしれんので後で確認する)
  • manifest.jsonを設定

fontawesomeのDL

yarn add @fortawesome/fontawesome-free

つぶやき: 全然どうでもいいけど、fort awesomeなんだよね。要塞...。一瞬海賊版のライブラリかと思ってドキッとした

javascript

app/scripts/content.js

// 行頭にimportでok
import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/regular'

// solid使いたい人は↓使う
// import '@fortawesome/fontawesome-free/js/solid'


// 以下テスト用
const icon = document.createElement('i');
icon.setAttribute('class', 'far fa-copy');
document.appendChild(icon)
console.log(icon)

css なくてもできそう

app/styles/scss/content.scss

@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";

以下でもできるという話が至るところに書いてあったが、自分の環境だとだめだった。 なぜかはわからないので、余裕があったら調べたい。

@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";

manifest.json

  "content_scripts": [
    {
      "matches": [
        "https://*.co/*",
        "https://github.com/*"
      ],
      "js": [
        "./scripts/content.js"
      ],
      css: ["./styles/content.css" ]
  }],

参考URL

Font Awesome

https://github.com/sass/node-sass/issues/2537