初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

アイコンフォントのパッケージ作成

前回はアイコンフォントの使い方を取り上げましたが、今回はアイコンフォントのパッケージを作成してみます。

標準のアイコンフォントだと思っているものが見つからないことがあります。

その場合、デザイナーに作ってもらったり、自分で適当なアイコン画像を探したりすることになるでしょう。

追加した画像を一つのフォントファイルにまとめてパッケージとして用意できれば、管理もしやすいし、アイコン画像の複数回読み込みがフォントファイル1回で済んだりと非常に便利になります。

あと、ベクタ画像になります。

フォントファイルの作成

フォントの作成には、IcoMoonのサービスを利用しました。

https://icomoon.io/app/

f:id:sham-memo:20171001142030p:plain

IcoMoonで標準で用意されているアイコンセットを使えたり、IcoMoonライブラリから有料でアイコンセットを購入して使えたり、自分でsvgファイルとして用意したファイルを使えたりと、

とにかく便利です。

自分でsvgファイルを用意した場合は、画面左上の「Import icons」ボタンからファイルをインポートすると、アイコンとして登録されます。

あとは、フォントファイルに含めたいアイコンを選択し、画面右下の「Generate Font」ボタンから作成し、ダウンロードできます。

ダウンロードしたファイルを展開すると、下記のようなセットになっています。

f:id:sham-memo:20171001142739p:plain

パッケージ作成

次にパッケージを作成します。

sencha generate package font-icomoon

パッケージ名は何でも良いですが、今回はfont-icomoonにしました。

フォントファイルとスタイルシートの設置

パッケージのresourcesにフォントを設置します。

既存のフォントパッケージに合わせて、resources/fontsに配置しました。

さらにstyle.css => style.scssとリネームして、sass/srcに配置します。

f:id:sham-memo:20171001143415p:plain

style.scssを一部修正し、フォントファイルをロードできるようにします。

@charset "UTF-8";

$icomoon-fonts-path: "font-icomoon/fonts";

@font-face {
  font-family: 'icomoon';
  src:  url('#{$icomoon-fonts-path}/icomoon.eot?hj34vj');
  src:  url('#{$icomoon-fonts-path}/icomoon.eot?hj34vj#iefix') format('embedded-opentype'),
    url('#{$icomoon-fonts-path}/icomoon.ttf?hj34vj') format('truetype'),
    url('#{$icomoon-fonts-path}/icomoon.woff?hj34vj') format('woff'),
    url('#{$icomoon-fonts-path}/icomoon.svg?hj34vj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

最後にpackage.jsonを修正します。

"sass" : {
    "src": [
        "${package.dir}/sass/src",
        "${package.dir}/sass/src/style.scss"  // 追記
    ]
}

使ってみる

さっそく使ってみます。

まずはパッケージなので、app.jsonのrequiresにfont-icomoonを追記しましょう。

Ext.define('Sample.view.sample.Panel', {
    extend: 'Ext.panel.Panel',
    xtype: 'sample_panel',

    cls: 'sample-panel',

    padding: 50,

    items: {
        xtype: 'button',
        iconCls: 'icon-insomnia'
    },

    html: '<i class="icon-insomnia"></i>'
});

セレクタ名はstyle.scssに載っています。

f:id:sham-memo:20171001144021p:plain

追加したアイコンがうまく表示されました。