Skip to content
This repository has been archived by the owner. It is now read-only.
Inject SVGs into HTML via script file
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
tasks
.gitignore
CHANGELOG.md
Gruntfile.js
README.md
package.json

README.md

grunt-svginjector NPM version

Inject external SVG files into HTML

grunt-svginjector is a Grunt plugin that allows you to inline SVGs into your HTML by way of a generated JavaScript file. It works great in conjunction with grunt-svgstore for using SVG icons.

Read this article to see how I'm using it.

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-svginjector --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-svginjector');

The svginjector task

Run this task with the grunt svginjector command.

Options

container

Type: String Default: #svginjector

The ID of the element into which to inject the SVGs.

mode

Type: String Default: replace

The mode option controls how the SVG is inserted into the DOM. Possible values:

  • replace replaces the content of the DOM element;
  • append adds the SVG as the last child of the DOM element;
  • prepend adds the SVG as the first child of the DOM element.

Usage

A quick example (see the example folder for more input/output examples):

grunt.initConfig({
	svginjector: {
		example: {
			options: {
				container: '#icons-container'
			},
			files: {
				'example/dist/icons.js': 'example/src/icons.svg'
			}
		}
	}
});
You can’t perform that action at this time.