プロジェクトの1つでは、一連のシンプルなアイコンを使用する必要がありました。 最初は、人気の高い
Silk Iconsスイートとそのブループリント用のSpriteプラグインを選択しましたが、さらに作業を進めるほど、さらに何かが必要になりました。 十分なアイコンがなく、必要以上に不必要で、すべてをロードする必要がありました。
さらに、私の選択は
フーガアイコンでした。 GoogleでCSSを検索し、2つの解決策を見つけました。 最初:各アイコンを個別のファイルとして。 すぐにではありません。ページをロードするときに非常に見栄えが悪いからです。 2番目:スプライトと単一のCSSを備えたいくつかの個別のPNG。 全体の重さは1.4 MBであり、平均的なサイトには決して受け入れられません。
したがって、必要なアイコンを使用してSpriteをパックし、CSSを自分で作成することが決定されましたが、これは1回で済みますが、毎回サイトでいくつかの変更を行うことはできません。
そこで、タスクを自動化する簡単なPythonスクリプトを作成しました。 必要なのは、必要なアイコンをスクリプトのあるディレクトリにドロップし、スクリプトを実行して実行することだけです。
コメント付きのソース(mkicons.py):
次のように機能します。
- プロジェクトのディレクトリを作成します
- そこにmkicons.pyファイルをスローします(上記のソース)
- そして、セットから必要なアイコン
- 「python mkicons.py」を実行します
- スプライトディレクトリに移動し、そこから完成したファイルを取得します
- アイコンコードを表示および取得するには、test.htmlを開きます
test.htmlは次のようになります。
一般に、私はDjangoでプログラムを作成し、結果のファイルをコピーして貼り付ける不必要なジェスチャーを避けるために、django-staticを使用します。 これらのファイルのSTATICFILES_DIRSディレクトリを指すだけです。
それでも、誰かがLessを使用する場合、次の代わりに:
OUTPUT_SPRITE_CSS = 'sprite.css'
書く:
OUTPUT_SPRITE_CSS = 'sprite.less'
そして、次のものを含めます。
@import "/path/to/fg-icons/sprite/css/sprite.less";
それだけです。 ご清聴ありがとうございました。ご意見をお待ちしております。