svgmule
v0.5.1
Published
Combines and minimizes your original SVG's on a per folder basis into one single file each.
Downloads
4
Maintainers
bennyschudelReadme
svgmule (work in progress)
SVG asset management made simple. Combines and minimizes your original SVG's on a per folder basis into one single file each.
svgmule --config '{"input_dir":"assets/"}'
turns
.
├── assets
│ ├── global
│ │ ├── logo.svg
│ │ ├── icon--help.svg
│ │ ├── icon--menu.svg
│ │ └── icon--heart.svg
│ └── pages
│ └── home
│ ├── welcome.svg
│ └── mule.svg
├── svgmule.yml
│ ...into
.
├── _build
| ├── global.svg
| └── pages.home.svg
├── assets
| ├── ...
| ...ready to be included
<body>
<? include "_build/global.svg" ?>
<? include "_build/pages.${page_name}.svg" ?>
...and to be used in your html
<style>
.logo {
width : 96px;
height : 64px;
}
</style>
<svg class="logo">
<use xlink:href="#svg-logo"/>
</svg>more in details soon.
Configuration
Please check defaults.yml for a list of available options.
The global configuration itself can be either done either via a config file in the root folder
svgmule.yml
or by providing a JSON string as an argument.
svgmule --config '{"input_dir":"assets/"}'
In a case where an SVG needs a specific treatment you can specify a FILENAME.svg.yml in the same folder where your SVG resides. If you need a special treatment for a whole folder you can provide a FOLDERNAME.yml configuration file on the same level as where your folder is.
.
├── assets
│ ├── global
│ │ ├── logo.svg
│ │ ├── logo.svg.yml
│ │ ├── ...
│ ├── pages
│ │ └── home
│ │ ├── welcome.svg
│ │ ├── mule.svg
│ │ ├── ...
│ └── global.yml
├── svgmule.yml
│ ...Minification / Optimization
SVG minification is done via svgo (svgmin) from @deepsweet.
About
Feedback welcome! Contact me @bennyschudel or follow me on twitter.
Copyright (c) 2014 Benny Schudel - MIT-License