LoginSignup
0
0

More than 1 year has passed since last update.

RailsでMaterial Design Iconsを使おう!(もともと使っていたGemが削除されたので新しいのを作ったという話)

Posted at

とにかくRailsでMaterial Design Iconsつかいたい!
という方はインストールと使い方を読んでもらえれば大丈夫です。
Gem作った背景などはそのあとに続きます。

インストール

Gemfileに以下を追加します。

gem 'rails_material_design_icons'

を追加し、bundle install を実行します。

使い方

application.css`で、cssファイルをインクルードします。

/*
 *= require materialdesignicons
 */

おめでとう! 公式サイトで利用可能なアイコンをチェックしましょう。
https://materialdesignicons.com/

Sass

以下を application.scss ファイルに追加してください。

@import "materialdesignicons";

Gem作った背景

仕事でなんとなくあるMaterial Design IconsのGemを使っていたが、ある日それがRubygemsから削除されました。

使っていたのはこちらのMaterial Design Iconsです。
https://github.com/barrymieny/material_design_icons

ですが、Rubygemsをみると以下の記載があります

This gem previously existed, but has been removed by its owner. The RubyGems.org team has reserved this gem name for 36 more days. After that time is up, anyone will be able to claim this gem name using gem push.
If you are the previous owner of this gem, you can change ownership of this gem using the gem owner command. You can also create new versions of this gem using gem push.

Gem自体がもうないです。
他に似たGemもありましたが、最近更新されているものはなかったです。
またinline_svgなどの機能もいらないので、できればない方が嬉しいです。

もともと使っていたGemのコードをみると、テストもなく、これだときつい・・・と思ったのですが、FontAwesomeのRailsインテグレーションのGemだとコードがキレイで、Github Actionsで自動テストもされていました。これをMaterialDesignIcons用に改修しよう!と決めて、一日有給取って、初めてのGem公開しました!
(仕事で使えなくなって困っていたので。。。それに有給使ってしまいました。楽しかったです。)

またMaterial Design Iconsの新しいバージョンがでたらアップデート作業もありますが、すくなくともSVGはないです。
まえ使っていたGemは実は3200個のSVGファイルを読み込んでいたみたいで、使っていなかったので、もったいないという感じでした。
Gemを入れるときはちゃんとソースまで確認しましょう!
という話でした。

ソース自体はこちらです
https://github.com/sampokuokkanen/rails_material_design_icons

失敗は成功の元

ちなみに、バージョンを見ると
https://rubygems.org/gems/rails_material_design_icons
最新のバージョンだけにフォントファイルなどが入っているのがわかります。
初めてのGemだったので、Gemspecファイルでファイル取り込みで失敗していました。
基本的にはデフォルトで入るコマンドでいいかと思いますが、もともとのGemのコマンドが入っていて、ちゃんとファイルが入らなかったです。
これもGitから直接Railsに取り入れるとちゃんと入っていたので、解決にはちょっと時間かかりました。

今はデフォルトでも入っているコマンドの以下にしています:

gem.files = Dir.chdir(File.expand_path(__dir__)) do
  `git ls-files -z`.split("\x0").reject { |f| f.match(%r{\A(?:test|spec|features)/}) }
end
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0