3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-01

Google Material Icons Font awesome などは、どのようにしてiタグ内のテキストをアイコンとして表示しているのか? と思ったことありませんか?

ex) こういうヤーツ
<i class="material-icons">fingerprint</i>
<i class="fab fa-accessible-icon"></i>//cssのcontentでテキストが設定されている。

これはligature (合字/リガチャ)という、複数文字を一つの文字として表示する手法を利用したものです。

wikipedia 合字

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

サンプルプロジェクト

[github] itoz/ligature-icons
上記プロジェクトを元に記します。

事前準備

grunt-webfont を利用します。

  • fontforgeなど、環境により事前インストールが必要なものがあるので 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などをインストールしたらおもむろに、

$npm i

でmoduleをインストール。

svg アイコンを作成&設置

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

ligature-src.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']);
};
$npm start

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

ligature-dist.png

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

ligature-icons.png

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

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

コード記述例

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

<i class="ligature-icons">github</i>
ligajture-github.png **これで独自のligatureアイコンが生成できました!**

最後に

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

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?