【Rails5】Rails5で自作のWebアイコンを使う
こんにちは、まりんです。
うちの会社ではFontAwsomeがマストなんですが、
結構クライアントからこんなアイコン使って欲しい！といわれ、
そんなのねーよ！！という事が多々あるようです。
そしてこの前唐突に、上司から
アイコン作るスキル身につけて欲しいんだけど。
と言われました。
マジかよ！？
という事で、今回ちょっとやってみました。
「独自アイコンをWebアイコン化し、それをRails5で使ってみた。」
です。
概要
環境
Rails5
使用アプリ
- icomoon
今回は元素材はこちらでお借りしました。
使いたいアイコンのページからSVG形式でダウンロードしてください。
本当にアイコン作るところからやる場合は、
IllustratorやInkscapeなど、SVGで出力できるアプリを使って作成して下さい。
(イラレは高いので私はInkscapeにしようと思っています。本業じゃないし。)
Webアイコン使用までの流れ
素材(SVG)をicomoonでWebアイコン化する
Webアイコンをダウンロードして必要ファイルをアプリケーションに移動
ファイルの移動先に合わせてダウンロードしたstyle.cssを書き換え
assets/stylesheets/application.scssからimportで読み込む
詳細
それでは一つずつの詳細を説明します。
素材をWebアイコン化する
今回はicomoonというアプリを使って行います。
元となる素材をアップしてそこからダウンロードするだけでできるのでとてもお手軽です。
①まずは左上のボタンから素材のファイルをアップロードします。
今回は1枚だけですが、複数アップロードすることが可能です。
②Webフォント化する素材を選択します。
ここでも複数選択が可能で、今後アプリで使用したいアイコンをまとめてダウンロードすれば、
オリジナルのアイコンリストを作れます。
今回はアップロードしたものの他に、追加したBrandsと言うライブラリのニンテンドーswitchのアイコンと、
デフォルトで表示されているIcoMoonのHomeアイコンを一緒にダウンロードしてみます。
*ちなみに写っていませんが、ページの一番下にライブラリ追加のリンクがあります。
③選択すると、下部の真ん中のSelectionの数が増えます。
④右下のボタンでWebアイコンを作成。
Webアイコン化するファイルの確認ページに飛びます。
①ここで付いている名前がそのままアイコン使用時のクラス名になります。
アップロードしたアイコンが日本語になっているので編集します。
他にもアイコン画像をクリックすれば、拡大縮小や反転などの簡単な編集も可能です。
②編集、確認が終わったら右下のボタンでダウンロードして下さい。
必要ファイルをアプリケーションに移動
ダウンロードしたフォルダを解凍したら、必要なファイルをアプリケーションに移動します。
必要なファイルは上記のfontsフォルダ下のものと、style.cssです。
railsアプリのvendor下に置きます。
vendorの中にassetsをまず作り、その下にfontsとstylesheetsを作ります。
他にも何かダウンロードしたものを使うことがあるかもしれないので、
一応専用のフォルダをそれぞれ作ってそこに入れます。
vendor/assets/fonts/icomoon → fonts下のファイル
vendor/assets/stylesheets/icomoon → style.css
style.cssの書き換え
先ほど移動した構造に合わせて、ダウンロードしたstyle.css内のurlの部分を書き換えます。
私はここの指定が不十分だったがために余計な時間や手間を使ってしまいました。
assetsなので、追加した専用フォルダ名からで大丈夫です。
*今回はRails5なのでconfigの方の設定は入りませんでした。
確認はしていませんが、もしかしたらRails4以下ではプリコンパイルなどの設定がいるかもしれません。
こちらで大変詳しく説明して下さっています。
application.scssで読み込む
最後にassets/stylesheets/application.scssからimportでライブラリを読み込みます。
ここでも専用フォルダ名が必要になるのでご注意ください。
*直置きの場合は入りません。
以上で実際にviewで使用するまでの準備は完了です。
アイコンを使ってみる
viewでの使い方は、Font Awesomeなどのようにクラスにicon-~のアイコン名を入れて使います。
icomoonの場合は<span>にクラスをつけるようにしてください。
<div> <span class="icon-nightsky"></span> </div> <div> <span class="icon-home3"></span> </div> <div> <span class="icon-nintendoswitch"></span> </div>
無事表示できました。
まとめ
Webアイコン化して表示させるまでは簡単ですね。
問題はアイコンを作れるかどうかです。
画力も計算もデザイン能力も全く自信がないのですが。。。
それはさておき、途中にも書きましたがこれはRails5での方法になります。
Rails4以下ではvendorに置いたものをデフォルトで探してはくれなかったりするようなので、
おそらくconfig/initializers/assets.rbなどに設定する必要があるかと思います。
今回はこちらの記事を参考にさせていただきました。
