弊社のアイコンをwebフォントで使いたい。

# やろうと思ったきっかけ

photoshopでの
![スクリーンショット 2018-12-15 23.51.11.png](https://qiita-image-store.s3.amazonaws.com/0/214546/fabfc800-c276-4f0e-83db-27943325a750.png)
のようなアイコンを毎回切り取ったりして使うのは面倒くさい。
（ものによっては別の色のバージョンも必要。）

だからといって[font-awesome](https://fontawesome.com/)で似たような画像を探すのも面倒。
（一部`free`では使うことができない。）


---


# アイコンを切り取るまで

## Photoshop

対象のレイヤーを右クリックして`書き出し書式`をクリック。

![スクリーンショット 2018-12-15 23.56.18.png](https://qiita-image-store.s3.amazonaws.com/0/214546/47b98e07-9f24-a54d-5338-6c9666213bb4.png)

そこを押すと以下のような画面になる。

![スクリーンショット 2018-12-16 0.00.42.png](https://qiita-image-store.s3.amazonaws.com/0/214546/fdea7fdc-4021-c10e-5bc9-02b57a7e5814.png)

`すべてを書き出し`で`.svg`を作成する。

一応

* 別レイヤーに写して書き出す
* 画像アセットを使って書き出す
* svgをコピーでコードを書き出す

など他にもいろいろな方法がありますが、今回は省略。

---

## XD

対象の図形をクリック。（今回は`グループ化 33`）

![スクリーンショット 2018-12-16 1.26.15.png](https://qiita-image-store.s3.amazonaws.com/0/214546/9467511f-c719-a5b8-818d-eb2f1bf8e60c.png)

macなら`ファイル → 書き出し → 選択済み`をクリック。
（ショートカットキーは`cmd + E`）

![tete.gif](https://qiita-image-store.s3.amazonaws.com/0/214546/892d3369-15ab-422f-8abb-c23131bca07f.gif)


フォートマットから`svg`を選択

![スクリーンショット 2018-12-16 1.30.30.png](https://qiita-image-store.s3.amazonaws.com/0/214546/6f790c32-92ee-83f2-175e-e5f6c5af30f2.png)

書き出しを押すとsvgファイル書き出される。

参考 : https://helpx.adobe.com/jp/xd/help/export-design-assets.html

---

# 書き出したアイコンをwebフォントとして登録する。

[IcoMoon](https://icomoon.io/)にアクセス。

![スクリーンショット 2018-12-16 1.40.02.png](https://qiita-image-store.s3.amazonaws.com/0/214546/01a7abc9-e2c0-4103-d52f-1308adf60ba3.png)

右上にある`IcoMoon App`をクリック。

![スクリーンショット 2018-12-16 1.49.34.png](https://qiita-image-store.s3.amazonaws.com/0/214546/7387003e-54e7-f84c-1015-944bff694027.png)

`Import Icon`を選択して
今回作ったsvg画像を選択する。

取り込むと以下のような状態になると思います。
（今回は別枠のウィンドウとバツのアイコンを読み込みます。）

![スクリーンショット 2018-12-16 1.51.28.png](https://qiita-image-store.s3.amazonaws.com/0/214546/f653a18c-25f6-148c-1f31-3b62a35bb27b.png)

二つのアイコンを選択して`Generate Font`をクリックすると

![スクリーンショット 2018-12-16 1.58.13.png](https://qiita-image-store.s3.amazonaws.com/0/214546/dce3485a-a3cb-74e1-d66a-36b668f6619e.png)

 [Generate Font] 横の歯車アイコンをクリックでフォント名やclass名の設定を行うこともできる。

![スクリーンショット 2018-12-16 2.01.02.png](https://qiita-image-store.s3.amazonaws.com/0/214546/f2e6c64c-41b8-3706-8556-f3a1180e8c51.png)

設定が終わったら`Download`をクリックするとダウンロードされる。

---

# ダウンロードしたwebフォントをwebサイトに入れる。

任意のディレクトリを作成し、index.htmlを作成

- index.html

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<body>
</body>
</html>
```

先ほどダウンロードしたフォルダを開き、`fonts`と`style.css`を先ほどのディレクトリに格納する。

ディレクトリについてはこのような感じになっています。
![スクリーンショット 2018-12-16 3.24.09.png](https://qiita-image-store.s3.amazonaws.com/0/214546/0d108184-a0b3-1db0-7c33-3d62d4730e3b.png)

## style.cssについて

- style.css

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

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-arw:before {
  content: "\e900";
  color: #fff;
}
.icon-batu:before {
  content: "\e901";
  color: #fff;
}
```

今回は、
`.icon-arw`(別ウィンドウのアイコン)
`.icon-batu`(バツのアイコン)
を使用。

---

## htmlへの書き込み方

- index.html

```html
<div>
  <i class="icon-arw"></i><span>アイコン単体で使う</span>
  <p class="icon-arw">pタグの中に入れる。</p>
</div>
```

のように記載を行なって、

![スクリーンショット 2018-12-16 3.31.38.png](https://qiita-image-store.s3.amazonaws.com/0/214546/ac53baa3-8f79-8339-f953-2a3584f1c75a.png)

の状態になっていたら完成です！

---

# 実際に行なってみて


## webフォントなので、色やサイズの変更が容易に行うことができるようになった。

```css
.icon-arw:before {
  content: "\e901";
  color: #fff;
}
```
↑の`color`を変更か上書きさせれば色の変更を行うことができる。
また、アニメーションの色の変化についてもcssでの色変更なので、滑らかになる。

サイズの変更については`font-size: 20px;`などで変更を行うことができる。

## 自作アイコンを追加したい場合には、また[IcoMoon](https://icomoon.io/)の設定が必要？

`fonts/icomoon.svg`の部分で

```svg
・・・
<glyph unicode="&#xe900;" glyph-name="arw" d="M0 960v-64h384v64h-384zM640 960v-64h384v64h-384zM960 960h64v-384h-64v384zM0 0v-64h1024v64h-1024zM0 960h64v-1024h-64v1024zM960 320h64v-384h-64v384zM489.6 470.4l44.8-44.8 448 448-44.8 44.8z" />
<glyph unicode="&#xe901;" glyph-name="batu" d="M1023.973 881.241l-945.219-945.219-78.768 78.768 945.219 945.219 78.768-78.768zM78.753 960.009l945.219-945.219-78.768-78.768-945.219 945.219 78.768 78.768z" />
・・・
```
↑のような設定を行なっているので、自作アイコンを使う場合には再度[IcoMoon](https://icomoon.io/)の設定が必要かもしれない。

→ サービス系のものだとデザインのリニューアル(もしくは新規機能などの場合)がないとアイコンを追加することがないと思う。
→ 静的なwebサイトだとすでに全体のデザインが決まっている場合が多いと思う(全部は決まっていなくてもアイコンなどの変更とかは少ないかも)。
→ また、変更する場合にも一から全部読み直すというよりは追加するアイコンを追加するだけでよさそうなので、そんなに工数も使わないで対応を行うことができそう。

---

# 最後に

もう少しwebフォントを管理する機能とか(storybookなど)を導入して、どんなアイコンがあるのかを見やすくできればもっと気軽に自作のwebフォントを使えそう。。
他のサービスとかでもwebフォントにできるやつがあったので、それだともっといい感じになるかも・・・！