ember-svg-jar
Best way to use SVG images in Ember applications
Last updated 14 days ago by ivanvotti .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-svg-jar 
SYNC missed versions from official npm registry.

Logo

Best way to use SVG images in Ember apps.

???? View Live Demo · ???? Report Bug · ???? Request Feature · ???? Ask Question

Build Status Ember Observer Score

Table of Contents

???? Features

Here's some of useful features:

  • Visual workflow to find and use SVGs the fastest way possible
  • Automatic SVG optimization (it can cut file size by half or more)
  • Easy to use helper {{svg-jar "asset-name"}}
  • Support for both inline and symbol embedding methods
  • Copy SVG as CSS background
  • Zero configuration

???? Getting started

Installation

$ ember install ember-svg-jar

Start in 3 easy steps

  • 1️⃣ Drop some SVG images to the public directory (e.g. material-design-icons)

  • 2️⃣ Open the asset viewer and select any icon you like

  • 3️⃣ Copy the helper code from the viewer and paste it to your template

???? Usage

Place your SVG images to the public directory (e.g. ./public/images/my-icon.svg). Then copy the helper code for your image from the asset viewer or just write it by hand like this: {{svg-jar "my-icon"}}.

The viewer is available at: http://localhost:4200/ember-svg-jar/index.html

If your rootURL is not /, then to use the asset viewer you will need to add rootURL to the addon config.

Helper

Use the svg-jar helper to embed SVG images to your application's templates.

For the default inline embedding strategy you can write:

{{svg-jar "my-cool-icon" class="icon" width="24px"}}

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:

<svg class="icon" width="24px">...</svg>

For the symbol strategy you will need to add # to the asset ID like this:

{{svg-jar "#my-cool-icon"}}

In this case the result can look like this:

<svg><use xlink:href="#my-cool-icon"></use></svg>

Assets from Node modules

By default ember-svg-jar looks for SVGs in the public directory. To get SVGs from node_modules packages or any other directory you will need to add them to ember-cli-build.js like this:

var app = new EmberApp(defaults, {
  svgJar: {
    sourceDirs: [
      'node_modules/material-design-icons/file/svg/design',
      'node_modules/material-design-icons/action/svg/design',
      'public/images/icons',
    ],
  },
});

Click here for more configuration options

Usage in an addon

Using ember-svg-jar in an addon is the same as in an app, except that in the package.json of the addon, it should be listed as one of the dependencies and not devDependencies.

???? Configuration

The addon should be useful without any configuration. But it wants to be very configurable when it's time to adjust it for your needs.

❓ FAQ

Q: Will the asset viewer affect my production build size?
A: No, it won't at all. The asset viewer is included in development mode only.

Q: Can it find SVG icons outside of the public directory, e.g. from node_modules?
A: Yes, it can import SVGs from any directory defined in the sourceDirs array.

Q: Why the SVG files deployed into the dist/assets folder without being fingerprinted?
A: This is done with the default ember cli behaviour. For more information see SVG Fingerprinting.

Q: Why does this matter?

Q: Why would you switch from Font Awesome to SVG?

  • original Font Awesome is about 149 KB as TTF and 88.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 or 145 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.

???? Compatibility

Latest ember-svg-jar 2.X.X currently supports:

  • Node 8.* || >= 10.*
  • Ember >= 2.X.X

???? Contributors

Contributions of any kind welcome! See the Contributing guide for details.

Thanks goes to these wonderful people:

Edward Faulkner
Edward Faulkner

????
Tobias Bieniek
Tobias Bieniek

????
Robert Wagner
Robert Wagner

????
Peter Wagenet
Peter Wagenet

????
Ryan Cook
Ryan Cook

????
Mirko Akov
Mirko Akov

????
Ewan McDougall
Ewan McDougall

????
Mark Catley
Mark Catley

????
John Griffin
John Griffin

????
Ivan Lučin
Ivan Lučin

????
James Shih
James Shih

????
djsegal
djsegal

????
Jan Buschtöns
Jan Buschtöns

????
Sivasubramanyam A
Sivasubramanyam A

????
Alex DiLiberto
Alex DiLiberto

????
Brian Runnells
Brian Runnells

????
Jen Weber
Jen Weber

????
Frédéric Soumaré
Frédéric Soumaré

????
David Laird
David Laird

????
Daan van Etten
Daan van Etten

????
Tom Carter
Tom Carter

????

???? License

This project is distributed under the MIT license.


GitHub @ivanvotti  ·  Twitter @ivanvotti

Current Tags

  • 2.2.3                                ...           latest (14 days ago)

43 Versions

  • 2.2.3                                ...           14 days ago
  • 2.2.2                                ...           a month ago
  • 2.2.1                                ...           a month ago
  • 2.2.0                                ...           a month ago
  • 2.1.0                                ...           2 months ago
  • 2.0.0                                ...           3 months ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0 [deprecated]           ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.12.0                                ...           2 years ago
  • 0.11.1                                ...           2 years ago
  • 0.11.0                                ...           2 years ago
  • 0.10.3                                ...           2 years ago
  • 0.10.2                                ...           2 years ago
  • 0.10.1                                ...           2 years ago
  • 0.10.0                                ...           3 years ago
  • 0.9.3                                ...           3 years ago
  • 0.9.2                                ...           3 years ago
  • 0.9.1                                ...           3 years ago
  • 0.9.0                                ...           3 years ago
  • 0.8.3                                ...           3 years ago
  • 0.8.2                                ...           3 years ago
  • 0.8.1                                ...           3 years ago
  • 0.8.0                                ...           3 years ago
  • 0.7.0                                ...           3 years ago
  • 0.6.1                                ...           3 years ago
  • 0.6.0                                ...           3 years ago
  • 0.5.0                                ...           3 years ago
  • 0.4.2                                ...           3 years ago
  • 0.4.1                                ...           3 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.3                                ...           3 years ago
  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 5
Last Day 1
Last Week 4
Last Month 106

Copyright 2014 - 2016 © taobao.org |