Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rajasegar/svpug
Generate Pug mixins from SVG files automatically to be used in Pug templates.
https://github.com/rajasegar/svpug
mixins pug svg
Last synced: 2 months ago
JSON representation
Generate Pug mixins from SVG files automatically to be used in Pug templates.
- Host: GitHub
- URL: https://github.com/rajasegar/svpug
- Owner: rajasegar
- License: mit
- Created: 2021-05-07T09:30:56.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T18:04:33.000Z (3 months ago)
- Last Synced: 2024-10-01T15:04:48.710Z (3 months ago)
- Topics: mixins, pug, svg
- Language: JavaScript
- Homepage:
- Size: 477 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# svpug
[](https://npmjs.org/package/svpug)
[](https://github.com/semantic-release/semantic-release)
[](https://conventionalcommits.org)
Generate [Pug](https://pugjs.org) mixins from SVG files inspired by [svgr](https://react-svgr.com).
```
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](#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:
### From: discord.svg
```html
...
```
### 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)
...
```
## 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]
```