IcoMoon の使い方

IcoMoonを使っているうちにだんだんぐちゃぐちゃになって来て

  • 削除したい
  • 順番を入れ替えたい
  • プロジェクト名を変えたい
  • AにもBにも同じアイコンを入れたい
  • タグ付けなどで検索できるようにしたい

など問題が出て来たら各アイコングループの右上にあるハンバーガーメニューで解決出来ます。

 

IcoMoonのハンバーガーメニューを見てみます

 

順番はこの通りではありませんが説明していきます◎

 

2 : Import to Setで同じグループにアイコンを取り込む

Import Icons でアイコン(”笑った箱”)を取り込みました。

 

同様に別の日(や別のPCからなど、、)に”困った箱”を取り込みました。出来れば”笑った箱”の隣に置きたい、そんな時は

 

一緒のプロジェクトにしたいアイコンのハンバーガーメニュー>Import to Set で出来ます。左側に新しいアイコンが入ります。

 

10 : Remove Set

「Untitled Set 4」が不要になりました。このプロジェクト全部を削除したい時はハンバーガーメニュー>Remove Set です。

プロジェクトの中のどれかを選んで削除したい時は上のメニューのゴミ箱マークでクリックです。

 

そして同プロジェクト内で並べ替えたい時はゴミ箱横の矢印マークでクリックして動かします。

 

矢印マーク横の鉛筆マークでクリックすると、

 

アイコンの情報が表示されます。Scratchで描いて書き出したファイルなのでTagsもNamesも「コスチューム○」となっています。

Scratchを保存してファイルの中身を見てみる

 

名前変更、タグ付けで検索出来るようにする

Tagsをboxに(複数可)、Namesをbox_f2とし、3つの”顔付き箱”は上記のようにしました。

 

Namesは何に使う?

上で設定したNamesはカッコの中にused for class name と書いてあるようにコードを書く時のクラス名の一部になります。

 

Tagsは何に使う?

こちらもカッコ内、used for searchの通り、メニューバー検索ボックスで使えます。
boxで今回タグ付けした物に加えてIcoMoonの中からImportした沢山のアイコンの中のboxアイコンも表示されました。右端のリボン付きボックスを見てみると、

 

Tagsの最後にboxが入っていました◎

 

 

1 : Properties

このプロジェクトの属性、左上の”Untitled Set” などを変えたい時はハンバーガーボタン>Properties を選択し、Edit Metadataを押します。

 

Nameに入れた文字がタイトルになります。

余談ですがDesignerの欄には自分の名前と備忘録として「Scratchで制作」と書きました。

 

7 : Duplicate Selection Here と 8 : Move Selection Here

7はCにあるアイコンをCにも残したままDに移動したい。8はCにあるアイコンをDに移動したい、です。

移動したいアイコンを選びます。

 

移動先のプロジェクトのハンバーガーメニュー> Duplicate Selection Here(A) 

 

元のプロジェクトにアイコンを残したまま、こちらBoxのプロジェクトに移動出来ました。

コピペだね

Move Selection Here(B) にした場合は元の場所のアイコンは消えてこちらに移動します。

 

3 : Move Up と 4 : Move Down

プロジェクトが増えて来て、プロジェクト毎に上下順番を入れ替えたい時。

「虫」プロジェクトを「Box」プロジェクトの上にしたい時は「虫」のメニューバー > Move Up で

 

上に来ました◎

 

アイコンを大きく(小さく)表示したい

数が多いので沢山表示したい時は小さく、細かい所までしっかり見たい時は大きくなど。

各プロジェクトの右上の数字をクリックで変更出来ます。(入力もできます)

 

5 : Select All / Deselect

1つ1つ選択するのが大変な時は全部選択、全部解除が便利です。

全部選択(全部解除)したいプロジェクトのハンバーガーメニュー>Select All (Deselect)で一気に全部選択(全部解除)出来ます。

 

 

9 : Rearrange Icons

プロジェクト内でアイコンを3種類の条件で並べ替えられます。

まずはアイコンを選択(Select Allなど)します。それからハンバーガーメニュー>Rearrange Icons

 

Reverse current order

1番上 Reverse current order は現在の並べ順と逆にする、です。AだったのがBになりました。

 

Order by name(or first tag)

2番目 Order by name(or first tag) は 

 

先に解説した「名前変更、タグ付けで検索出来るようにする」で付けたTagsのアルファベット順に並び替えられます。

 

Order by code point(set in font tab)

3番目 Order by code point(set in font tab) はどんな並び順になったのか、

 

 右下のメニュー、Generate Fontを押して確認できます。

 

このアルファベットと数字はIcoMoonから割り振られたアイコンのコードです。この順番で並び替えられました。

何に使うの?

 

コードの下にカーソルを当てると出てくる赤い Get Code を押すとこのアイコンのHTMLとCSSが表示されれていてCSSに e90d とあります。

 

これを使ってアイコンフォントを表示する方法もあります。

CSSの擬似要素でアイコンを表示する方法

「CSSの擬似要素でアイコンを表示する方法」で詳しく解説しています。

 

6 : Download JSON

選択したアイコンのファイルをダウンロードします。

 プロジェクト「Box」の3つを選択してハンバーガーメニュー>Download JSON すると、Box.jsonがダンロードされました。

 

このファイルをVSCodeで開いてみるとこんな感じでした。選んだ3つのアイコンや1の Propertiesで決めたname「Box」、designerに備忘録として書いた「Scratchで制作」が確認できます。

 

このファイルをImport Icons で取り込むと、

 

アイコンが入りました。下の「Box」3つは「〇〇.svg」と言う画像ファイルで取り込んだもの、上の「Box」3つは今ダウンロードそしてインポートしたBox.jsonです。

 

Box.jsonはコードが書かれていただけなのにどうしてイラストに?

これ↓を読むと何となく分かるよ◎

Inkscape はコードで描かれている?