svg-symbol

SVG symbol for icons: merge svg files from a folder and generates a sprite.svg and sprite.css files.

Make sure you’ve already set up the assets module in your project!

dependency

<dependency>
 <groupId>org.jooby</groupId>
 <artifactId>jooby-assets-svg-symbol</artifactId>
 <version>1.6.6</version>
 <scope>provided</scope>
</dependency>

usage

assets {
  fileset {
    sprite: svg-symbol
  }

  svg-symbol {
    input: "images/svg"
  }
}

Previous example looks for *.svg files inside the images/svg folder and generate a sprite.svg and sprite.css files.

You can display the svg icons using id reference:

<svg>
 <use xlink:href="#approved" />
</svg>

This technique is described here: SVG symbol a Good Choice for Icons

options

output

Defines where to write the svg and css files. Default value is: sprite.

svg-symbol {
  output: "folder/symbols"
}

There are two more specific output options: svg.output and css.output if any of these options are present the output option is ignored:

svg-symbol {
  css {
    output: "css/sprite.css"
  },

  svg {
    output: "img/sprite.svg"
  }

}

id prefix and suffix

ID is generated from svg file names. These options prepend or append something to the generated id.

svg-symbol {
  output: "sprite"

  id {
    prefix: "icon-"
  }

}

Generates IDs like: icon-approved, while:

svg-symbol {
  output: "sprite"

  id {
    suffix: "-icon"
  }

}

Generates IDs like: approved-icon

css prefix

Prepend a string to a generated css class. Here is the css class for approved.svg:

.approved {
  width: 18px;
  height: 18px;
}

If we set a svg css prefix:

{ svg-symbol: { css { prefix: "svg" } } } 

The generated css class will be:

svg.approved {
  width: 18px;
  height: 18px;
}

This option is useful for generating more specific css class selectors.

css processors

• autoprefixer: parse CSS and add vendor prefixes to CSS rules via autoprefixer.

• props: replace application properties in CSS files.

• clean-css: minify css.

• csslint: check and validate css rules.

• less4j: Less support from less4j.

• less: Less support from less.js.

• sass: Sass support from Java Sass Compiler (libsass).

• svg-sprites: Generates SVG and CSS sprites with PNG fallbacks via dr-svg-sprites.

• svg-symbol: Generates SVG and CSS sprites using svg symbols.

• yui-css: YUI CSS optimizer.

js processors

• props: replace application properties in JavaScript files.

• jscs: JavaScript code style checker.

• jshint: JavaScript linter, helps to detect errors and potential problems in code..

• babel: Ecma6 now via Babel.

• rollup: rollup.js the next-generation ES6 module bundler.

• ng-annotate: Add, remove and rebuild AngularJS dependency injection annotations.

• closure-compiler: Google JavaScript optimizer and minifier.

• uglify: uglify.js optimizer.

• replace: replace strings in files while bundling them.

• requirejs: r.js optimizer.

• yui-js: YUI JS optimizer.