Open Takazudo opened 7 years ago
hiloki
commented
7 years ago 下記のようなことで悩んでるので、ぜひいい感じの方法知りたいです。
yomotsu
commented
7 years ago 「アイコン」を実装する方法としては主に4つの方法がありますが、一長一短です。
どの方法が一番いい、と言い切るのは難しいです。
自分の場合、上記を理解した上で、プロジェクトに応じて使い分けています。
アイコンファイル生成はgulpで自動化することで、かなり省力化できます。 例えばCodeGridでは、以下のようにSVGファイルをまとめておくと https://github.com/pxgrid/codegrid-ui/tree/master/src/assets2/font/codegrid-icon 自動でアイコンファイルやCSSが生成されます。 http://ui.codegrid.net/styleguide/category/Icons/index.html
参考: https://app.codegrid.net/entry/webfont-2
1ファイルにまとめることができないので、プロジェクトによっては使いづらいかもしれません。しかし、それさえなんとかなれば、高機能です。Vue.jsなどのWebアプリ構築時にはこの方法を採用するようにしています。
propで大きさなどを変更可能参考: https://app.codegrid.net/entry/2017-light-vue-1#toc-4
CSSで変更できると言っても、useで参照されたグループをまとめて変更することになってしまい、部分的な色を変更することはできません。それなら、Webフォントアイコンで十分かなと考えています。
また、ポリフィルも必要です。個人的にはあまり好んで利用はしていません。
フルカラーのアイコンが必要なら、別の方法でSVGを埋め込むこともできます。 （IEでは拡大率によって少しぼやける可能性あり） 参考: https://app.codegrid.net/entry/svg-sprite-1
コンテキストやタイプ、世代などに応じて、アイコンファイルを複数種用意するようにしています。
私は、アイコンフォントはかなり万能だと考えています。ただし単色です。ただ、単色で問題ない場合も多いので、アイコンフォントを積極的に使っています。 最近ではWebアプリを作ることも多く、そこではインラインSVGを都度埋めこんで利用しています。
個人的な視点が多くなってしまいましたが、お悩みを抱える皆さんのプロジェクトでのヒントになれば幸いです。
CSSでアイコンを利用する時、どのように管理していますか？（フォントにするとかSVGにするとかスプライトするとか）いい感じの方法を教えてください。