rails6 webpackerでmaterial-iconsを使う

rails6 webpackerでmaterial-iconsを使う

rails6でwebpackerでmaterial-iconsを使うまでの手順を記述してます。Railsのバージョンは6.1.1を使用してます。

環境

  • OS CentOS Linux release 7.9.2009 (Core)
  • Ruby 2.7.2
  • Rails 6.1.1
  • rbenv 1.1.2-40-g62d7798

material-iconsインストール

yarnでインストールしておきます。

webpacker使い方

まずは、「app/javascript/packs」配下に「css」ディレクトリを作成します。

作成した「css」ディレクトリ内に「application.css」を作成して、以下の通りに編集します。

次に、「app\javascript\packs」にあるwebpackのデフォルトのエントリーポイント「application.js」に下記を追加します。

font移動

このまま、ビルドするとfontが見つからないとエラーになるので、

「node_modules/material-icons/iconfont」配下にあるフォントを作成した「css」ディレクトリ配下に移動させます。

最後はビルドすれば、完了です。

これで「material-icons」が使用できるようになります。