Git Product home page Git Product logo

bootstrap-sprite-generator's Introduction

Bootstrap Sprite Generator

Generate twitter bootstrap sprite files for different icon libraries.
Supported icon libraries: Glyph Icon, Figue Icons and Generic Folders :)

I bought Glyph Icons Pro Library recently and found that it is really hard to create sprite.less file and sprite image file for 400 icons. I am not a designer and I do not have PS or other tools to generate big sprite file from list of small files.

So, that is why I have created that python script.

Usage example

Generate sprite image and sprite.less files for Glyph Icons library

  1. mkdir ~/icons
  2. git clone git://github.com/plar/bootstrap-sprite-generator.git ~/icons
  3. cd ~/icons
  4. unzip glyphicons_pro.zip -d ~/icons
  5. cd ~/icons
  6. ./bootstrap_sprite_generator.py -t gi:normal
Load icons(normal) from glyphicons_pro/glyphicons/png directory...
glyphicons_073_signal.png: adjust icon name 'signal' to 'signal-radar'
glyphicons_079_signal.png: adjust icon name 'signal' to 'signal-network'
glyphicons_091_adjust.png: adjust icon name 'adjust' to 'adjust-contrast'
glyphicons_119_adjust.png: adjust icon name 'adjust' to 'adjust-eq'
glyphicons_222_share.png: adjust icon name 'share' to 'share-arrow'
glyphicons_326_share.png: adjust icon name 'share' to 'share-point'
Total icons(normal): 400
Tile size: 36px x 30px
Sprite image size in tiles: 20x20
Sprite image size in pixels: 720x600
Creating sprite image glyphicons_output/sprites-pro.png...
Done
Creating sprite css glyphicons_output/sprites-pro.less...
Done

If you want to resize icons to smaller size you can use -r argument.

ie: ./bootstrap_sprite_generator.py -t gi:normal -r 24
All icons will be resized to 24x24 pixels if they aren't already and the sprite image and css files will be generated with the new icon sizes.

Generic generator

You can generate sprite image file and sprite css file for any set of icons. For example if you have fugue-icons in ~/icons/fugue-icons-3.0/icons directory then you can run generator as:

./bootstrap_sprite_generator.py -t gn:all -d ~/icons/fugue-icons-3.0/icons -o ~/icons/fugue-output

Load icons(all) from ~/icons/fugue-icons-3.0/icons directory...
Total icons(all): 3000
Tile size: 16px x 16px
Sprite image size in tiles: 55x55
Sprite image size in pixels: 880x880
Creating sprite image ~/icons/fugue-output/sprites-pro.png...
Done
Creating sprite css ~/icons/fugue-output/sprites-pro.less...
Done

CLI Help

usage: bootstrap_sprite_generator.py [options]

Generate bootstrap sprite files for different icon libraries.

optional arguments:
  -h, --help            show this help message and exit
  -d ICON_DIR           icon files directory
  -o OUTPUT_DIR         result files directory. if directory does not exist, 
                        it will be created automatically.
  -r RESIZE             resize original library icons to specific size(pixels)
  -m ADJUST_MAP         adjust icon name for specific file. It option can be
                        used multiply times. 
                        ie: -m glyphicons_079_signal.png:signal-strength
  -t {gi:normal,gi:large,gn:all}
                        sprite generator type

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.