Quickstart

<script setup>
import { ref } from "vue";
import { useLogoSoup } from "@sanity-labs/logo-soup/vue";

const logos = ref(["/logos/acme.svg", "/logos/globex.svg"]);
const { isReady, normalizedLogos } = useLogoSoup({ logos });
</script>

<template>
  <div v-if="isReady">
    <img
      v-for="logo in normalizedLogos"
      :key="logo.src"
      :src="logo.src"
      :alt="logo.alt"
      :width="logo.normalizedWidth"
      :height="logo.normalizedHeight"
    />
  </div>
</template>

<script>
  import { createLogoSoup } from "@sanity-labs/logo-soup/svelte";

  let { logos = [] } = $props();
  const soup = createLogoSoup();

  $effect(() => {
    soup.process({ logos });
  });

  $effect(() => {
    return () => soup.destroy();
  });
</script>

{#if soup.isReady}
  {#each soup.normalizedLogos as logo (logo.src)}
    <img
      src={logo.src}
      alt={logo.alt}
      width={logo.normalizedWidth}
      height={logo.normalizedHeight}
    />
  {/each}
{/if}

import { useLogoSoup } from "@sanity-labs/logo-soup/solid";
import { For, Show } from "solid-js";

function LogoStrip() {
  const result = useLogoSoup(() => ({
    logos: ["/logos/acme.svg", "/logos/globex.svg"],
  }));

  return (
    <Show when={result.isReady}>
      <For each={result.normalizedLogos}>
        {(logo) => (
          <img
            src={logo.src}
            alt={logo.alt}
            width={logo.normalizedWidth}
            height={logo.normalizedHeight}
          />
        )}
      </For>
    </Show>
  );
}

import { Component, input, effect, inject } from "@angular/core";
import { LogoSoupService } from "@sanity-labs/logo-soup/angular";

@Component({
  selector: "logo-strip",
  standalone: true,
  providers: [LogoSoupService],
  template: `
    @for (logo of service.state().normalizedLogos; track logo.src) {
      <img [src]="logo.src" [alt]="logo.alt"
           [width]="logo.normalizedWidth"
           [height]="logo.normalizedHeight" />
    }
  `,
})
export class LogoStripComponent {
  protected service = inject(LogoSoupService);
  logos = input.required<string[]>();

  constructor() {
    effect(() => {
      this.service.process({ logos: this.logos() });
    });
  }
}

import { createLogoSoup } from "@sanity-labs/logo-soup";

const engine = createLogoSoup();

engine.subscribe(() => {
  const { status, normalizedLogos } = engine.getSnapshot();
  if (status !== "ready") return;

  document.getElementById("logos")!.innerHTML = normalizedLogos
    .map(
      (logo) =>
        `<img src="${logo.src}" alt="${logo.alt}" width="${logo.normalizedWidth}" height="${logo.normalizedHeight}" />`
    )
    .join("");
});

engine.process({
  logos: ["/logos/acme.svg", "/logos/globex.svg"],
});