svg-symbol

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.2.3</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.

see also

css processors

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.

  • requirejs: r.js optimizer.

  • yui-js: YUI JS optimizer.