- an easy to use helper
{{svg-jar "asset-name"}}
- automatic SVG optimization (it can cut file size by half or more)
- a visual workflow to find and use your assets the fastest way possible
- work out of the box (no configuration needed)
- support for both inline and symbol embedding methods
I know why. Just show me how to get started.
- original Font Awesome is about
149 KB
as TTF and88.3 KB
as WOFF - it includes
634
icons and you need just some of them usually - 20 Font Awesome icons in SVGJar will be about 4.3 KB (you save
84 KB
or145 KB
as TTF) - 50 Font Awesome icons in SVGJar will be about
9 KB
You can get Font Awesome icons as individual SVG files from font-awesome-svg:
git clone [email protected]:ivanvotti/font-awesome-svg.git
If you can go IE 9+ and Android 3+, SVG is a better solution than icon fonts. Also if your images are multi-coloured or involved in animation, you actually have to use SVG.
- Why GitHub switched from an icon font to SVG
- "Inline SVG vs icon fonts" from css-tricks
- Ten reasons to switch from an icon font to SVG
$ ember install ember-svg-jar
- Put some SVG files to any place in your
public
directory (e.g. get some from font-awesome-svg) - Run the development server and open this link with Chrome:
http://localhost:4200/ember-svg-jar/index.html
- Select any SVG there and click
Enter
to copy it to the clipboard. - Paste it into a template and see it rendered in your browser.
Drag and drop SVG images to your source directory (public
by default) and copy & paste them from the viewer to your templates.
The viewer is available at: http://localhost:4200/ember-svg-jar/index.html
Use the svg-jar
helper to embed SVG images to your application's templates:
The helper takes an asset ID and optional attributes that will be added to the created SVG element. The example above will create an SVG like this:
The addon is compatible with Ember 1.10.1 and beyond.
Note: Ember SVGJar should be useful without any configuration. But it wants to be very configurable when it's time to adjust it for your needs.
git clone [email protected]:ivanvotti/ember-svg-jar.git
npm install
bower install
npm run build
Run all tests and lint code (npm run lint && npm run nodetest && ember test
):
npm test
Test node modules (src
directory):
npm run nodetest
Test Ember related code:
ember test
ember test --server
ember try:each
Lint all code (src
, addon
, app
, node-tests
, tests
directories)
npm run lint
ember serve
- Visit the app at http://localhost:4200
For more information on using ember-cli, visit http://www.ember-cli.com/.
The viewer is a separate Ember application, which repository can be found at this link.
This project is distributed under the MIT license.
GitHub @ivanvotti · Twitter @ivanvotti