@tdb/util/src/helpers/image/index.ts

Shared helpers and utilities.

export type ImageArray = Array<string | number>;

export default (basePath: string) => {
  const formatPath = (path: string) => `${basePath}/${path.replace(/^\//, '')}`;

  /**
   * Returns a CSS array for an image.
   */
  function img(
    path: string,
    path2x: string | null,
    width: number,
    height: number,
  ): ImageArray {
    return path2x
      ? [formatPath(path), formatPath(path2x), width, height]
      : [formatPath(path), width, height];
  }

  /**
   * Returns a CSS array for a PNG image.
   */
  function png(path: string, width: number, height: number): ImageArray {
    path = path.replace(/\.png$/, '');
    return img(`${path}.png`, `${path}@2x.png`, width, height);
  }

  /**
   * Returns a CSS array for a SVG image.
   */
  function svg(path: string, width: number, height: number): ImageArray {
    path = path.endsWith('.svg') ? path : `${path}.svg`;
    return img(path, null, width, height);
  }

  // Finish up.
  return { img, png, svg };
};