Rails - アイコン画像のGemライブラリ evil_iconsを使う

evil_icons概要

evil_iconsは、webアプリケーションに特化してデザインされたSVG型式のアイコン画像集です。

こう書くと、ただの画像ファイル詰め合わせのような感じですが、gemとして公開されているので、Railsプロジェクトに追加して簡単に利用することができます。

また、SVGの形式なので、画像のサイズや色をプログラムから指定することができるのも特徴です。

使い方

Gemfileにevil_iconsを追加します。

Gemfile

gem 'evil_icons', github: 'outpunk/evil-icons'

rubygems にも公開されているのですが、どういうわけかインストールしたgemのassets/フォルダの中に、あるはずのcssファイルが無くてうまく動かなかったため、githubからインストールしました。

application.cssに、以下の記述を追加します。

app/assets/stylesheets/application.css

/*
 *= require evil-icons
 */

アイコンを使うページのビューに以下を追加します。
いろんなページで使う場合は、application.html.erbとかに書くのが手っ取り早くていいと思います。

app/views/layouts/application.html.erb

<%= evil_icons_sprite %>

アイコンを表示するには、evil_iconヘルパーメソッドを使います。

<%= evil_icon 'ei-search' %>

evil_iconのパラメータに表示したいアイコンの種類を指定します。アイコンの種類は以下のページで一覧を参照できます。
http://evil-icons.io/

画像サイズの指定

sizeオプションで画像の大きさを指定することができます。

xxx.html.erb

<%= evil_icon 'ei-search', size: :s %>
<%= evil_icon 'ei-search', size: :m %>
<%= evil_icon 'ei-search', size: :l %>
<%= evil_icon 'ei-search', size: :xl %>
<%= evil_icon 'ei-search', size: :xxl %>

色の指定

CSSファイルでアイコンの色を指定できます。

xxx.css

/* 全アイコン種類の色を指定する場合 */
.icon {
  fill: red;
}

「基本は黒でよいけど検索のアイコンは青で表示したい」など、特定のアイコン種類だけ色を変えたい場合は、icon-- + 「アイコンの種類」というクラス名を指定します。

xxx.css

/* 特定のアイコン種類だけに色を指定する場合 */
.icon--ei-search {
  fill: blue;
}

ひとつひとつのアイコンに個別に色を指定する場合は、独自のクラス名を定義して、evil_iconのパラメータにclassというオプションを渡します。

xxx.css

.custom-class-silver {
  fill: silver;
}
.custom-class-gray {
  fill: gray;
}

xxx.html.erb

<%= evil_icon 'ei-search', class: 'custom-class-silver' %>
<%= evil_icon 'ei-search', class: 'custom-class-gray' %>