Git Product home page Git Product logo

ember-svg-jar's Introduction

Standard
Ember SVGJar

Build Status NPM Version NPM Downloads Ember Observer Score

The best way to bring SVG goodness to your Ember application

What’s in the Box?

  • “install it and forget it” mode (no configuration needed)
  • automatic SVG optimization (it can cut file size by half or more)
  • a kick ass viewer to find and use your assets the fastest way possible
  • a handy helper {{svg-jar "asset-name"}}
  • support for both inline and symbol embedding methods

Installation

$ ember install ember-svg-jar

Try it in 4 easy steps

  • Put some SVG files to any place in your public directory.
  • 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.

Usage

Just drag and drop SVG images to your source directory and copy & paste them from the viewer to your templates.

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

Helper

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

{{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>

Compatibility

The addon is compatible with Ember 1.10.1 and beyond.

Configuration

Note: In most of cases, 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.

Development setup

Installation

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 http://www.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

ember-svg-jar's People

Contributors

ivanvotti avatar ember-tomster avatar djsegal avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.