ember-svg-jar/docs/examples.md

Best way to use SVG images in Ember applications

# Advanced usage examples

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

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

#### [`inline` strategy] custom ID generator:

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

#### Switching to `symbol` strategy:

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

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

```javascript
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:

```javascript
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:

```javascript
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:

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

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

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