npmpackage.info

@e11ty/eleventy-plugin-svg-sprite

Collection of plugins and various modules I use for 11ty

0.0.2

TypeScript

45.86 kB

Installations

npm install @e11ty/eleventy-plugin-svg-sprite

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

20.10.0

NPM Version

10.2.3 Score

48.4

Supply Chain

31.3

Quality

Maintenance

100

Vulnerability

91.3

License

Pull Requests

Open

0

Total

1

Closed

0

Merged

1

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 2 Contributors

Languages

TypeScript

JavaScript

Liquid

Shell

HTML

TypeScript (92%)

JavaScript (5.43%)

Liquid (1.12%)

Shell (1.09%)

HTML (0.36%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

panoply

Download Statistics

Total Downloads

314

Last Day

Last Week

Last Month

Last Year

314

GitHub Statistics

6 Stars

50 Commits

1 Forks

1 Watchers

1 Branches

2 Contributors

Updated on Dec 18, 2024

Maintainers

Package Meta Information

Latest Version

0.0.2

Package Id

@e11ty/eleventy-plugin-svg-sprite@0.0.2

Unpacked Size

45.86 kB

Size

14.27 kB

File Count

NPM Version

10.2.3

Node Version

20.10.0

Published on

Sep 09, 2024

Total Downloads

Cumulative downloads

Total Downloads

314

Last Day

Compared to previous day

Last Week

Compared to previous week

Last Month

Compared to previous month

Last Year

314

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

11ty-svg-sprite

Yet another Eleventy plugin for handling SVG files with html-svg-sprite.

Why?

Because the author that wrote an alternative is a pleb, so we hard-fork, refine and isolate. :trollface:

Install

The @11ty/eleventy module is a peer and needs to be installed along side it.

1pnpm add 11ty-svg-sprite @11ty/eleventy -D

Usage

Pass it to the addPlugin within a .eleventy.js or .eleventy.cjs configuration file. Optionally use with 11ty.ts wrapper for type completions.

1const { defineConfig } = require('11ty.ts'); // Optional
2const { sprite } = require('@e11ty/eleventy-plugin-svg-sprite');
3
4module.exports = defineConfig(eleventyConfig => {
5
6  eleventyConfig.addPlugin(sprite, {
7    inputPath: '',                  // Relative path to svg directory
8    outputPath: '',                 // The output path of the SVG Sprite
9    globalClass: '',                // Class name to apply to all SVG occurrences
10    defaultClass: '',               // Fallback class applied to SVG icons
11    spriteShortCode: 'sprite',      // The sprite short code, defaults to {% sprite %}/
12    svgShortCode: 'svg',            // Icons tag, default to:  {% svg 'icon-name', 'custom-class' %}
13    spriteConfig: {                 // SVGO Sprite configuration, below is defaults
14      mode: {
15        symbol: {
16          inline: true,
17          sprite: 'sprite.svg',
18          example: false
19        }
20      },
21      shape: {
22        transform: [ 'svgo' ],
23        id: {
24          generator: 'svg-%s'
25        }
26      },
27      svg: {
28        xmlDeclaration: false,
29        doctypeDeclaration: false
30      }
31    }
32  });
33
34});

There are 2 different short codes. Place the sprite short code in your template and use the svg short code tag to reference different icons.

1<body>
2
3  {% sprite %}
4
5</body>

You can inject the <use> reference using the svg short code within your project at different points, for example:

1<section>
2
3  {% svg 'name-of-svg', 'custom-class' %}
4
5</section>

License

Apache 2.0

No vulnerabilities found.

No security vulnerabilities found.

@e11ty/eleventy-plugin-svg-sprite

Installations

Developer Guide

Yes

CommonJS, ESM

20.10.0

10.2.3

Score

Pull Requests

0

1

0

1

Issues

0

0

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

panoply

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

314

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

11ty-svg-sprite

Why?

Install

Usage

License