@publidata/utils-svg/src/loader/loadSvgIcons.js

Collection of methods to handle svg files and src

import { hexify, getCSSColor } from "@publidata/utils-colors";
import { parseSvgFromText, serializeSvg } from "../core/svgParser";
import {
  ensureSVGWidthHeight,
  replaceSvgColor,
  svgToDataUrl,
  waitForImageLoad
} from "../utils/helpers";
import {
  generateIconMarker,
  generateMultiflowMarker
} from "../generator/generateMarkers";
import { prepareSvgIconsForMultiflow } from "../generator/prepareSvgIcons";

export const loadAndTransformSvg = (svg, color) => {
  const svgParsed = parseSvgFromText(svg);
  const svgWithEnsureDimensions = ensureSVGWidthHeight(svgParsed);
  const svgCleaned = serializeSvg(svgWithEnsureDimensions);
  const recoloredSvg = replaceSvgColor(svgCleaned, color);
  const bgColor = hexify(getCSSColor(color, 0.2));

  return {
    svg: recoloredSvg,
    color,
    bgColor
  };
};

export const loadAndConvertSvgInImg = async (
  svgContent,
  color,
  isImage,
  multiflowData = null
) => {
  const img = new Image();
  img.crossOrigin = "Anonymous";

  if (multiflowData) {
    const multiflowSvgs = await prepareSvgIconsForMultiflow(multiflowData);
    img.src = svgToDataUrl(generateMultiflowMarker(multiflowSvgs));
  } else {
    const loadedSvg = loadAndTransformSvg(svgContent, color);
    const svgUrl = svgToDataUrl(generateIconMarker({ ...loadedSvg, isImage }));
    img.src = svgUrl;
  }

  await waitForImageLoad(img);
  return img;
};