svpug: Generate Pug mixins from SVG files

In this article, we are going to take a look at a CLI tool called svpug for generating Pug mixins from SVG files. Before diving into the main content let's have some context first.

What is Pug?

Pug is a clean, whitespace sensitive syntax for writing HTML. It is a robust, elegant, feature rich template engine for Node.js. It's most widely used in Express.js applications in Node. It has got a terse syntax and packed with a lot of advanced capabilities for templating libraries like partials, layouts, and mixins.

doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

So why do we need such a utility to generate mixins in Pug from SVG files? It is basically an optimized include strategy for SVGs inside your Pug templates.

svpug is inspired by svgr which is the standard way of creating React components from SVGs.

You can run the CLI like below by passing the input directory of SVG files and the output directory where the new Pug mixins will be created.

npx svpug -i src/svgs -o views/icons

Install

npm install -g svpug

Usage

svpug -i src/svgs -o views/icons

This will convert all the SVG files in the folder src/svgs to Pug mixins in the folder views/icons.

The beauty of this conversion is that, it uses &attributes syntax in the mixins to explode the attributes passed via the mixin, so that you can override any property for the svg root tag.

Then you can use your mixins like this:

include icons/discord.pug
include icons/twitter.pug
doctype html
html
  head
    title svpug - Demo app
  body
    h1 Hello world
    p
      +svg-discord(fill="blue", width="32", height="32")
    p
      +svg-twitter(fill="steelblue", width="32", height="32")

You can also add to your development workflow by installing svpug as a dev dependency.

npm install svpug --save-dev

or using yarn

yarn add svpug --dev

and add it your package.json as a script like below

{
"svpug": "svpug -i src/svgs -o views/icons"
}

And use the script to generate Pug mixins

npm run svpug

or with yarn

yarn svpug

Conversion

Your SVG files will be converted to Pug mixins by parsing the SVG files using svgson and taking only the root SVG element and converting it in Pug format and the body of the SVG file will be kept intact inside the mixin.

From: discord.svg

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
  <path>
  ...
  </path>
</svg>

To: discord.pug

mixin svg-discord()
  svg(xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16")&attributes(attributes)
    <path>
    ...
    </path>

Hence if you are using Pug as the template engine for your Node.js applications or Express.js applications, please give svpug a try when you are using SVGs inside your templates. It is an elegant and efficient way of handling SVGs that save you a lot of time and make you more productive.