https://github.com/mikekasprzak/svg-sprite-tools

Tools for packing, unpacking, and using SVG sprites (symbols)
https://github.com/mikekasprzak/svg-sprite-tools

Last synced: 13 days ago
JSON representation

Tools for packing, unpacking, and using SVG sprites (symbols)

• Host: GitHub
• URL: https://github.com/mikekasprzak/svg-sprite-tools
• Owner: mikekasprzak
• Created: 2016-08-16T19:34:24.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-17T06:28:31.000Z (over 8 years ago)
• Last Synced: 2024-11-15T20:38:01.767Z (2 months ago)
• Language: PHP
• Homepage:
• Size: 20.5 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svg-sprite-tools

Tools for packing, unpacking, and using SVG sprites (i.e. ``'s)

Written in PHP. Uses the SimpleDOM library (included).

## svg-sprite-unpack

Takes a svg-sprite package (such as those generated by http://icomoon.io) and exports the individual SVG files.

## svg-sprite-pack

Takes 1 or more SVG files as input, outputs as svg-sprite package.

It uses the `` element to figure out what the `id` should be. If no title is present, or they conflict, an error will be reported. 

Like icomoon, if title is "asset", the `id` will be `icon-asset`. If you want to change this, change `$id_prefix` at the top of the file.

### Cross Browser Assumptions

* `` is not needed 

* `xmlns='blah'` attributes are not needed (invalid XML, but SVG is SVG)

* File can begin with `` instead of an XML header

* All SVG assets will be loaded in to the global scope. Really, you should only have one SVG file you embed/load, not multiple. The `` syntax is wonky anyway.

## svg-sprite-css

Takes an svg-sprite package and generates a CSS file containing new widths, for any icon that isn't square (icons are assumed to be 1em by 1em). This CSS code will correct the aspect ratio.

# Using sprites

```xml

```

Set the font-size to change the size of the icon.