Create custom SVG

You need to configure development environment before doing this guide.

1 - Define the entry point

Each SVG depends on a collection and a group. To define the entry point of the SVG file, you must define a path like :


For example, the rounded Finnish flag :

  • collection_key : flag

  • group_key : finnish

  • svg_key : rounded

The entry point of the file will therefore be :


The command build then builds automatically depending on folders and files :

  • The collection flag

  • The group : finnish

  • The svg : rounded

2 - Add svg content

In this file we could have :

<svg class="svg-theme-dark">
     <path class="svg-fill-primary" d="..."></path>
     <path class="svg-fill-secondary" d="..."></path>

Reuse CSS, several CSS classes are available here to facilitate development.