@info.nl/svg-symbol

File system based SVG symbol 'sprite' generator.

Installation

$ npm install @info.nl/svg-symbol

Configuration

package.json config options (defaults):

{
    "config": {
        "@info.nl/svg-symbol": {
            "source": "./source/vector/symbol",
            "target": {
                "image": "./public/image",
                "style": "./source/style/include/svg-symbol"
            }
        }
    }
}

Example

Given the above default configuration, the following folder structure

• ./source/vector/symbol/
  • ./chart/
    • bar.svg
    • pie.svg
  • ./icon/
    • home.svg
    • search.svg

generates the files

• ./public/

  • ./image/
    • ./chart.svg
      • contains two symbols with the ids
        • chart-bar
        • chart-pie
    • ./icon.svg
      • contains two symbols with the ids
        • icon-home
        • icon-search

• ./source/style/svg-sprite/

  • ./chart.css
    • contains two rulesets with the selectors
      • .svg-chart-bar
      • .svg-chart-bar
  • ./icon.css
    • contains two rulesets with the selectors
      • .svg-icon-home
      • .svg-icon-search

License

MIT