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.
Top comments (0)