ember-svg-jar/lib/inline-packer.js

Best way to use SVG images in Ember applications

'use strict';

/**
  Packages SVGs as ES modules for use with the inline strategy.
  Required options:
    makeAssetID

  Examples of input and output:
  Input node:
  ├── alarm.svg
  └── cat.svg

  Output node:
  inlined
  ├── alarm.js
  └── cat.js

  alarm.js can content:

  export default {
    content: '<path>', attrs: { viewBox: '' }
  }
*/
const path = require('path').posix;
const CachingWriter = require('broccoli-caching-writer');
const {
  readFile,
  svgDataFor,
  toPosixPath,
  saveToFile,
  relativePathFor,
} = require('./utils');

class InlinePacker extends CachingWriter {
  constructor(inputNode, opts) {
    super([inputNode], { name: 'InlinePacker' });
    this.options = opts;
  }

  build() {
    let inputPath = toPosixPath(this.inputPaths[0]);
    let outputPath = path.join(toPosixPath(this.outputPath), 'inlined');
    let { makeAssetID } = this.options;

    const assets = [];

    this.listFiles().forEach(_filePath => {
      const filePath = toPosixPath(_filePath);
      const relativePath = relativePathFor(filePath, inputPath);
      const jsName = makeAssetID(relativePath);
      const modulePath = path.join(outputPath, `${jsName}.js`);
      const svgData = svgDataFor(readFile(filePath));

      saveToFile(modulePath, `export default ${JSON.stringify(svgData)}`);

      assets.push(jsName);
    });
  }
}

module.exports = InlinePacker;