Icon class生成器（Python）

Icon class生成器（Python）

先说起因，项目中有很多图标，需要把美工给的三种尺寸的png加工成class来用，这样的好处就不必说了。但是图标数量比较大，以后换肤的时候，更是纯搬砖的活，写了个脚本来解放一下以后写icon的class的搬运工。

搬砖步骤：

1. 所有的icon的一倍图片，与本脚本放到一起（全部英文命名）

   • 图片命名与class一致,对应三种尺寸标记为1,2,3号.所有图片存储位置为:src/public/assets/images.
   • class命名: 图标名称+图标状态(N:normal;O:on;C:click;D:disable)
   • 使用者不关心图片大小.(^o^)/~
   • 注:图标最多有4种情况,个别图标可能不足4种,请勿强求.
     

2. 运行脚本

   • python iconClass.py

3. 将输出的内容copy到一个可以格式化的地方（比如webstream）
   

4. 格式化一下，然后利用全局替换，把图片路径换一下。

5. 最后结构：

/*以下参照UI20161220提供的图标*/

@media all and (max-width: 1280px) {
    /*置顶*/
    .putTopN {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopN1.png) no-repeat;
        background-size: 100% 100%;
    }

    .putTopN:hover {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopC1.png) no-repeat;
        background-size: 100% 100%;
    }

    .putTopC {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopC1.png) no-repeat;
        background-size: 100% 100%;
    }

    .putTopD {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopD1.png) no-repeat;
        background-size: 100% 100%;
    }
}

@media all and (min-width: 1280px) and (max-width: 1920px) {
    /*置顶*/
    .putTopN {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopN2.png) no-repeat;
        background-size: 100% 100%;
    }

    .putTopN:hover {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopC2.png) no-repeat;
        background-size: 100% 100%;
    }

    .putTopC {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopC2.png) no-repeat;
        background-size: 100% 100%;
    }

    .putTopD {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopD2.png) no-repeat;
        background-size: 100% 100%;
    }
}

@media all and (min-width: 1920px) {
    /*置顶*/
    .putTopN {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopN3.png) no-repeat;
        background-size: 100% 100%;
    }

    .putTopN:hover {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopC3.png) no-repeat;
        background-size: 100% 100%;
    }

    .putTopC {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopC3.png) no-repeat;
        background-size: 100% 100%;
    }

    .putTopD {
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/putTopD3.png) no-repeat;
        background-size: 100% 100%;
    }
}

---

附源码

# coding: utf8
import os
from PIL import Image
# 获取指定图片的长和宽
def imgSize(imgPath):
    img = Image.open(imgPath)
    return img.size

# 获得.png的图片
def judjepng(filename):
        if os.path.isfile( filename ):
            a,b = os.path.splitext( filename )
            if b == ".png":
                return 1;
        else:
            return 0;

def getFileList( p ):
        p = str( p )
        if p=="":
              return [ ]
        if p[ -1] != "/":
             p = p+"/"
        a = os.listdir( p )
        b = [ x   for x in a if judjepng( p + x )==1 ]
        return b

path = os.getcwd();
imgPaths = getFileList( path )
for imgPath1 in imgPaths:
    a,b = os.path.splitext( imgPath1 )
    imgsize = imgSize(imgPath1)
    classname = "." + a[:-1] +"{display: inline-block;width: "+str(imgsize[0])+"px;height: "+str(imgsize[1])+"px;background: url(../images/"+ a +".png) no-repeat;background-size: 100% 100%;}"
    print classname

补充:

    classname = "." + a[:-2] +"N:hover{display: inline-block;width: "+str(imgsize[0])+"px;height: "+str(imgsize[1])+"px;background: url(../images/"+ a +".png) no-repeat;background-size: 100% 100%;}"
    #   classname = "." + a[:-1] +"{display: inline-block;width: "+str(imgsize[0])+"px;height: "+str(imgsize[1])+"px;background: url(../images/"+ a +".png) no-repeat;background-size: 100% 100%;}"
    #   print " <td><span class=\" "+ a[:-1] + "\"></span></td><td>" + a[:-1] + "</td>"
    print classname