Fugue-Icons - Dynamic Sprite
For one of the projects I needed to use a set of simple icons. At first, I chose the popular Silk Icons set and its Sprite-plugin for Blueprint, but the further I worked with it, the more I needed something more. Icons were not enough, much more unnecessary than necessary ones, and everything had to be loaded.
Further, my choice was Fugue Icons . I searched Google for something and found two solutions. First: each icon is a separate file. Immediately not, because when you load the page it looks very poor. Second: several separate PNG with sprites and a single CSS. The whole thing weighed 1.4 MB, which is not permissible for the average site.
Therefore, it was decided to pack Sprite with the necessary icons and write CSS for it myself, but this can be done once, but not every time with some changes on the site, and for new projects it would also be good to somehow simplify the task.
So, I wrote a simple Python script that automates the task. All we have to do is to drop the desired icon into the script directory and launch the script for execution.
')
Source (mkicons.py) with comments:
It works like this:
test.html looks like this:
In general, I program on Django and to avoid unnecessary gestures with copying and pasting the resulting files, I use django-static. Just listing in the STATICFILES_DIRS directory for these files.
And also, if someone uses Less, then instead of:
write:
And then we turn on:
That's all. Thank you for your attention, I will be glad to hear your comments.
Further, my choice was Fugue Icons . I searched Google for something and found two solutions. First: each icon is a separate file. Immediately not, because when you load the page it looks very poor. Second: several separate PNG with sprites and a single CSS. The whole thing weighed 1.4 MB, which is not permissible for the average site.
Therefore, it was decided to pack Sprite with the necessary icons and write CSS for it myself, but this can be done once, but not every time with some changes on the site, and for new projects it would also be good to somehow simplify the task.
So, I wrote a simple Python script that automates the task. All we have to do is to drop the desired icon into the script directory and launch the script for execution.
')
Source (mkicons.py) with comments:
#!/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() It works like this:
- Create a directory for the project
- We throw there the file mkicons.py (Source above)
- And the necessary icons from the set
- Run "python mkicons.py"
- Go to the "sprite" directory and pick up the finished files from there.
- To view and receive the icon code, open test.html
test.html looks like this:
In general, I program on Django and to avoid unnecessary gestures with copying and pasting the resulting files, I use django-static. Just listing in the STATICFILES_DIRS directory for these files.
And also, if someone uses Less, then instead of:
OUTPUT_SPRITE_CSS = 'sprite.css'
write:
OUTPUT_SPRITE_CSS = 'sprite.less'
And then we turn on:
@import "/path/to/fg-icons/sprite/css/sprite.less";
That's all. Thank you for your attention, I will be glad to hear your comments.
Source: https://habr.com/ru/post/129546/
All Articles