123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- 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;
|