Collection of plugins and various modules I use for 11ty
Installations
npm install @e11ty/eleventy-plugin-svg-spriteDeveloper Guide
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.10.0
NPM Version
10.2.3
Score
48.4
Supply Chain
31.3
Quality
70
Maintenance
100
Vulnerability
91.3
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
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
1
Last Week
2
Last Month
19
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
6
NPM Version
10.2.3
Node Version
20.10.0
Published on
Sep 09, 2024
Total Downloads
Cumulative downloads
Total Downloads
314
Last Day
0%
1
Compared to previous day
Last Week
0%
2
Compared to previous week
Last Month
0%
19
Compared to previous month
Last Year
0%
314
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Peer Dependencies
1
Dev Dependencies
5
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
No vulnerabilities found.
No security vulnerabilities found.