ember-svg-jar

To help you get started, we've collected the most common ways that ember-svg-jar is being used within popular public projects.

ivanvotti / ember-svg-jar / app / helpers / svg-jar.js View on Github

import makeSVG from 'ember-svg-jar/utils/make-svg';

function getInlineAsset(assetId) {
  try {
    /* eslint-disable global-require */
    return require(`ember-svg-jar/inlined/${assetId}`).default;
  } catch (err) {
    return null;
  }
}

export function svgJar(assetId, svgAttrs) {
  return makeSVG(assetId, svgAttrs, getInlineAsset);
}

export default makeHelper(svgJar);

View more ways to use ember-svg-jar

Best way to use SVG images in Ember apps.

🎮 View Live Demo · 🐞 Report Bug · 🍩 Request Feature · 🤔 Ask Question

Table of Contents

• 🍩 Features
• 👋 Getting started
• 🎮 Usage
• 🔧 Configuration
• ❓ FAQ
• 👓 Compatibility
• 💟 Contributors
• 🆓 License

🍩 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: https://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 width="24px" class="icon">...</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></svg>

Accessibility

Pass title, desc, and role as properties to the helper in order to include accessible elements or attributes. aria-labelledby will be automatically added and point to title and/or desc if they are included.

Writing this:

{{svg-jar 'my-cool-icon' role='img' title='Icon' desc='A very cool icon'}}

Will create an SVG that looks like this:

<svg aria-labelledby="title desc" role="img">
  <title>Icon</title>
  <desc id="desc">A very cool icon</desc></svg>