haikon-js

A library for parsing HVIF vector icon files

Usage no npm install needed!

<script type="module">
  import haikonJs from 'https://cdn.skypack.dev/haikon-js';
</script>

README

Haikon

This is my library for parsing HVIF vector icon files.
Here is an example/ test page.

There is quite a nice article about the format here: 500 Byte Images.
There is also a Wikipedia page.

API

The top level module contains two objects, hvif and svg, both of which are used as a namespace only. The hvif object exposes constants and a parse function. The svg object contains a number of functions for generating css declarations, svg attribute-values and svg -dom trees.

  • hvif
    • parseIcon (buffer [, filename]), a.k.a. parse
      • constants
        • colorTags, a.k.a. colourTags
        • styleTags
        • gradientTypes
        • lineCaps
        • lineJoins
  • svg
    • colorCss (color)
    • styleCss (style)
    • gradientCss (gradient)
    • printTransform (transform)
    • printPath (path)
    • renderIcon (icon)
    • renderShape (shape)
    • renderGradient (gradient)

Object model

The parseIcon function parses raw icon data into a structure of plain javascript objects and arrays that are used to model the Colors, Gradients, Styles, Paths and Shapes that are used.

Icon

A HVIF icon consists of three sections sections: styles, paths and shapes. The shapes section refers back to the styles and paths sections.

  • Icon := {
    • filename :: string | null
    • styles :: [Style]
    • paths :: [Path]
    • shapes :: [Shape] }

Styles, Colors and Gradients

Colors are stored as single byte that determines the format, followed by RGBA (4bytes), RGB (3 bytes), K (greyscale, 1 byte) or as KA (greyscale with alpha, 2 bytes). A Style is either a color, or a gradient.

  • Style := Color | Gradient
  • Color := [RGBA = 0x1, r g b a] | [RGB = 0x2, r g b] | [KA = 0x4, k a] | [K = 0x5, k]
  • Gradient := [GRADIENT = 0x2, type, flags, stopCount, ?matrix, Stop*]
  • Stop := …

Paths, Lines, Curves and Commands

  • Path := …

Shapes and Transformers

  • Shape := { styleIndex:int, pathIndices:[int], ?transformers:[Transformer]
  • Transformer := …

Limitations

Some glitches remain to be fixed and a few things are not (yet) supported, such as a.o. conic– and diamond gradients (they have to be emulated as svg does not support them natively).

Acknowledgements

The directory demo/haiku-icons/ contains icons from the haiku OS that are used in the demo page. The icons were taken from this repository. I have combined them into the single haiku-icons.tar file, and make use of tinytar by Levko Kravets to extract them from the .tar file before they are parsed and rendered.

License

MIT