svpug

!Build and Deploy

Generate Pug mixins from SVG files inspired by svgr.

``
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. See Conversion section for more details.

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 like this:

$3

`html


...


`

$3


`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)

...

`

Options and Commands

If you want to convert a single SVG file you can use this variation:
`
svpug [input-file] [output-file]
svpug demo/svgs/twitter.svg views/icons/twitter.pug
`

If you don't want to overwrite existing files, you can use the --ignore-existing option,
`
svpug -i demo/svgs -o views/icons --ignore-existing
`

Help
`
svpug [args]

Options:
--version Show version number [boolean]
--help Show help [boolean]
-i, --input-dir The input directory containing SVG files [string]
-o, --output-dir The output directory containing SVG files
[string] [default: "views/svpug"]
-x, --ignore-existing Ignore existing files in the output directory
[boolean] [default: false]
``