Polymer を使ってアイコンを表示する

**※ 先日 Polymer 1.0 がリリースされましたが、ここに記載されている内容は `core-` を `iron-` に置き換えるだけでほぼそのまま使えます。**

ちょっと [Polymer](https://www.polymer-project.org/) やってみようかなと思って、まず手軽なところでアイコンから試してみるか〜と始めて、いきなりハマってしまった方、いませんか？何事も小さいことから始めた方が基礎を固められるというもの。Polymer をこれから始めたいという方は、ここでアイコンを使うところから始めてみましょう！

ちなみに、ここで解説する内容の一部は、[Rob Dodson が解説している動画](https://www.youtube.com/watch?v=jrt7sMq9lO0)でもカバーされているので、興味のある方はぜひご覧ください。英語ですが、近々日本語字幕が付く予定です。

# アイコンに使う Polymer 要素

Polymer の醍醐味は、標準の HTML に含まれない要素を使って、手軽に高機能な要素を取り込めるところにあります。で、[icon に関連しそうなリファレンス](https://www.polymer-project.org/docs/elements/)を見てみると・・・

- `core-icon`
- `core-icon-button`
- `core-iconset`
- `core-iconset-svg`

icon とつくものだけで 4 つも見つかってしまいました (> <)

もうこの辺で「どうすりゃいいの！？」となってしまいますよね。無理もない。しかも実は、ドキュメントに出てない `core-icons` というものも使わないといけないので、話はさらにややこしいのです。上記のリストに `core-icons` を加えて、それぞれ何をするものか簡単に解説してみます。

**`core-icon`**
これがこの記事の主役で、アイコンを表示する時に、実際にあなたが記述する要素です。

**`core-icons`**
Polymer のアイコン機能はすぐに使えるアイコングラフィックも多数提供してくれるのですが、この要素は基本的なアイコンセットを提供してくれます。

**`core-icon-button`**
アイコンを使ったボタンを作りたい場合、これを使います。この記事では触れません。

**`core-iconset`**
`core-icons` のようなアイコンセットを自作したい場合に使います。

**`core-iconset-svg`**
`core-iconset` で svg アイコンセットを自作したい場合に使います。

# 準備

何はともあれ、まずは準備からはじめましょう。この辺りのことは Polymer を使う場合、必ず必要なことになるので、重要です。

まず、必要なものは [bower](http://bower.io/)。bower は JavaScript のライブラリ等を、依存関係も考慮した上で、必要なファイルだけコマンド一発でローカルに引っ張ってくれるものです。npm のフロントエンド版と考えて下さい。

```
$ bower install --save Polymer/core-icon
```

上記で、`core-icon` 本体に加え、依存関係にある複数のコンポーネントがダウンロードされます。その中には Polymer 本体や [webcomponents.js](http://webcomponents.org/polyfills/) という未対応ブラウザで動作させるためのライブラリも含まれています。

未対応ブラウザで動作させることも想定する場合、最初に webcomponents.js を読み込ませるため、HTML 上 `link[rel="import"]` よりも上に記述して下さい。

```html
<script src="bower_components/webcomponentsjs/webcomponents.min.js/">
```

そして使いたい要素である [`core-icon`](https://www.polymer-project.org/docs/elements/core-elements.html#core-icon) を `link[rel="import"]` を使って読み込みます。

```html
<link rel="import" href="bower_components/core-icon/core-icon.html">
```

これで準備は OK。HTML 上で `core-icon` が使えるようになりました。

# 自前の画像をアイコンとして表示する

`core-icon` に画像を指定するには、`img` タグと同様のやり方で `src` に URL を指定します。

```html
<core-icon src="star.png"></core-icon>
```

うまくいけば、下記のように画像が表示されるはずです。

![Screen Shot 2015-01-06 at 15.01.44.png](https://qiita-image-store.s3.amazonaws.com/0/4093/c33653af-59f5-83d1-c1a9-738a4b5b4d7e.png)

ポイントは、元々の画像の縦横比を1:1にしておくことです。サイズはデフォルトでは自動的に 24px 四方に調整されます。サイズを変更したい場合は、CSS で指定します。

```html
<core-icon src="star.png" style="width:16px; height:16px;"></core-icon>
```

# Polymer の提供するアイコンセットを使う

ここまでなら、普通に `img` タグを使えばいいので、`core-icon` を使うメリットは大きくありません。`core-icon` の醍醐味は、[様々なアイコンセット](http://polymer.github.io/core-icons/components/core-icons/demo.html)が無料で提供されていることです。

![Screen Shot 2015-01-06 at 15.06.29.png](https://qiita-image-store.s3.amazonaws.com/0/4093/78029bd7-63ad-f94f-8e96-322ba996fe82.png)

ここで登場するのが [`core-icons`](https://www.polymer-project.org/docs/elements/core-elements.html#core-icons) です (複数形の **s** に注意！) 。`core-icons` をインポートすることで、[これらの素敵なアイコン](http://polymer.github.io/core-icons/components/core-icons/demo.html)が 242 個、手軽に使えるようになります。

自前で画像を用意することも想定されているため、`core-icon` をインポートしただけでは `core-icons` の提供するアイコンセットは使えません。これも合わせてインポートしましょう。

```html
<link rel="import" href="bower_components/core-icons/core-icons.html">
```

そして、先ほどの[アイコン一覧ページ](http://polymer.github.io/core-icons/components/core-icons/demo.html)から使いたいアイコンを選んで、名前を `icon` 属性に追加します。ここでは　`star` を使ってみましょう。

```html
<core-icon icon="star"></core-icon>
```

![Screen Shot 2015-01-06 at 15.12.05.png](https://qiita-image-store.s3.amazonaws.com/0/4093/f852478b-aa54-6477-1390-70e3ba20169e.png)

どうでしょう？お手軽ですね。

実はこのアイコン、SVG でできています。SVG でできている利点は、例えばサイズを変更しても、ギザギザが出ない点。

```html
<core-icon icon="star" style="width:160px; height:160px;"></core-icon>
```

![Screen Shot 2015-01-06 at 15.14.10.png](https://qiita-image-store.s3.amazonaws.com/0/4093/f476da0d-5379-1fee-0ce2-e8e3ca0b70c1.png)

そして色を変えることができる点。

```html
<core-icon icon="star" style="width:160px; height:160px; color:yello;"></core-icon>
```

![Screen Shot 2015-01-06 at 15.15.39.png](https://qiita-image-store.s3.amazonaws.com/0/4093/c83820ec-7eb5-ba21-1d29-093c4ebdb41f.png)

# もっとたくさんのアイコンセットを使いたい！

先程ご紹介したアイコンセット一覧のページを下の方にスクロールしていくと、Av や Communication など、様々なジャンルのアイコンを見ることができます。

![Screen Shot 2015-01-06 at 15.23.15.png](https://qiita-image-store.s3.amazonaws.com/0/4093/a7137743-eae1-d94a-fe17-eb7e16ab31cd.png)

これらのアイコンを使う場合は、もう一手間必要です。使わないと分かっている画像を大量に読み込むのは、帯域とリソースの無駄ですよね。Polymer の core-icons では、必要なセットだけ読み込める仕組みになっているのです。

例えば上記画像の Device アイコンを使いたい場合は、ページに書いてあるように、`core-icons` から `device-icons.html` を読み込みます。

```html
<link rel="import" href="bower_components/core-icons/device-icons.html">
```

これで Device の一覧に載っているアイコンが使えるようになりました。記述するときは、[アイコンセット名`:`アイコン名]を `icon` 属性に追加します。下記の例では、`device` アイコンセットの `access-time` アイコンを使っています。

```html
<core-icon icon="device:access-time"></core-icon>
```

![Screen Shot 2015-01-06 at 15.27.34.png](https://qiita-image-store.s3.amazonaws.com/0/4093/f7424ebd-1486-328e-c2b5-da094f81b403.png)

# 自分だけのアイコンセットを作る

必要なアイコンセットだけ読み込んで使えると書きましたが、それでも大量にあるアイコンからひとつ使うためだけに200個も呼び出すのは、無駄が多いと感じる方もいるかもしれません。そういう方のために `core-iconset` および `core-iconset-svg` が用意されています。これらを使うことで、自前のアイコンセットを作ることができます。

ここでは使い方は割愛しますが、ぜひ [Rob Dodson のビデオ](https://www.youtube.com/watch?v=xfiOJP8vuX4)を見てください。

# まとめ

最後に、この記事を書くのに使ったサンプルの HTML を貼っておきますね。

```html
<!doctype html>
<html>
  <head>
    <title>Core Icon Demo</title>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="bower_components/core-icon/core-icon.html">
    <link rel="import" href="bower_components/core-icons/core-icons.html">
    <link rel="import" href="bower_components/core-icons/device-icons.html">
  </head>
  <body>
    <core-icon src="star.png"></core-icon>
    <core-icon icon="star"></core-icon>
    <core-icon icon="star" style="width: 32px; height: 32px; color: red;"></core-icon>
    <core-icon icon="device:access-time"></core-icon>
  </body>
</html>
```