ligature(合字）アイコンを作る

[Google Material Icons ](https://material.io/icons/) や [Font awesome](https://fontawesome.com/) などは、**どのようにしてiタグ内のテキストをアイコンとして表示しているのか？** と思ったことありませんか？

``` html
ex) こういうヤーツ
<i class="material-icons">fingerprint</i>
<i class="fab fa-accessible-icon"></i>//cssのcontentでテキストが設定されている。
```
これは**ligature** (合字/リガチャ)という、複数文字を一つの文字として表示する手法を利用したものです。

[wikipedia 合字](https://ja.wikipedia.org/wiki/%E5%90%88%E5%AD%97)


この記事では、**独自のligatureアイコンを作成** する手順を記します。



# サンプルプロジェクト

[[github] itoz/ligature-icons](https://github.com/itoz/ligature-icons)
上記プロジェクトを元に記します。

## 事前準備
[grunt-webfont](https://github.com/sapegin/grunt-webfont) を利用します。

 - fontforgeなど、環境により事前インストールが必要なものがあるので [grunt-webfont](https://github.com/sapegin/grunt-webfont) のページを参照

 - gulpやwebpackを利用したいところですが、2018.5.1現在、ligatureを作成するには、このmoduleが一番よい？ようです。


``` package.json
{
  "name": "ligature-icons",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "grunt"
  },
  "author": "itoz",
  "license": "ISC",
  "devDependencies": {
    "grunt-cli": "^1.2.0",
    "grunt-contrib-clean": "^1.1.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-webfont": "^1.6.0"
  },
  "dependencies": {
    "grunt": "^1.0.1"
  }
}

```

サンプルプロジェクトをpullし、上記fontforgeなどをインストールしたらおもむろに、

``` sh
$npm i
```
でmoduleをインストール。

# svg アイコンを作成＆設置
(サンプルプロジェクトの`/design` フォルダにあるsketchなどを利用し、) デザインを作成し、`/src/svg` フォルダに、svgを設置してください。


<img width="208" alt="ligature-src.png" src="https://qiita-image-store.s3.amazonaws.com/0/2564/b1e34c70-a261-e71f-635a-adb1f98c723c.png">

## ビルドする


``` Gruntfile.js
//
// @see https://www.npmjs.com/package/grunt-webfont
//
module.exports = function (grunt) {
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-webfont');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    clean:["dist"],//distを消去
    webfont: {
      icons: {
        src: 'src/svg/*.svg',
        dest: 'dist/fonts/ligature-icons',
        destScss: 'dist/scss',
        options: {
          ligatures:true,
          engine:'fontforge',
          font: 'ligature-icons',
          stylesheet: 'scss',
          template: 'src/template/template.css',
          templateOptions: {
            baseClass: 'ligature-icons',
            classPrefix: 'ligature-icons-'
          },
          htmlDemoTemplate:"src/template/template.html",
          htmlDemoFilename:"_sample",
          callback: function(filename, types, glyphs, hash) {
              console.log("[created] ligature icons")
          }
        }
      }
    }
  });
  grunt.registerTask('default', ['clean','webfont']);
};
```

``` sh
$npm start
```

これで`dist`フォルダにligatureアイコンが書き出されます。

<img width="267" alt="ligature-dist.png" src="https://qiita-image-store.s3.amazonaws.com/0/2564/8a207f4d-bdf1-c240-5628-75a5ee3a1050.png">


`dist/fonts/ligature-icons/_sample.html`を確認して見てください。
下記のようにアイコン一覧が確認できればOK.

<img width="１００％" alt="ligature-icons.png" src="https://qiita-image-store.s3.amazonaws.com/0/2564/a554c828-e1a1-2b3c-e227-d0ef2e9f04a3.png" style="">

# 任意のプロジェクトに読み込む

1. `dist/fonts/ligature-icons/*` を任意のプロジェクトにコピー。
1. `dist/scss/*.scss` を任意のプロジェクトにコピーしソース内のパスを1で設置したパスに変更。
1. 2.のscssをpartialとして他のscssから読み込んでビルドされるように設定。


### コード記述例

ex) githubアイコンを表示したい場合

``` html
<i class="ligature-icons">github</i>
```


<img width="56" alt="ligajture-github.png" src="https://qiita-image-store.s3.amazonaws.com/0/2564/86bee249-5000-7152-9f5e-a0aecd2911b6.png">
**これで独自のligatureアイコンが生成できました！**

# 最後に
なにか間違いなどありましたら気軽にコメントいただけるとうれしいです。