svpug: Generate Pug mixins from SVG files
Tags: svg, pug, node, pugjs
Published: 2021-05-11 07:12:45

In this article, we are going to take a look at a CLI tool called [svpug](https://github.com/rajasegar/svpug) for generating [Pug](https://pugjs.org) 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](https://expressjs.com) 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.

```pug
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.

{% twitter 821449667821142016 %}

svpug is inspired by [svgr](https://react-svgr.com) 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:
```pug
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
```json
{
"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](https://github.com/elrumordelaluz/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

```html
<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
```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.