Webpack symbol loader

A webpack loader to extract graphical symbols from SVG documents to be used within a web context (e.g. React).

Symbols

A symbol is basically an named array of SVG groups. To define a symbol, you need to create a SVG element with the id set in a special format

<g id="symbol:name">
    ...
</g>

This defines a symbol group with the name "name". The symbol names can be any valid id character but ":". You can define symbol layers by adding another colon separated identifier

<g id="symbol:name:layer1">
    ...
</g>
<g id="symbol:name:layer2">
    ...
</g>
<g id="symbol:name:layer3">
    ...
</g>

Here, the symbol "name" consist of three different layers, to be drawn in document definition order as usual with SVG.

The loader will ignore all transforms outside of the symbol groups and on the group itself.

The loader will convert the symbols into a JSON structure which is exported as module export in the generated module.

module.exports = {
    "symbolName": {
        "name": "symbolName",
        "layers": [
            "layerName"
        ],
        "groups": [
            "<circle cx=\"0\" cy=\"0\" r=\"100\"/>"
            // ... one SVG snippet per layer ...
        ],
        "styles": [
            "fill: #0f0;"
            // ... one SVG CSS style string per layer ...
        ],
        "center": {
            "x": 50,
            "y": 50
        }
    }
}

The center object contains the center of the calculated bounding box. Paths are linearized to determine a good aproximation of the bounding box.

Links

Inkscape: open-source vector graphics editor