[Sencha Touch]アイコンの変更方法

はじめに

Sencha Touchのバージョン2.2以降では、アイコン表示にアイコンフォントを使用するようになった。
ここでは、アプリで使用するアイコンの変更方法を説明する。

デフォルトで使えるアイコン

デフォルトテーマではPictosフォントを使用している。

• Pictosフォント
  http://www.pictos.cc/font/

デフォルトではPictosフォントの全アイコンが使用できるようにはなっていない。
デフォルトで使えるアイコンの一覧は公式ドキュメントには載っていないが、以下のファイルの@if $include-default-icons {のところに定義されている。

<アプリフォルダ>/touch/resources/themes/stylesheets/sencha-touch/default/src/_Button.scss

Pictosフォントからアイコンを追加する

例：ハートマークのアイコンをアイコンクラス名"heart"で使用できるようにする

app.scss

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

//※テーマのインポート後に記述
@include icon('heart');

アイコンクラス名は以下のファイルのicon-character-for-nameという関数に定義されている。

<アプリフォルダ>/touch/resources/themes/stylesheets/sencha-touch/baes/mixins/_Class.scss

上記に定義されているクラス名が気に食わなければ、第1引数に任意のクラス名、第2引数にアイコンフォントの文字コードを指定すれば変更できる。
例：ハートマークのアイコンをアイコンクラス名"like"で使用できるようにする

app.scss

@include icon('like', 'k');

他のアイコンフォントを使用する

例：GenericonsのTwitterアイコンを使用する

• Genericons
  http://genericons.com/

1. Genericonsのホームページからアイコンフォントをダウンロードする。
2. zipファイルを解凍してfontフォルダ内のフォントファイルを以下の場所にコピーする。
   <アプリフォルダ>/resources/sass/stylesheets/fonts/genericons/
3. app.scssに以下の記述を追加する。

app.scss

@include icon-font('genericons', inline-font-files(
        'genericons/genericons-regular-webfont.woff', woff, 
        'genericons/genericons-regular-webfont.ttf', truetype,
        'genericons/genericons-regular-webfont.svg', svg
));
@include icon('twitter', '\f202', 'genericons');

\f202はアイコンに対応付けられた文字コードで、Genericonsホームページでアイコンを選択してCopy CSSのリンクをクリックすると表示される。

デフォルトアイコン定義を無効にする

app.scss

//※テーマのインポート前に記述
$include-default-icons: false;

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

参考

• 公式ドキュメント(バージョン2.3.1)
  Theming - Touch - Sencha Docs
• ゼノフィ 技術ノート
  Sencha Touch 2.2での新しいテーマ