svg / pngアイコンからのMIME記述子用のCSSスプライトの構築

入門：私たちのサイトには、ファイルをサイトにアップロードできるファイルマネージャーがあります。 この場合、ファイルはMIMEタイプによってアイコンに自動的にマップされる必要があります。



問題：多くのMIMEタイプがあり、毎回それらのアイコンを手動で収集するのは非常に長く（そして愚かな）です。 何らかの自動ソリューションが必要です。



解決策：このノートでは、UbuntuディストリビューションにインストールされたGTK / Qtテーマパッケージのアイコンに基づいて、後でサイト上でMIME記述子として接続するためのCSSスプライトを自己作成するための簡単なレシピをまとめました。



/ usr / share / iconsにあるLinux ubuntuディストリビューションは、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％、この場合は48x48）。

 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スプライトを作成するには、Pythonで記述されたグループロジェクトが必要です。

 sudo pip install glue
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

既にインストールされている場合は、目的のアイコンパックをすぐに作成できます。 不要なファイルからフォルダーをクリアし、処理のためにpngのみを残します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際のアイコンを調べてみたところ、スクリプトにエラーが見つかりました。 彼はC ++名の二重プラスを理解せず、text-xc.pngとtext-x-c ++。Pngファイルは同じであると見なします（CSSクラスの名前のプラスを切り取ります）。 解決策は、プロをppに置き換えることでした。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

5.私たちは自分で掃除します：

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

中間結果を調査する必要がある場合、このコマンドは省略できます。

6.出力では、MIMEタイプ別に（ほとんどすべての）実際のファイルのcssスプライトが機能します。

1つのスクリプトジェネレーターですべてのコマンドを収集できます。

 #!/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-spriteが作成されます。



同一のファイルタイプへのリンクの問題は船外に残っていました（たとえば、LibreOffice / MS Officeテキストドキュメントには同じアイコンが付いている場合があります）。 この情報は、/ usr / share / mime /で取得できます。xmlファイルは、MIMEタイプの説明、使用されているアイコン、いくつかのロケールのファイル形式の名前とともに配置されています。 そこで、関連するファイルの種類に応じて、あるアイコンを別のアイコンと一致させるための情報を取得できます。