https://github.com/brob/eleventy-plugin-svg-contents

An Eleventy plugin to grab the contents of an SVG file to allow for embedding in your template with all the power of SVG.
https://github.com/brob/eleventy-plugin-svg-contents

Last synced: 2 days ago
JSON representation

An Eleventy plugin to grab the contents of an SVG file to allow for embedding in your template with all the power of SVG.

• Host: GitHub
• URL: https://github.com/brob/eleventy-plugin-svg-contents
• Owner: brob
• Created: 2019-06-21T01:39:32.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T08:24:40.000Z (11 months ago)
• Last Synced: 2024-04-11T15:46:37.039Z (7 months ago)
• Language: JavaScript
• Size: 1.12 MB
• Stars: 54
• Watchers: 3
• Forks: 7
• Open Issues: 20
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-starred - brob/eleventy-plugin-svg-contents - An Eleventy plugin to grab the contents of an SVG file to allow for embedding in your template with all the power of SVG. (others)

README

        
# eleventy-plugin-svg-contents

An [Eleventy](https://github.com/11ty/eleventy) universal plugin to grab the contents of an SVG file to allow for embedding in your template with all the power of SVG.

## Installation

Available on [npm](https://www.npmjs.com/package/eleventy-plugin-svg-contents).

```bash

npm install eleventy-plugin-svg-contents --save

```

Open up your Eleventy config file (probably `.eleventy.js`) and add the plugin:

```js

const svgContents = require("eleventy-plugin-svg-contents");

module.exports = function(eleventyConfig) {

  eleventyConfig.addPlugin(svgContents);

};

```

## Usage

### Base usage

In your (Nunjucks, Liquid or Handlebars) templates, use the following syntax to grab the contents from any SVG in your project path:

```html

// nunjucks/liquid

{{ 'path/to/file.svg' | svgContents }}

// handlebars

{{{svgContents 'path/to/file.svg' }}}

```

_**Quick note:** You may need to pass another filter after to have this render as html. In Nunjucks, you'll add `| safe` to the end._

### Adding a class to your SVG

You can append the `svg` class with the `class` option.

```html

// Nunjucks

{{ 'path/to/file.svg' | svgContents("extra-class-one extra-class-two") }}

// Liquid

{{ 'path/to/file.svg' | svgContents: "extra-class-one extra-class-two" }}

// Handlebars

{{{svgContents 'path/to/file.svg' "extra-class-one extra-class-two" }}}

```

### Using other SVG elements

If you want to use an element selector other than SVG (or want to select a specific piece of an SVG) you can use an optional second argument to provide a selector for the element in your SVG file. Any selector strings will work (classes, ids, attr, element).

Due to limitations of Liquid and Handlebars, you'll need to have a placeholder string for the optional class name argument.

```html

// Nunjucks

{{ 'path/to/file.svg' | svgContents("", "symbol") }}

{{ 'path/to/file.svg' | svgContents("add-class", "#byId") }}

// Liquid

{{ 'path/to/file.svg' | svgContents: "", "symbol" }}

{{ 'path/to/file.svg' | svgContents: "add-class", "#byId" }}

// Handlebars

{{{svgContents 'path/to/file.svg' "" "symbol" }}}

{{{svgContents 'path/to/file.svg' "add-class" "#byId" }}}

```

### Filters

* `svgContents`: Grabs the xml from an SVG and passes it to your template. Voila! Instant embedded SVG from a file!

* Future Plan `stripTitle`: A filter to strip the `` that often comes with SVGs and can cause havoc with SEO.