svg-baker/lib/sprite-factory.js

const merge = require('merge-options');
const processor = require('posthtml-svg-mode');
const extractNamespacesToRoot = require('./transformations/extract-namespaces-to-root');
const moveFromSymbolToRoot = require('./transformations/move-from-symbol-to-root');
const { svg, xlink } = require('../namespaces');

const defaultConfig = {
  attrs: {
    [svg.name]: svg.uri,
    [xlink.name]: xlink.uri
  },
  styles: `
    .sprite-symbol-usage {display: none;}
    .sprite-symbol-usage:target {display: inline;}
  `,
  usages: true,
  symbols: []
};

/**
 * TODO simplify
 * @param {Object} [config] {@see defaultConfig}
 * @return {Function} PostHTML plugin
 */
function createSprite(config = {}) {
  const cfg = merge(defaultConfig, config);
  const symbols = cfg.symbols;
  const trees = symbols.map(s => s.tree);
  let usages = [];

  if (cfg.usages) {
    usages = symbols.map((symbol) => {
      const { id, useId } = symbol;
      return {
        tag: 'use',
        attrs: {
          id: useId,
          'xlink:href': `#${id}`,
          class: 'sprite-symbol-usage'
        }
      };
    });
  }

  let defsContent = [];

  if (cfg.styles !== false) {
    defsContent.push({
      tag: 'style',
      content: cfg.styles
    });
  }

  defsContent = defsContent.concat(trees);

  return (tree) => {
    tree[0] = {
      tag: 'svg',
      attrs: cfg.attrs,
      content: [{
        tag: 'defs',
        content: defsContent
      }].concat(usages)
    };

    return tree;
  };
}

/**
 * @param {Object} options {@see defaultConfig}
 * @return {Promise<PostHTMLProcessingResult>}
 */
function spriteFactory(options) {
  const plugins = [
    createSprite(options),
    extractNamespacesToRoot(),
    moveFromSymbolToRoot()
  ];
  return processor(plugins).process('');
}

module.exports = spriteFactory;
module.exports.createSprite = createSprite;