Displays SVG images inline.
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:
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 Brocfile.js like so:
var app = new EmberApp({
svg: {
paths: [
'public/images',
'app/svgs'
]
}
});
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 }
]
}
}
});
Alternatively, you can disable it completely by setting this to false:
var app = new EmberApp({
svg: {
optimize: false
}
});
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.
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 usefoo.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 insvg.paths
. - If the filename is something like
/public/images/foo/bar.svg
and yoursvg.paths
option is set to something like['public/images']
, you have to address the image withfoo/bar.svg
, instead of the defaultimages/foo/bar.svg
.
git clone
this repositorynpm install
bower install
ember server
- Visit your app at http://localhost:4200.
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.