アイコンフォントをscssの配列とmixinでスッキリまとめてみよう

#前程

※FontAwsomeとかをまとめてドン！と入れて使っているのがOKな人には役に立ちません。

個人的にHTML側に [fa fa-xxx] など、パッケージのクラスを設定していくのが好きではなく、役割に対してcssでデザインを当てていくのが好みです。

そしてアイコンは、モックにはできあいのもので取り急ぎ入れつつ完成に従って変えていきたかったり、そもそもライブラリまるっとではなく必要なものだけ欲しかったりします。

ということで、IcoMoonでライブラリを落としたり、入れ替えてオリジナルのセットを作ったりしているのですが。。。
ここで常々整理したいと思っていたことをこの度やってみました。

#やること整理

####[１]アイコンをCSSの該当箇所に設定
HTMLにアイコン用のクラスをつけるのではなく、CSSの該当箇所のクラスなどの中に記載しませう。
（既解決。だけどバージョンアップしたい！）

####[２]アイコン表示の疑似要素は自由に
[:before]に勝手につくのが嫌で、実際にアイコンを表示させるところで指定。
（既解決。だけどバージョンアップしたい！）

####[３]CSSのムダを省く
その１＆２をやっていたコードが見苦しい＆ムダなCSSが吐き出されるのでスッキリさせたい。

#今までやっていたこと

[1]IcoMoonからフォントをダウンロード。フォントファイルとHTML側にアイコン用のクラスを書くのに使えるcssが落ちてくる。

[2]cssを少し改変してincludeで使えるようにする。

ダウンロードまま：icomoon.css

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?なんか乱数');
　　　　　　〜中略（フォントファイル位置指定）〜
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sample001:before {
  content: "\e901";
}
.icon-sample002:before {
  content: "\e902";
}

改変後：_icon.scss

@font-face {
  font-family: 'icomoon';
  src:  url('フォントファイル置いた位置/icomoon.eot?なんか乱数');
　　　　　〜中略（フォントファイル位置指定）〜
  font-weight: normal;
  font-style: normal;
}
.icon-icomoon {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sample001 {
  @extend .icon-icomoon;
  content: "\e901";
}
.icon-sample002 {
  @extend .icon-icomoon;
  content: "\e902";
}

[3]_icon.scssをincludeして、必要な箇所で呼び出す。

アイコン出すとこ

<span class="menu-sample"></span>

scss

.menu-sample{
  &:before{
    @extend .icon-sample001;
  }
}

...でもこれって、

• cssは↓みたいに冗長に書き出される
• ってことは、[.icon-sampleXXX]のクラスが作られてる
• sassで必要なアイコンの分だけ同じようなの書いてく
  と、なんか無駄感半端ない。。と思っていたのです。

css

.icon-sample001 {content: "\e901"; }
.icon-sample002 {content: "\e902"; }
.menu-sample:before{content: "\e901";}

#前置きが長くなりましたが、今回やって整理したこと

整理後：_icon.scss

//フォントファイルが複数あるので、文字列変数にしました。キャッシュバスターな乱数もついているので、こちらも同じく。
$path-font-Feather: "フォントファイルのありかURL";
$cb-font-Feather: "落ちてきたCSSに記載の乱数";

@font-face {
  font-family: 'icons';
  src:  url('#{$path-font-Feather}/Feather.eot?#{$cb-font-Feather}');
　　　　〜中略（フォントファイル位置指定）〜
  font-weight: normal;
  font-style: normal;
}

//アイコンを配列で指定
$icons:(
  sample01: "\e901",
  sample02: "\e902",
  sample03: "\e903",
);

//mixinを作る。アイコンの種類と、疑似要素の位置を引数で渡す。
@mixin icon($icon: false, $position: before){

　　　　//↓のifはなくてもいい気がするけど、参照したとこのを一応そのまま。　
  @if $position == both {
    $position: 'before, &:after'
  }
 
 &:#{$position}{
    @if $icon{
      content: "#{map-get($icons, $icon)}";
      font-family: 'icons';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
  @content;
}

利用箇所scss

.menu-sample{
  @include icon(sample01, before);
}

コンパイル後css

@font-face {
  font-family: 'icons';
  src:  url('フォントファイル置いた位置/icomoon.eot?なんか乱数');
　　　〜中略（フォントファイル位置指定）〜
  font-weight: normal;
  font-style: normal;
}

.menu-sample:before {
  content: "\e901";
  font-family: 'icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

参考：http://jaydenseric.com/blog/fun-with-sass-and-font-icons

なんかスッキリしました。
後もうちょっとフォントスタイル周りを精査できると良いかもしれません。