Ember-inline-svg NPM

ember-inline-svg

Displays SVG images inline.

Compatibility

Ember.js v3.4 or above
Ember CLI v2.13 or above
Node.js v8 or above

Installation

ember install ember-inline-svg

Usage

{{inline-svg "path/to/file"}}

This will display the SVG found at /public/path/to/file.svg (see below on how to change this).

You can specify a class for the element like so:

{{inline-svg "my-svg" class="foo"}}

Also, you can add/update <title></title> by doing:

{{inline-svg 'mySVG' title="myTitle"}}
{{inline-svg 'mySVG' class="myClass" title="myTitle"}}

Configuring

SVG Paths

By default the addon expects to find your SVG images at /public/, but you can change this by setting the svg.paths option in your application's ember-cli-build.js like so:

var app = new EmberApp({
  svg: {
    paths: [
      'public/images',
      'app/svgs'
    ]
  }
});

Optimizing

SVGs are optimized by svgo by default.

You can configure this by setting the svg.optimize options:

var app = new EmberApp({
  svg: {
    optimize: {
      plugins: [
        { removeDoctype: false },
        { removeTitle: true },
        { removeDesc: true }
      ]
    }
  }
});

Please bear in mind that but default we are stripping title from any svg with removeTitle: true, you can disable it with removeTitle: false or alternatively, you can disable every optimization by doing:

var app = new EmberApp({
  svg: {
    optimize: false
  }
});

Custom Plugins

SVGO now supports custom plugins.

See SVGO's plugins for examples on what you can do.

Eg, here's how you could strip IDs from all elements:

var app = new EmberApp({
  svg: {
    optimize: {
      plugins: [
        {
          myCustomPlugin: {
            type: "perItem",
            fn: function(item) {
              item.eachAttr(function(attr) {
                if (attr.name === 'id') {
                  item.removeAttr('id')
                }
              });
            }
          }
        }
      ]
    }
  }
});

Troubleshooting

Atrociously slow build times >:[

Longer build times have two main causes:

huge .svg files
lots of .svg files

You can easily run into this when using SVG fonts. By default ember-inline-svg processes all .svg files contained in the /public directory. If your fonts live somewhere inside that directory, e.g. /public/fonts, these files will be processed, although you will never use them (as inline SVGs).

A quick and easy fix is changing the svg.paths option in the configuration. Just explicitly list all directories with images that you want processed by ember-inline-svg.

If the longer build time is not caused by SVG fonts, but by actual SVG images that you actually need, you can turn off the optimization as a whole or individual plugins to remove or diminish another time-consuming build step.

Currently the caching does not work as expected. The bug is tracked in issue #15. We are positive, that fixing this bug will speed up the builds.

No SVG found / The Handlebars template is not rendered

If you switch to a route that contains an {{inline-svg}} helper and nothing is displayed, like really nothing, then this is caused by a failed assertion. Open the Dev Tools and you will see something like this:

Error: Assertion Failed: No SVG found for foo/bar/baz.svg

This happens, when you try to inline a non-exisent or wrongly addressed .svg file.

Check the spelling.
Make sure that your path is without a leading slash, e.g. foo/bar/baz.svg vs. /foo/bar/baz.svg.
The path is always absolute and not relative to the current URL.
public is not part of the path. So use foo.svg instead of /public/foo.svg.
If you fiddled around with the svg.paths option, check the following:

The .svg file you're trying to inline is a direct or indirect child of any of the directories listed in svg.paths.
If the filename is something like /public/images/foo/bar.svg and your svg.paths option is set to something like ['public/images'], you have to address the image with foo/bar.svg, instead of the default images/foo/bar.svg.