Geomicons - ユニークな手書きのSVGアイコンセット

Webアイコンセットは、最近のWebデザインでは急速に標準になりつつあります。これらは、Webデザイナーにとって大きな資産です。 アイコンはCSSを通じてカスタマイズ可能 品質を損なうことなくサイズ変更.

しかし、アイコンパックの中には肥大化して小規模のサイトには大きすぎると感じる場合があります。それがGeomiconsが本当に輝くところです.

これは SVGで実行されているカスタムの手書きアイコンパック. あなたはJSスクリプトを通して、またはあなたのページに直接のSVGファイルとしてアイコンを埋め込むことができます。いずれにしても、それらは美しいベクトルであり、再設計が非常に簡単です。.

Geomiconsのメインページには、すべてのアイコンの完全なデモがあります。それらはかなりシンプルで、私たち全員がよく知っている伝統的な単色フラットデザインスタイルに従います.

しかし、彼らのセットアップ情報は確かにデモページに欠けています。設定方法を知りたい場合は、GitHubリポジトリにアクセスして手順を確認する必要があります。.

デフォルトでは、これ ライブラリは、あなたがCSS / JSを使っていると仮定しています これらのアイコンをページ要素に直接埋め込むためです。それでもGitHubからアイコンをダウンロードすると、HTMLに直接追加できるすべての生のSVGファイルが得られます.

唯一の問題はそれです 生のSVGはもっと編集が必要です 色を変更するのに対して、JS / CSSルートではコードを介して色を制御できます。.

単に追加する geomicons.min.js ヘッダにスクリプトを書き、 データアイコン HTML要素への属性。これらは自動的にアイコンを埋め込むので、CSSクラスを使って操作できます。.

Geomiconsについて私が本当に気に入っているもう1つのことは、Nodeのサポートです。これがGitHubレポジトリのサンプルスニペットです。

var geomicons = require（ 'geomicons-open'）; var pathData = geomicons.paths.heart; //パスのd属性値を返しますvar svgString = geomicons.toString（ 'heart'）; // SVG文字列を返します

もしあなたがNodeに慣れていないのなら、おそらくNodeスニペットのどれも使う必要は決してないでしょう。これらのアイコンのReact.jsバージョンも同様です。.

それでも主要なフレームワークをサポートすることは大したことです。それはGeomiconsが以下のことを意図していることをより証明しています あらゆる種類のウェブサイトをサポート 最初にパフォーマンスに焦点を当てることによって.

これらのアイコンを試運転するには、npmからコピーを取得するか、GitHubから直接ダウンロードします。.

Geomicons Wiredというアウトラインアイコンセットもあります。.

どちらにせよ、これは ミニマリストのWebデザイナーのための素晴らしいアイコンセット. 合計ページ読み込み時間を短縮しながら、美しいアイコンであなたのサイトを最適化するための完璧な選択.