Glimmer Inline SVG

inline-svg-helper.js

// src/utilities/inline-svg/helper.js

// @ts-ignore:
import { svgs } from '../../../utils/svgs';

function dottify(path) {
  return (path || '').replace(/^\//g, '').replace(/\//g, '.');
}

export default function inlineSvg([path]) {
  let jsonPath = dottify(path);

  let svg = svgs[jsonPath];

  return {
    string: svg,
    toHTML() {
      return this.string;
    },
    toString() {
      return this.string;
    }
  };
}

inline-svg-in-repo-addon.js

// in-repo addon

/* eslint-env node */
'use strict';
var mergeTrees  = require('broccoli-merge-trees');
var Funnel      = require('broccoli-funnel');
var flatiron    = require('broccoli-flatiron');
var BroccoliDebug  = require('broccoli-debug');


module.exports = {
  name: 'inline-svg',

  isDevelopingAddon() {
    return true;
  },
  preprocessTree(type, tree) {
    if (type === 'src') {
      let debugTree = BroccoliDebug.buildDebugCallback(`inline-svg-addon`);

      let svgTree = new Funnel('svgs', {
        include: [new RegExp(/\.svg$/)]
      });

      let manifest = flatiron(svgTree, {
        outputFile: 'src/utils/svgs.ts',
        prefix: 'export let svgs = ',
        trimExtensions: true
      });

      manifest = debugTree(manifest, 'manifest');

      tree = debugTree(tree, 'srcTree');

      let finalOutput = debugTree(new mergeTrees([tree, manifest]), 'src_manifest_merged');

      return finalOutput;
    } else {
      return tree;
    }
  }
};