🌟 Best way to embed SVG images into your Ember application
Switch branches/tags
Clone or download
Latest commit 8e5ca61 Oct 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon refactor(make-svg): replace ember-copy with assign Aug 4, 2018
app Get rid of outdated file Apr 15, 2018
config Remove const if it is not at the top level of a module Apr 24, 2018
docs Merge pull request #72 from ivanvotti/custom-svgo-module May 23, 2018
lib ensure-posix-path-to-symbols-file Oct 11, 2018
node-tests Turn on prefer-destructuring & clean up related code May 3, 2018
public Add workaround for broccoli-asset-rev bug Mar 26, 2018
tests Upgrade ember cli to 3.2.0 Jul 7, 2018
vendor Update ember-cli to 2.12.1 Apr 9, 2017
.editorconfig Upgrade ember-cli to 2.7.0 Jul 29, 2016
.ember-cli Update Ember-CLI and add tests/dummy/public Dec 13, 2017
.eslintignore Upgrade ember cli to 3.2.0 Jul 7, 2018
.eslintrc.js switch from src to lib directory Mar 25, 2018
.gitignore Upgrade ember cli to 3.2.0 Jul 7, 2018
.npmignore Update .npmignore Jul 18, 2018
.travis.yml Upgrade ember cli to 3.2.0 Jul 7, 2018
.watchmanconfig Initial Commit from Ember CLI v2.5.0 May 30, 2016
CHANGELOG.md Update changelog Sep 26, 2018
LICENSE.md ember-cli-update to 3.0 Feb 23, 2018
README.md Drop Node 4 support May 2, 2018
ember-cli-build.js Remove const if it is not at the top level of a module Apr 24, 2018
eslint-rules.js Turn on prefer-destructuring & clean up related code May 3, 2018
index.js Update ESLint and cleanup code Mar 26, 2018
logo.svg Released v0.10.3 May 12, 2017
package.json 1.2.2 Sep 26, 2018
symbols-loader.html Add rootURL option May 12, 2017
testem.js Upgrade ember cli to 3.2.0 Jul 7, 2018
yarn.lock Add ember-assign-polyfill to support Ember <= 2.4 Aug 29, 2018

README.md

Logo
Ember SVGJar

Build Status NPM Version Ember Observer Score

The best way to embed SVG images into your Ember application

Features

  • a visual workflow to find and use your assets the fastest way possible
  • automatic SVG optimization (it can cut file size by half or more)
  • work out of the box (no configuration needed)
  • an easy to use helper {{svg-jar "asset-name"}}
  • support for both inline and symbol embedding methods

Why does this matter?

I know why. Just show me how to get started.

Switching from Font Awesome to SVG will save you 80 Kb or even more:

  • 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:

git clone git@github.com:ivanvotti/font-awesome-svg.git

SVG vs icon fonts

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.

Installation

$ ember install ember-svg-jar

Start in 4 easy steps

  • Put some SVG files to any place in your project's 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 press Enter to copy it to the clipboard.
  • Paste it into any template and see it rendered in your browser.

Usage

Drag and drop SVG images to your project's public directory and copy & paste them from the assets viewer to your templates.

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

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

Configuration

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.

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>

Compatibility

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

  • Node 6.* || >= 8.*
  • Ember >= 1.13.13

The old addon versions <= v0.12.0 are compatible with old Node and Ember 1.10.1 and beyond.

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.

Development setup

Installation

  • git clone <repository-url> this repository
  • cd ember-svg-jar
  • npm install

Building

  • npm run build

Running tests and linting

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

Running the dummy app

For more information on using ember-cli, visit https://ember-cli.com/.

Asset viewer

The viewer is a separate Ember application, which repository can be found at this link.

License

This project is distributed under the MIT license.


GitHub @ivanvotti  ·  Twitter @ivanvotti