SVG Workflow

In Larva projects, SVGs can be used in three ways:

1. an icon sprite
2. inline in CSS
3. directly inlined SVG

Option 1: SVG Icon Sprite

An SVG icon sprite is provided by larva-svg that includes basic, brand-agnostic icons such as social icons, a print icon, search, and envelope. The default icons can be viewed here.

To add project-level icons, add an SVG to assets/svg/icons and run the build command as specified in the project README.

c-icon is intended to work directly with the SVG icon sprite, and you should definitely use it!

Note: the spite should be loaded using the ajaxIconSprite JS module, and icons may be briefly invisible while it is loaded. If your SVG needs to be visible immediately (e.g. logo in the header), use the inline SVG method described below.

(todo: add directions for using ajaxIconSprite)

Option 2: SVG in CSS

To use SVG icons in CSS, you should:

1. Optimize the SVG SVGOMG GUI
2. Add the SVG source to a Sass variable
3. Add the SVG as an extension of the a-icon CSS algorithm at the project-level. Refer to this implementation in ArtNews.

Option 3: Inline SVG

To use an inline SVG outside of CSS or a sprite – that is, the entire SVG markup itself is rendered inline in the HTML, follow these steps:

1. Add and optimize the SVG file

(note, assets will be the Larva directory in newer themes, and will be called larva in older themes)

1. Add the SVG file to ./assets/src/svg/ (not in the icons directory)
2. Run the following command from the root of assets:

assets $ node_modules/.bin/svgo -f src/svg -o build/svg

This will output optimized SVGs to the build/svg directory.

2. Include the SVG in Twig

The include syntax for including an SVG is not exactly the same as for a PHP include, since it needs to point to a different directory besides patterns. The Twig parser requires the following structure:

{% include '../../build/svg/' ~ module_svg ~ '.svg' %}

Where module_name_svg is the name of the processed SVG file inside assets/build/svg. Here is the source in the Twig parser, for reference.

In the Node prototype, you must add a string containing the name of the SVG file to the data object:

module.exports = {
    module_svg: 'file-name'
    // other data ...
}

In the PHP template, this will output:

<?php \PMC::render_template( CHILD_THEME_PATH . '/assets/build/svg/' . ( $module_svg ?? '' ) . '.svg', [], true ); ?>

For an example, refer to the inline SVG in c-logo in ArtNews.

Notes on adding logos

• The c-logo SVG source needs to have inline height/width 100%
• The containing element should have a width or max-width
• Check c-logo in the header on artnews.com for an example