svg-spritify v1.0.0
svg-spritify
![npm.io NPM total downloads](https://img.shields.io/npm/dt/svg-spritify.svg?style=flat)
Creating SVG sprites has never been this easy. Easily generate sprites out of your SVG files.
A CLI tool for you to generate SVG sprites ASAP with support for multi-theme and multi-breakpoint configurations
Please consider following this project's author, Sina Bayandorian, and consider starring the project to show your :heart: and support.
Table of Contents
Install
Install with npm :
$ npm install -g svg-spritify
Usage
$ npx sprite
Configuration
This CLI comes with a proper default config that can be completely customized to best fit your needs. In order to override the default configuration you need to create a sprite.config.json
at the root of your project :
Name | Type | Default | Description |
---|---|---|---|
rootDir | string | "icons" | the directory where you should put your SVG icons |
outDir | string | ".output" | the directory where sprite SVG(s) and CSS will be generated |
filename | string | "sprite" | output SVG files' prefix name |
className | string | "sprite" | the className to be used for both CSS and SVG files |
media | "min" | "max" | "min" | the type of the media query used for responsive icons |
themes | string | "light" | the themes that you want your icons to support |
defaultTheme | string | themes0 | the default theme of your icons - explained below |
breakpoints | { bp: string: number } | { } | the breakpoints used for responsive icons |
breakpointUtils | boolean | true | if set to true , outputs per-breakpoint CSS utils - explained below |
css | { minify?: boolean; filename?: string } | { minify: false, filename: 'sprite' } | output CSS configuration |
demo | boolean | { theme: string: hex_color } | false | demo configuration - explained below |
Config Variants
This CLI in its core has a function called resolvePaths
that is responsible for resolving the inputs
and outputs
based the config variant you provide. There can be 4 different config variants based on how you choose to config the CLI :
single theme - single breakpoint place your SVG icons directly inside the
rootDir
. -rootDir
single theme - multi breakpoint you need one sub-folder per
breakpoint
directly inside therootDir
- the SVG icons of each breakpoint should be placed directly inside the related sub-folder. -rootDir/breakpoint
multi theme - single breakpoint you need one sub-folder per
theme
directly inside therootDir
- the SVG icons of each theme should be placed directly inside the related sub-folder -rootDir/theme
multi theme - multi breakpoint you need one sub-folder per
theme
directly inside therootDir
, and then one sub-folder perbreakpoint
directly inside each theme's sub-folder - the breakpoint's sub-folder is where you place the SVG icons -rootDir/theme/breakpoint
Theming
Theming is implemented using classNames in this package. Once you define your themes inside sprite.config.json
, the output css will look something like :
.<theme> .<icon-name> { ... }
You can show a given theme's icon by giving a className equal to the theme's name to a parent of the icon.
One thing to notice is the importance of the defaultTheme
. There is no className defined for the defaultTheme. There is no className defined for the defaultTheme. The default icons are shown by default as the name implies.
- Defaults to the first theme if not defined
Breakpoint Utils
If set to true
, generates one utility class for each breakpoint to create breakpoint-specific icons. For example, given "md": 768
, we have :
.sprite-md {
display: none;
}
@media (min-width: 768px) {
.sprite-md {
display: inline-block;
}
}
Demo
If set to true
, a demo.html
will be generated where you can see a list of your icons all at once - it can also be set to an object that accepts strings as keys and hex colors as values, each key is a theme
specified in the config and each color is the background-color
that is going to be used once you change the demo.html
file's theme :
{
"demo" {
"light": "ffffff",
"dark": "303030"
}
}
make sure not to include the #
in your hex string
29 days ago