Сборка CSS-спрайтов для MIME-описателей из svg-png значков

Вводная: на нашем сайте есть файловый менеджер, который может загружать любой файл на сайт; при этом файлу нужно автоматически сопоставить значок по его MIME-типу.

Проблема: MIME-типов очень много, собирать значки для них вручную каждый раз — очень долго (и глупо). Требуется какое-то автоматическое решение.

Решение: в этой заметке я собрал простой рецепт самостоятельного изготовления CSS-спрайтов для подключения их в дальнейшем в качестве MIME-описателей на сайте на основе значков из установленных в дистрибутив Ubuntu пакетов тем GTK/Qt.

В дистрибутивах linux ubuntu по адресу /usr/share/icons хранятся системные значки, в том числе и для представления файлов по их MIME-типу. Лицензия значков — в соответствии с пакетом, из которого в дистрибутив ставятся эти значки.
1. Найдём установленные в системе папки со значками MIME. Если нам нужен определённый размер файлов, отсортируем только его.

find /usr/share/icons -type d | grep mime | grep 48

Просмотрим найденные папки и выберем подходящие значки.
2. Создадим новые папки для значков и скопируем в них значки. Например, значки Gnome 48x48:

mkdir ./icons
cp `find /usr/share/icons/gnome/48x48/mimetypes/* -type f` ./icons -R

Мы разделяем значки и символические ссылки для уменьшения итогового объёма информации.
3. Это дополнительный шаг — он может понадобиться, только если мы получаем изображения в формате svg (масштабируемой векторной графики).
Нам нужно пройти все значки в папке ./icons и преобразовать их в формат PNG:

inkscape -z -f icons/authors.svg -e authors.png

Поскольку мы работаем с SVG, мы можем масштабировать оригинал при конвертации до нужного размера в точках путём задания параметра DPI (значение 90 приравнено к 100% оригинального размера значка, в нашем случае 48х48):

inkscape -z -f icons/authors.svg -e authors.png -d 120

Мы делаем это в цикле таким образом:

for fname in icons/*.svg; do inkscape -z -f $fname -e ${fname%%.svg}.png; done

4. Для создания CSS-спрайтов нам понадобится проект glue ^[1], написанный на Питоне.

sudo pip install glue

Если он уже установлен, мы сможем сразу же создать нужный пакет значков. Мы хотим очистить папку от лишних файлов, и оставить только png для обработки.

find ./icons/* ! -name "*.png" -delete
glue icons mimetypes

Попытка прохода по реальным значкам выявила ошибку в скрипте. Он не понимает двойной плюс в имени С++, и считает файлы text-x-c.png и text-x-c++.png одинаковыми (режет плюсы в имени CSS-класса). Выход нашёлся в замене плюсов на pp.

rename 's/++/pp/' icons/*.png

5. Почистим за собой:

mv mimetypes/* ./
rm icons links mimetypes -fr

Эту команду можно не использовать, если нужно исследовать промежуточные результаты.
6. На выходе мы получаем рабочий css-спрайт для (практически всех) актуальных файлов по их MIME-типу.
Мы можем собрать все команды в единый скрипт-генератор:

#!/bin/bash

mkdir ./icons
cp `find $1/* -type f` ./icons -R

for fname in icons/*.svg; do
    inkscape -z -f $fname -e ${fname%%.svg}.png
done

find ./icons/* ! -name "*.png" -delete
rename 's/++/pp/' icons/*.png
glue icons mimetypes

mv mimetypes/* ./
rm icons links mimetypes -fr

Передайте на вход скрипта папку-исходник и он создаст css-спрайт в текущей папке.

За бортом остался вопрос установки ссылок на идентичные типы файлов (например, текстовый документ LibreOffice/MS Office может иметь одинаковый значок). Получить эту информацию можно по адресу /usr/share/mime/, где находятся файлы xml с описанием типа MIME, используемого значка, названием формата файла в нескольких локалях. Там же можно получить информацию для сопоставления одного значка с другим по родственному типу файлов.

Автор: galadhon

Источник ^[2]