Для одного из проектов мне нужно было использовать набор простых иконок. Сначала я остановил свой выбор на популярный набор Silk Icons и его Sprite-плагин для Blueprint, но чем дальше я с ним работал, тем сильнее требовалось что-то большее. Иконок было маловато, ненужных гораздо больше, чем нужных, а подгружать приходилось все.
Далее мой выбор остановился на Fugue Icons. Я поискал в гугле что-либо для CSS и нашел два решения. Первое: каждая иконка отдельным файлом. Сразу нет, потому что при загрузке страницы это смотрится очень убого. Второе: несколько отдельных PNG со спрайтами и единый CSS. Все это дело весило 1.4 Мб, что никак не допустимо для среднестатистического сайта.
Посему было принято решение паковать Sprite с нужными иконками и писать для него CSS самому, однако это можно сделать единожды, но не каждый раз при каких-то изменениях на сайте, да и для новых проектов тоже было бы не лишним как-то упростить задачу.
Итак, я написал простой скрипт на Python, который автоматизирует задачу. От нас требуется только закинуть в каталог со скриптом нужную иконку и запустить скрипт на выполнение.
Исходник (mkicons.py) с комментариями:
Работает так:
test.html выглядит так:
Вообще, я программирую на Django и чтобы избежать лишних телодвижений с копированием и вставкой получившихся файлов, я использую django-static. Просто указываю в STATICFILES_DIRS каталог к этим файлам.
И еще, если кто-то пользуется Less, то вместо:
пишем:
А затем инклюдим:
Вот вроде и все. Спасибо за внимание, буду рад выслушать ваши комментарии.
Далее мой выбор остановился на Fugue Icons. Я поискал в гугле что-либо для CSS и нашел два решения. Первое: каждая иконка отдельным файлом. Сразу нет, потому что при загрузке страницы это смотрится очень убого. Второе: несколько отдельных PNG со спрайтами и единый CSS. Все это дело весило 1.4 Мб, что никак не допустимо для среднестатистического сайта.
Посему было принято решение паковать Sprite с нужными иконками и писать для него CSS самому, однако это можно сделать единожды, но не каждый раз при каких-то изменениях на сайте, да и для новых проектов тоже было бы не лишним как-то упростить задачу.
Итак, я написал простой скрипт на 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»
- Идем в каталог «sprite» и забираем оттуда готовые файлы
- Для просмотра и получения кода иконок открываем 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";
Вот вроде и все. Спасибо за внимание, буду рад выслушать ваши комментарии.
