Snippets

Snippets are a special kind of tagged layers that allows you to place any kind of interactive content in your ai2svelte content. Snippets are essentially placeholders for dynamic content that can be filled in when you use the generated svelte component.

Creating Snippets

To create a snippet, you simply create a new layer in your Illustrator document and name it with the :snippet suffix. The prefix will be used as a prop name in the generated Svelte component.

For example, naming a layer video:snippet will create a prop named video in the generated Svelte component. You can then pass any Svelte content to this prop when you use the component.

  <script>
    import MyGraphic from './ai2svelte/my-graphic.svelte';

    import { assets } from '$app/paths';
  </script>

  <!-- Svelte snippet to create an HTML video element -->
  {#snippet videoSnippet()}
    <video
      style="width: 100%; height: 100%; object-fit: cover;"
      src={`${assets}/videos/video.mp4`}
      autoplay
      playsinline
      muted
      loop
    ></video>
  {/snippet}

  <!-- Supplying the snippet to the video prop generated by ai2svelte -->
  <MyGraphic assetsPath={assets} video={videoSnippet} />

An Illustrator document can contain more than one snippet layer. Each snippet layer will create a separate prop in the generated Svelte component.

  <MyGraphic assetsPath={assets} video={videoSnippet} headline={headlineSnippet} />

Make sure to keep your snippet objects grouped under the same layer across multiple artboards to avoid creating multiple snippets.

Reusing same snippet

At times, you might need to create multiple snippets with similar content. And that may result into a lot of duplicated code. As of Svelte 5.38, passing a Svelte snippet with params as a prop is not supported.

However, you can take advantage of Svelte’s createRawSnippet feature to generate multiple snippets with same body but different arguments.

  <script>
    import MyGraphic from './ai2svelte/my-graphic.svelte';

    import { assets } from '$app/paths';

    function rawSnippet(videoName) {
      return createRawSnippet(() => ({
        render() {
        return `<video style="width: 100%; height: 100%; object-fit: cover;" src="${assets}/images/${videoName}" autoplay muted playsinline loop />`;
        },
      }));
    }
  </script>

  <MyGraphic
    assetsPath={assets}
    videoA={rawSnippet(`${assets}/videos/videoA.mp4`)}
    videoB={rawSnippet(`${assets}/videos/videoB.mp4`)}
    videoC={rawSnippet(`${assets}/videos/videoC.mp4`)}
  />