@publidata/utils-svg/src/utils/transforms.js

Collection of methods to handle svg files and src

import { ELEMENT_WIDTH, BORDER, BORDER_WIDTH_WRAPPER, WIDTH_ELEMENT_WRAPPER } from "./constants.js";


// Returns the transform string for the circle element based on the position and icon width
export const getCircleTranslate = iconWidth =>
  `${16 + 2 - iconWidth / 29 / 2} 10`;

// Returns the width of the image based on whether it is an artboard or not
export const getImageWidth = isArtBoard =>
  isArtBoard ? "0.2 0.2" : "0.024 0.024";


// Returns the width of the wrapper SVG element based on the icon width
export const getWidthWrapper = (icons) =>
  (BORDER_WIDTH_WRAPPER[icons.length - 1] * 2 +
    WIDTH_ELEMENT_WRAPPER[icons.length - 1] * icons.length) *
  10; // * 10 is same as PixelRatio

// Returns the x offset for the icon based on its position and width
export const getXOffset = (position, iconWidth) =>
  BORDER + ELEMENT_WIDTH * position - Number(iconWidth / 2) - ELEMENT_WIDTH / 2;

// Returns the x offset for the background based on the position
export const getBgXoffset = position => ELEMENT_WIDTH * position + BORDER;

// Returns the transform string for the icon based on its position and width
export const getIconTransform = (position, icon, isBody = false) => {
  const x = getXOffset(position, icon.viewbox.w);
  const y = icon.isImage && !isBody ? "180" : "358";
  return `${x} ${y}`;
};