@svaio/media - Examples

Enhance Usage

./vite.config.js

import media            from '@svaio/media'
import { sveltekit }    from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig( { plugins: [ media( { enhanced: true } ), sveltekit() ] } )

./src/app.d.ts

/// <reference types="@svaio/media/types" />

declare global {
	namespace App {
		// ...
	}
}

./src/*.svelte

<script>
	import logoImage from '$lib/images/logo.png?enhanced'
</script>

<enhanced:img
	style="width:100%; height:100%; object-fit:cover"
	alt="some alt text"
	src={logoImage}
/>

Create Images Usage

./vite.config.js

import media                     from '@svaio/media'
import { setDefaultMediaConfig } from '@svaio/media/utils'
import { sveltekit }             from '@sveltejs/kit/vite'
import { defineConfig }          from 'vite'

export default defineConfig( { plugins : [
	media( { create : { value : { og : setDefaultMediaConfig( {
		title : 'My Web title',
		desc  : 'My Web description',
		image : 'https://github.com/pigeonposse.png',
		color : {
			primary   : '#3c579d',
			secondary : '#4276b5',
			terciary  : '#347ba4',
			fourth    : '#33a09a',
		},
	} ) } } } ),
	sveltekit(),
] } )

./src/*.svelte

<script>
	const createImagePath = '/og.png'
</script>

<img
	style="width:100%; height:100%; object-fit:cover"
	alt="some alt text"
	src={createImagePath}
/>

Experimetal usage

<script>

	import { getCreateMediaPaths } from '@svaio/media/svelte'

	const createImagePath = getCreateMediaPaths()

</script>

<img
	style="width:100%; height:100%; object-fit:cover"
	alt="some alt text"
	src={createImagePath['og']}
/>