
Security News
Official Go SDK for MCP in Development, Stable Release Expected in August
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.
ember-inline-svg
Advanced tools
Displays SVG images inline.
ember install ember-inline-svg
{{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"}}
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'
]
}
});
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
}
});
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')
}
});
}
}
}
]
}
}
});
Longer build times have two main causes:
.svg
files.svg
filesYou 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.
foo/bar/baz.svg
vs. /foo/bar/baz.svg
.public
is not part of the path. So use foo.svg
instead of /public/foo.svg
.svg.paths
option, check the following:.svg
file you're trying to inline is a direct or indirect child of any of the directories listed in svg.paths
./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
.See the Contributing guide for details.
This project is licensed under the MIT License.
v1.0.1
htmlSafe
import deprecation and failure on Ember.js v3.27+FAQs
Ember CLI addon to render SVG images inline
The npm package ember-inline-svg receives a total of 18,169 weekly downloads. As such, ember-inline-svg popularity was classified as popular.
We found that ember-inline-svg demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.
Security News
New research reveals that LLMs often fake understanding, passing benchmarks but failing to apply concepts or stay internally consistent.
Security News
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.