ember-svg-jar

Ember SVGJar

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 for SVG assets with keyboard shortcuts
• 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

Advanced usage examples

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.

Real documentation with all available options and better examples is coming soon.

Adding CSS classes in the helper:

{{svg-jar "asset-name" class="icon icon-big"}}

Setting where to find SVG files at ember-cli-build.js:

let app = new EmberApp(defaults, {
  svgJar: {
    sourceDirs: ['svgs', 'public/images/svg']
  }
});

[inline (default) strategy] custom ID generator:

let app = new EmberApp(defaults, {
  svgJar: {
    inline: {
      idGen: (filePath) => filePath.replace(/\./g, '-')
    }
  }
});

Switching to symbol strategy:

let app = new EmberApp(defaults, {
  svgJar: {
    strategy: 'symbol'
  }
});

[symbol strategy] ID prefix and a custom source directory:

let app = new EmberApp(defaults, {
  svgJar: {
    strategy: 'symbol',

    symbol: {
      sourceDirs: ['public/images/icons'],
      prefix: 'icon-'
    }
  }
});

[symbol strategy] custom copypasta if you don't want to use the helper:

let app = new EmberApp(defaults, {
  svgJar: {
    strategy: 'symbol',

    symbol: {
      copypastaGen: (svgID) => `<svg><use xlink:href="#${svgID}"></use></svg>`
    }
  }
});

[symbol strategy] disabled loader, custom copypasta and output path:

let app = new EmberApp(defaults, {
  svgJar: {
    strategy: 'symbol',

    symbol: {
      includeLoader: false,
      outputFile: '/assets/symbol-defs.svg',
      copypastaGen: (svgID) => `<svg><use xlink:href="/assets/symbol-defs.svg#${svgID}"></use></svg>`
    }
  }
});

Using both symbol and inline strategies at the same time:

let app = new EmberApp(defaults, {
  svgJar: {
    strategy: ['symbol', 'inline'],

    symbol: {
      sourceDirs: ['public/images/svg/icons']
    },

    inline: {
      sourceDirs: ['public/images/svg/illustrations']
    }
  }
});

Assets viewer

The viewer is a separate Ember application, which repository can be found at this link. It's going to become very configurable, so you can make it more useful for your domain.

The viewer itself doesn't affect your build size at all, as it's just a separate directory in your public directory. By default, it's only available in development mode.

Docs and tests

It's still an early beta. Docs and tests are coming soon.

License

This project is distributed under the MIT license.

---

GitHub @ivanvotti  ·  Twitter @ivanvotti