SVGs

SVG images

If you need SVG files as images instead of icons, put your images in an images folder. To render the SVG icon, use the ws-assets stream wrapper:

<img src="{{ file_create_url('ws-assets://images/icon.svg')">

SVG Icons

Wingsuit generates an SVG sprite map for every SVG located in an icons folder.

To render the icons include the svg atom in your Twig template:

{% include "@atoms/svg/svg.twig" with {"variant": 'icon', icon: "icon" }

Multiple SVG spritemaps.

If you need more than one spritemap you can put your icons in a separate folder and extend the preset configuration in wingsuit.yml. For example, if you need a spritemap for your language icons, put all the icons in a folder called icons-languages. Then you need to configure the svg preset with multiple svg folders.

Here's the configuration for our icons-languages example:

  module.exports = {
    parameters: {
      'svg': {
        sources: [
              {
                sourceFolder: 'icons',
                jsonFile: path.join(appConfig.absAppPath, '/config/silo/svgs.json'),
                spriteFilename: 'images/spritemap.svg',
              },
              {
                sourceFolder: 'icons-languages',
                jsonFile: path.join(appConfig.absAppPath, '/config/silo/svgs-languages.json'),
                spriteFilename: 'images/spritemap-languages.svg',
              },
            ],
      }
    },
    ...
  };

After that you need to adjust the icons.mdx file to read the new svg-languages.json.