👠 👷 🚠 フーガアイコン-ダイナミックスプライト 🔆 ☝🏻 🚋

プロジェクトの1つでは、一連のシンプルなアイコンを使用する必要がありました。最初は、人気の高いSilk Iconsスイートとそのブループリント用のSpriteプラグインを選択しましたが、さらに作業を進めるほど、さらに何かが必要になりました。十分なアイコンがなく、必要以上に不必要で、すべてをロードする必要がありました。

さらに、私の選択はフーガアイコンでした。 GoogleでCSSを検索し、2つの解決策を見つけました。最初：各アイコンを個別のファイルとして。すぐにではありません。ページをロードするときに非常に見栄えが悪いからです。 2番目：スプライトと単一のCSSを備えたいくつかの個別のPNG。全体の重さは1.4 MBであり、平均的なサイトには決して受け入れられません。

したがって、必要なアイコンを使用してSpriteをパックし、CSSを自分で作成することが決定されましたが、これは1回で済みますが、毎回サイトでいくつかの変更を行うことはできません。

そこで、タスクを自動化する簡単なPythonスクリプトを作成しました。必要なのは、必要なアイコンをスクリプトのあるディレクトリにドロップし、スクリプトを実行して実行することだけです。

コメント付きのソース（mkicons.py）：

#!/usr/bin/env python #  .    PIL import Image import glob import os ICON_WIDTH, ICON_HEIGHT = 16, 16 #    (      ). OUTPUT_DIR_NAME = 'sprite' #,       OUTPUT_SPRITE_PNG = 'sprite.png' #    OUTPUT_SPRITE_CSS = 'sprite.css' # CSS- OUTPUT_SPRITE_HTML = 'test.html' # HTML-    CSS_SPRITE_TEMPLATE = '.fg_%s{background-position:0px %spx}' #     CSS #      HTML HTML_SPRITE_TEMPLATE = '''<span class="fg_sprite fg_%(spritename)s "></span> <input type="text" value=\'<span class="fg_sprite fg_%(spritename)s"> </span>\'><br /> ''' #  CSS-.      CSS_CONTENT=''' .fg_sprite{ display:inline; overflow:hidden; background-repeat:no-repeat; background-image:url('../img/%s'); height:16px; width:16px; overflow:hidden; margin:-2px 3px 3px 0; padding: 0px; display:-moz-inline-box;display:inline-block; vertical-align:middle; } ''' % OUTPUT_SPRITE_PNG #  png-   #  HTML-.  <body>  </body>      HTML_CONTENT = ''' <html><style>input{width:400px;}</style><head><link href="css/sprite.less" rel="stylesheet" type="text/css" /> </head><body>%s</body></html> ''' pngs = glob.glob('*.png') + glob.glob('*.PNG') #      sprite_height = len(pngs)*ICON_HEIGHT #     sprite = Image.new('RGBA', (ICON_WIDTH, sprite_height),(0,0,0,0)) #    .      html_include='' # HTML   #    . for idx,png in enumerate(pngs): icon = Image.open(png) #  offset = ICON_HEIGHT * idx #      sprite.paste(icon,(0, offset)) #     spritename=png.replace('.png','').replace('.PNG','').replace('--','-') # CSS -      CSS_CONTENT+=CSS_SPRITE_TEMPLATE % (spritename,-offset) #  CSS     html_include+=HTML_SPRITE_TEMPLATE % {'spritename':spritename} #  HTML #    ,     if not os.path.exists(OUTPUT_DIR_NAME): os.makedirs(OUTPUT_DIR_NAME) if not os.path.exists(os.path.join(OUTPUT_DIR_NAME, 'img')): os.makedirs(os.path.join(OUTPUT_DIR_NAME, 'img')) if not os.path.exists(os.path.join(OUTPUT_DIR_NAME, 'css')): os.makedirs(os.path.join(OUTPUT_DIR_NAME, 'css')) #   sprite.save(os.path.join(OUTPUT_DIR_NAME, 'img', OUTPUT_SPRITE_PNG),'PNG') cssfile = open(os.path.join(OUTPUT_DIR_NAME, 'css', OUTPUT_SPRITE_CSS),'w') cssfile.write(CSS_CONTENT) cssfile.close() htmlfile = open(os.path.join(OUTPUT_DIR_NAME, OUTPUT_SPRITE_HTML),'w') htmlfile.write(HTML_CONTENT % html_include) htmlfile.close()

次のように機能します。

プロジェクトのディレクトリを作成します
そこに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";

それだけです。ご清聴ありがとうございました。ご意見をお待ちしております。

フーガアイコン-ダイナミックスプライト

More articles: