Service Studio
In Service Studio I would like to feature to define a new Image or Svg sprite. Each sprite would have a Name attribute.
After the sprite is defined, the user would import one or more Image or Svg files into the sprite as resource. Each resource would have an attribute of Name.
In addition, one or more resolution will be define per sprite definition with the following attributes:
- Name
- Height
- Width
Sprite Component
A new Sprite component would be need to support the rendering of a resource contained in the sprite file. The component would would have three properties:
- Sprite name
- Resource name.
- Resolution name
Runtime Implementation
During a compile, if needed ServiceStudio, would:
- scale image resource files to a common size
- generation a sprite file
Note an svg sprite would not need scaling.
For each Page containing one or more Sprite components the page header would include (if needed):
- Import/Reference to Sprite file
- Import/Reference to the CSS styles
For each use of the the Sprite component:
- html to render the resource
- css to render the resource
- js to render to resource
Note there a many guides on creating and using Sprite files for images and svgs. Here is one from fontawsome. Emphasis in implementation should be on fastest rendering time followed by content size.