[update] アイコンフォントのテンプレートを修正

[manabuyasuda]

.p-icon {
  @include _p-icon;
}

としているのを

.p-icon:before {
  @include _p-icon;
}

のように:before擬似要素に指定した方がアイコンフォント部分の影響範囲が少なくなる。 .p-icon自体にmixinを指定していると、font-weightやline-height、displayなどが指定されるので、mixinでiconコンポーネント以外で呼び出すときに、意図せず上書きされてしまう可能性がある。

[manabuyasuda]

と思ったけど、例えば<span>でテキストを囲まないようにしたら問題はないかも。

[manabuyasuda]

「.p-iconを指定すると:before擬似要素にだけアイコンが表示される。」というルールに統一した方が分かりやすい。 例えば現状では.p-iconと一緒にクラスを指定しても必ず適応される保証がない。要素自体と擬似要素の両方に指定するメリットはないかなと思う。