public class SvgSymbol extends AssetAggregator
SVG symbol for icons: merge svg files from a folder and generates a
sprite.svg and sprite.css files.
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
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 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
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.
| Modifier and Type | Class and Description |
|---|---|
static class |
SvgSymbol.Tuple<T1,T2> |
| Modifier and Type | Method and Description |
|---|---|
List<String> |
fileset() |
void |
run(com.typesafe.config.Config conf) |
name, set, set, toStringexcludes, get, optionspublic SvgSymbol()
SvgSymbol.public List<String> fileset()
fileset in class AssetAggregatorpublic void run(com.typesafe.config.Config conf)
throws Exception
run in class AssetAggregatorExceptionCopyright © 2018. All rights reserved.