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

Collection of methods to handle svg files and src

import {
  getBgXoffset,
  getIconTransform,
} from "../utils/transforms";
import { isArtBoard } from "../utils/helpers";
import {
  addWidthAndHeightToSvg,
  replaceSvgColor
} from "../utils/helpers";
import { BORDER } from "../utils/constants";



export const renderBackGroundBlock = ({ x, y, path, fill }) => `
<g transform="translate(${x} ${y})">
    <path d="${path}" fill="${fill}" fill-opacity="1"/>
</g>
`;

export const renderIconBlock = ({ icon, position }) => {
  const transformValues = getIconTransform(position, icon);
  const { svg, color, viewbox } = icon;
  const cleanedSvg = replaceSvgColor(svg, color);

  return `
  <g fill="${color}" transform="translate(${transformValues})">
    ${addWidthAndHeightToSvg(cleanedSvg, viewbox.w, viewbox.h)}
  </g>
  `;
};

const startPath =
  "M0 548.625C0 245.628 245.777 0 548.958 0H850V1097.25H548.958C245.777 1097.25 0 851.622 0 548.625Z";
const endPath =
  "M0 0H301.044C604.22 0 850 245.628 850 548.625C850 851.622 604.22 1097.25 301.044 1097.25H0V0Z";

export const getStartTemplate = start => `
${renderBackGroundBlock({
  x: BORDER,
  y: BORDER,
  path: startPath,
  fill: start.bgColor
})}
${renderIconBlock({ icon: start, position: 1 })}
`;

export const getEndTemplate = (end, iconsLength) => {
  const endY = 70;
  return `
${renderBackGroundBlock({
  x: getBgXoffset(iconsLength - 1),
  y: BORDER,
  path: endPath,
  fill: end[0].bgColor
})}
${renderIconBlock({ icon: end[0], position: iconsLength })}
`;
};

export const getBodyTemplate = body => {
  if (!body || body.length === 0) return "";
  return body
    .map(
      (icon, index) =>
        `<rect width="850" height="1097.25" transform="translate(${getBgXoffset(
          index + 1
        )} 70)" fill="${icon.bgColor}" fill-opacity="1"/>
    ${renderIconBlock({ icon, position: index + 2 })}
    `
    )
    .join("");
};