@publidata/utils-svg/src/generator/generateMarkers.js

Collection of methods to handle svg files and src

import { BORDER, ELEMENT_WIDTH } from "../utils/constants";
import {
  getBodyTemplate,
  getEndTemplate,
  getStartTemplate,
} from "./iconBlockRenderer";
import { getCircleTranslate, getImageWidth, getWidthWrapper } from "../utils/transforms";
import { addWidthAndHeightToSvg, isArtBoard, retrieveSvgId, retrieveViewboxData } from "../utils/helpers";

export const generateIconMarker = icon => {
  const { isImage } = icon;
  const { w: width } = retrieveViewboxData(icon.svg);
  const id = retrieveSvgId(icon.svg);

  const translationValue = isImage ? "4.5 4.5" : getCircleTranslate(width);
  const scaleValue = isImage ? getImageWidth(isArtBoard(id)) : "0.030 0.030";
  const content =
    isImage && !isArtBoard(id)
      ? addWidthAndHeightToSvg(icon.svg, 1000, 1000)
      : icon.svg;

  const string = `
      <svg width="340" height="340" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g fill="${icon.color}" transform="translate(${translationValue})
        scale(${scaleValue})">
        ${content}
        </g>
      </svg>
    `;
  return string;
};

export const generateMultiflowMarker = icons => {

  const startTemplate = getStartTemplate(icons[0]);
  const endTemplate = getEndTemplate(icons.slice(-1), icons.length);
  const bodyTemplate = getBodyTemplate(icons.slice(1, -1));


  const widthWrapper = getWidthWrapper(icons);
  const viewBox = `0 0 ${ELEMENT_WIDTH * icons.length + 70} 1238`;
  const rectWidth = ELEMENT_WIDTH * icons.length + BORDER;

  return `
  <svg width="${widthWrapper}" height="320" viewBox="${viewBox}" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="35" y="35" width="${rectWidth}" height="1167.25" rx="583.625" fill="white" stroke="white" stroke-width="70"/>
    ${startTemplate}
    ${bodyTemplate}
    ${endTemplate}
  </svg>`;
};