Example:

<icon src="emojis/pkg" />
{@icon src="emojis/bomb" title="La bomba!"}}

Result:

• emojis-pkg
• La bomba!

Notice the usage of alternate syntax `{@fn x=y ...}`

Example:

<image src="12inches_small" title="OSOMS" />

Result:

The placed image is using `srcset`, also it should fade in onload...

Example:

<import from="sprites/bug" style="fill:red" />
<icon src="sprites.svg#bug" width="48" height="48" style="fill:green" />
<icon src="sprites.svg#bug" inline width="48" style="fill:blue" />
<icon src="#construction" width="48" height="48" style="fill:pink" />
<icon src="#bullhorn" width="48" height="48" style="fill:cyan" />
{@icon src="#bug" width=48 height=48 style="fill:orange"}

Result:

None of these are using `<img src="image.svg">` so you can fill SVGs

Example:

{@alink for="/" text="Home"}
<alink for="/demo">Here</alink>

Result:

• Home
• Here

Use `<alink for="...">...</alink>` to render regular links, it'll have `[aria-current=page]` attached if matches the rendered URL

Example:

import { render } from 'somedom';
import url from '../images/12inches_small.png';

target.appendChild(render(['img', { src: url }]));

Result:

Imported resources would be resolved against built files, also `url(...)` would work

Example:

{@source path: "../app/index.js"}

Result:

import App from './components/App.svelte';

new App({ // eslint-disable-line
  target: document.querySelector('#app'),
});

Included source-code have support for diff-syntax, e.g.

let value = 42;

if (value > 0) {
  console.log('OSOM!');
}