import { Meta } from '@storybook/blocks';
import { parameters } from '../utils/docsPage.js';
import Highlight from '../docs-components/Highlight/Highlight';

<Meta
  title="Guides/Using with the Graphics Kit"
  parameters={{ ...parameters }}
/>

# Using with the Graphics Kit

Our graphics components are designed to work seemlessly with the [Graphics Kit](https://github.com/reuters-graphics/bluprint_graphics-kit) as well as just about any Svelte-based page builder.

**There is, however, one gotcha to watch out for:**

When working with multimedia files like images or videos, components expect all paths to be <Highlight>absolute URLs.</Highlight>

✅ `https://reuters.com/graphics/.../myImage.jpg`

❌ `./myImage.jpg`

In the Graphics Kit, that means you'll need to prefix relative paths with the special [`assets`](https://svelte.dev/docs/kit/$app-paths#assets) SvelteKit module that contains the root URL for your project. Many examples in these docs show how to do it. But it's also easy enough to demo again here!

```svelte
<script>
  import { FeaturePhoto } from '@reuters-graphics/graphics-components';

  // Import the assets module if it's not already there.
  import { assets } from '$app/paths';
</script>

<!-- Use the assets module to prefix the path to your image. -->
<FeautrePhoto src={`${assets}/imgs/myImage.jpg`} />
```