Build CSS sprites for MIME descriptors from svg / png icons

Introductory: on our site there is a file manager that can upload any file to the site; at the same time, the file should be automatically mapped by its MIME type.

Problem: There are a lot of MIME types, collecting icons for them manually each time is very long (and stupid). Some kind of automatic solution is required.

Solution: in this article I collected a simple recipe for self-production of CSS sprites to connect them later as MIME descriptors on the site based on icons from the GTK / Qt themes packs installed in the Ubuntu distribution.

The linux ubuntu distributions at / usr / share / icons store system icons, including for representing files by their MIME type. License icons - in accordance with the package from which the distribution of these icons are put.
1. Find the folders with MIME icons installed in the system. If we need a certain size of files, sort only it.
')

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

Browse through the found folders and select the appropriate icons.
2. Create new folders for icons and copy icons into them. For example, Gnome 48x48 icons:

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

We share badges and symbolic links to reduce the total amount of information.
3. This is an additional step - it may be needed only if we receive images in the svg format (scalable vector graphics).
We need to go through all the icons in the ./icons folder and convert them to PNG format:

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

Since we are working with SVG, we can scale the original when converting to the desired size in points by setting the DPI parameter (a value of 90 equals 100% of the original icon size, in our case 48x48):

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

We do this in a loop like this:

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

4. To create CSS sprites, we need a glue project written in Python.

 sudo pip install glue 

If it is already installed, we can immediately create the necessary package of icons. We want to clear the folder of unnecessary files, and leave only the png for processing.

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

Attempt to pass through the real icons revealed an error in the script. He does not understand the double plus in the C ++ name, and considers the text-xc.png and text-x-c ++. Png files the same (cuts the pluses in the name of the CSS class). The way out was to replace the pluses with pp.

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

5. We clean for ourselves:

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

You can not use this command if you want to investigate intermediate results.
6. At the output we get a working css sprite for (almost all) actual files by their MIME type.
We can collect all the commands into a single script generator:

 #!/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 

Pass the source folder to the script and it will create a css sprite in the current folder.

Overboard is the question of installing links to identical file types (for example, a LibreOffice / MS Office text document may have the same icon). You can get this information at / usr / share / mime /, where xml files are located with a description of the MIME type, the icon used, the name of the file format in several locales. There you can also get information for comparing one icon with another for a related file type.