examples.md

Advanced usage examples

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

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

[inline 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'],
    },
  },
});