Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
Learn more at the [Svelte website](https://svelte.dev), or stop by the [Discord chatroom](https://discord.gg/yy75DKs).
Learn more at the [Svelte website](https://svelte.dev), or stop by the [Discord chatroom](https://svelte.dev/chat).
## Development
@ -19,7 +36,7 @@ Pull requests are encouraged and always welcome. [Pick an issue](https://github.
fs.writeFileSync('src/compile/internal-exports.ts',`// This file is automatically generated\nexport default new Set(${JSON.stringify(mod.exports)});`);
fs.writeFileSync('src/compiler/compile/internal-exports.ts',`// This file is automatically generated\nexport default new Set(${JSON.stringify(mod.exports)});`);
@ -13,7 +13,11 @@ Start the server with `npm run dev`, and navigate to [localhost:3000](http://loc
## Using a local copy of Svelte
By default, the REPL will fetch the most recent version of Svelte from https://unpkg.com/svelte. To use the local copy of the compiler and runtime from this repo, you can navigate to [localhost:3000/repl?version=local](http://localhost:3000/repl?version=local). To produce the proper browser-compatible UMD build, you will need to run `npm run build` with the `PUBLISH` environment variable set (to any non-empty string).
By default, the REPL will fetch the most recent version of Svelte from https://unpkg.com/svelte. When running the site locally, you can also use your local copy of Svelte.
To produce the proper browser-compatible UMD build of the compiler, you will need to run `npm run build` (or `npm run dev`) in the root of this repository with the `PUBLISH` environment variable set to any non-empty string.
Then visit the REPL at [localhost:3000/repl?version=local](http://localhost:3000/repl?version=local).
@ -44,9 +44,11 @@ In the terminal, you can instantly create a new project like so:
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev& open http://localhost:5000
npm run dev
```
This will create a new project in the `my-svelte-project` directory, install its dependencies, and start a server on http://localhost:5000.
Once you've tinkered a bit and understood how everything fits together, you can fork [sveltejs/template](https://github.com/sveltejs/template) and start doing this instead:
And that's it! Do `npm run build` to create a production-ready version of your app, and check the project template's [README](https://github.com/sveltejs/template/blob/master/README.md) for instructions on how to easily deploy your app to the web with [Now](https://zeit.co/now) or [Surge](http://surge.sh/).
You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) (Update from 2019: with Svelte 3 the CLI was deprecated and we now use [sirv-cli](https://www.npmjs.com/package/sirv-cli) in our template. Feel free to use whatever tool you like!) or the [API](https://github.com/sveltejs/svelte/tree/v2#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](https://discord.gg/yy75DKs), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!
You're not restricted to using Rollup — there are also integrations for [webpack](https://github.com/sveltejs/svelte-loader), [Browserify](https://github.com/tehshrike/sveltify) and others, or you can use the [Svelte CLI](https://github.com/sveltejs/svelte-cli) (Update from 2019: with Svelte 3 the CLI was deprecated and we now use [sirv-cli](https://www.npmjs.com/package/sirv-cli) in our template. Feel free to use whatever tool you like!) or the [API](https://github.com/sveltejs/svelte/tree/v2#api) directly. If you make a project template using one of these tools, please share it with the [Svelte Discord chatroom](chat), or via [@sveltejs](https://twitter.com/sveltejs) on Twitter!
@ -81,4 +81,4 @@ I believe the next frontier of web performance is 'whole-app optimisation'. Curr
Speaking of Glimmer, the idea of compiling components to bytecode is one that we'll probably steal in 2018. A framework like Sapper could conceivably determine which compilation mode to use based on the characteristics of your app. It could even serve JavaScript for the initial route for the fastest possible startup time, then lazily serve a bytecode interpreter for subsequent routes, resulting in the optimal combination of startup size and total app size.
Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Discord](https://discord.gg/yy75DKs).
Mostly, though, we want the direction of Sapper to be determined by its users. If you're the kind of developer who enjoys life on the bleeding edge and would like to help shape the future of how we build web apps, please join us on [GitHub](https://github.com/sveltejs/svelte) and [Discord](chat).
@ -12,7 +12,7 @@ Almost a year after we first started talking about version 2 on the Svelte issue
## tl;dr
Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Discord chatroom](https://discord.gg/yy75DKs).
Each of these items is described in more depth below. If you get stuck, ask for help in our friendly [Discord chatroom](chat).
- Install Svelte v2 from npm
- Upgrade your templates with [svelte-upgrade](https://github.com/sveltejs/svelte-upgrade)
@ -201,4 +201,4 @@ Before, there was a `svelte.validate` method which checked your component was va
## My app is broken! Help!
Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Discord chatroom](https://discord.gg/yy75DKs) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues).
Hopefully this covers everything, and the update should be easier for you than it was for us. But if you find bugs, or discover things that aren't mentioned here, swing by [Discord chatroom](chat) or raise an issue on the [tracker](https://github.com/sveltejs/svelte/issues).
@ -14,9 +14,8 @@ Earlier this month, I had the privilege of appearing on [The Changelog](https://
...and, most importantly, Svelte 3.
Unless you hang out in our [Discord server](https://discord.gg/yy75DKs) or follow [@sveltejs](https://twitter.com/sveltejs) on Twitter, you might not know that Svelte 3 is just around the corner, and it's going to be a huge release. We've rethought the developer experience from the ground up, and while it *will* be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you're going to love it.
Unless you hang out in our [Discord server](chat) or follow [@sveltejs](https://twitter.com/sveltejs) on Twitter, you might not know that Svelte 3 is just around the corner, and it's going to be a huge release. We've rethought the developer experience from the ground up, and while it *will* be a nuisance if you need to upgrade a Svelte 2 app (more on that soon) we think you're going to love it.
On the podcast [Adam](https://twitter.com/adamstac), [Jerod](https://twitter.com/jerodsanto) and I talk about some of the changes and why we're making them. You can listen here or on the [podcast page](https://changelog.com/podcast/332).
<audiodata-theme="night"style="width: 100%"data-src="https://changelog.com/podcast/332/embed"src="https://cdn.changelog.com/uploads/podcast/332/the-changelog-332.mp3"preload="none"class="changelog-episode"controls></audio><p><ahref="https://changelog.com/podcast/332">The Changelog 332: A UI framework without the framework</a>– Listen on <ahref="https://changelog.com/">Changelog.com</a></p><scriptasyncsrc="//cdn.changelog.com/embed.js"></script>
@ -94,4 +94,4 @@ We don't take this lightly: hopefully once you've experienced Svelte 3 you'll un
As grueling as this release has been, we're nowhere near finished. We have a ton of ideas for generating smarter, more compact code, and a long feature wish-list. [Sapper](https://sapper.svelte.dev), our Next.js-style app framework, is still in the middle of being updated to use Svelte 3. The [Svelte Native](https://svelte-native.technology/) community project, which allows you to write Android and iOS apps in Svelte, is making solid progress but deserves more complete support from core. We don't yet have the bounty of editor extensions, syntax highlighters, component kits, devtools and so on that other frameworks have, and we should fix that. We *really* want to add first-class TypeScript support.
But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](https://discord.gg/yy75DKs) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
But in the meantime we think Svelte 3 is the best way to build web apps yet. Take an hour to go through the [tutorial](tutorial) and we hope to convince you of the same. Either way, we'd love to see you in our [Discord chatroom](chat) and on [GitHub](https://github.com/sveltejs/svelte) — everyone is welcome, especially you.
> Temporary note: This document is a work-in-progress. Please forgive any missing or misleading parts, and don't be shy about asking for help in the [Discord chatroom](https://discord.gg/yy75DKs). The [tutorial](tutorial) is more complete; start there.
> Temporary note: This document is a work-in-progress. Please forgive any missing or misleading parts, and don't be shy about asking for help in the [Discord chatroom](chat). The [tutorial](tutorial) is more complete; start there.
This page contains detailed API reference documentation. It's intended to be a resource for people who already have some familiarity with Svelte.
@ -48,10 +48,13 @@ Svelte uses the `export` keyword to mark a variable declaration as a *property*
// are immediately available
console.log(foo, bar);
// function declarations cannot be set externally,
// but can be accessed from outside
export function instanceMethod() {
alert(foo);
// Function expressions can also be props
export let format = (number) => (number.toFixed(2));
// Function declarations are added as methods
// on the component, rather than props
export function greetMethod() {
alert(`I'm a <${this.constructor.name}>!`);
}
// you can also use export { ... as ... } to have
@ -89,7 +92,7 @@ Because Svelte's reactivity is based on assignments, using array methods like `.
---
Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` label. Reactive statements run immediately before the component updates, whenever the values that they depend on have changed.
Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:`[JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run immediately before the component updates, whenever the values that they depend on have changed.
@ -575,12 +593,12 @@ You can bind to component props using the same mechanism.
Components also support `bind:this`, allowing you to interact with component instances programmatically.
> Note that we can do `{cart.empty}` rather than `{() => cart.empty()}`, since component methods are closures. You don't need to worry about the value of `this` when calling them.
> Note that we can't do `{cart.empty}` since `cart` is `undefined` when the button is first rendered and throws an error.
```html
<ShoppingCartbind:this={cart}/>
<buttonon:click={cart.empty}>
<buttonon:click={() =>cart.empty()}>
Empty shopping cart
</button>
```
@ -895,7 +913,138 @@ Local transitions only play when the block they belong to is created or destroye
An animation is triggered when the contents of a [keyed each block](docs#Each_blocks) are re-ordered. Animations do not run when an element is removed, only when the each block's data is reordered. Animate directives must be on an element that is an *immediate* child of a keyed each block.
Animations can be used with Svelte's [built-in animation functions](docs#svelte_animate) or [custom animation functions](docs#Custom_animation_functions).
```html
<!-- When `list` is reordered the animation will run-->
{#each list as item, index (item)}
<lianimate:flip>{item}</li>
{/each}
```
#### Animation Parameters
---
As with actions and transitions, animations can have parameters.
(The double `{{curlies}}` aren't a special syntax; this is an object literal inside an expression tag.)
```html
{#each list as item, index (item)}
<lianimate:flip="{{ delay: 500 }}">{item}</li>
{/each}
```
#### Custom animation functions
---
Animations can use custom functions that provide the `node`, an `animation` object and any `paramaters` as arguments. The `animation` parameter is an object containing `from` and `to` properties each containing a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect#Properties) describing the geometry of the element in its `start` and `end` positions. The `from` property is the DOMRect of the element in its starting position, the `to` property is the DOMRect of the element in its final position after the list has been reordered and the DOM updated.
If the returned object has a `css` method, Svelte will create a CSS animation that plays on the element.
The `t` argument passed to `css` is a value that goes from `0` and `1` after the `easing` function has been applied. The `u` argument is equal to `1 - t`.
The function is called repeatedly *before* the animation begins, with different `t` and `u` arguments.
A custom animation function can also return a `tick` function, which is called *during* the animation with the same `t` and `u` arguments.
> If it's possible to use `css` instead of `tick`, do so — CSS animations can run off the main thread, preventing jank on slower devices.
```html
<script>
import { cubicOut } from 'svelte/easing';
function whizz(node, { from, to }, params) {
const dx = from.left - to.left;
const dy = from.top - to.top;
const d = Math.sqrt(dx * dx + dy * dy);
return {
delay: 0,
duration: Math.sqrt(d) * 120,
easing: cubicOut,
tick: (t, u) =>
Object.assign(node.style, {
color: t > 0.5 ? 'Pink' : 'Blue'
});
};
}
</script>
{#each list as item, index (item)}
<divanimate:whizz>{item}</div>
{/each}
```
### Slots
@ -1130,3 +1279,50 @@ The `<svelte:options>` element provides a place to specify per-component compile
```html
<svelte:optionstag="my-custom-element"/>
```
### @debug
```sv
{@debug}
```
```sv
{@debug var1, var2, ..., varN}
```
---
The `{@debug ...}` tag offers an alternative to `console.log(...)`. It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.
It accepts a comma-separated list of variable names (not arbitrary expressions).
```html
<script>
let user = {
firstname: 'Ada',
lastname: 'Lovelace'
};
</script>
{@debug user}
<h1>Hello {user.firstname}!</h1>
```
---
`{@debug ...}` accepts a comma-separated list of variable names (not arbitrary expressions).
```html
<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}
<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}
```
The `{@debug}` tag without any arguments will insert a `debugger` statement that gets triggered when *any* state changes, as opposed to the specified variables.
In both cases, an array of arguments can be passed as the first argument instead of a single store.
@ -503,10 +517,204 @@ Both `set` and `update` can take a second argument — an object with `hard` or
### `svelte/transition`
TODO
The `svelte/transition` module exports six functions: `fade`, `fly`, `slide`, `scale`, `draw` and `crossfade`. They are for use with svelte [`transitions`](docs#Transitions).
#### `fade`
```sv
transition:fade={params}
```
```sv
in:fade={params}
```
```sv
out:fade={params}
```
---
Animates the opacity of an element from 0 to the current opacity for `in` transitions and from the current opacity to 0 for `out` transitions.
`fade` accepts the following parameters:
* `delay` (`number`, default 0) — milliseconds before starting
* `duration` (`number`, default 400) — milliseconds the transition lasts
You can see the `fade` transition in action in the [transition tutorial](tutorial/transition).
Animates the x and y positions and the opacity of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
`fly` accepts the following parameters:
* `delay` (`number`, default 0) — milliseconds before starting
* `duration` (`number`, default 400) — milliseconds the transition lasts
* `easing` (`function`, default `cubicOut`) — an [easing function](docs#svelte_easing)
* `x` (`number`, default 0) - the x offset to animate out to and in from
* `y` (`number`, default 0) - the y offset to animate out to and in from
* `opacity` (`number`, default 0) - the opacity value to animate out to and in from
You can see the `fly` transition in action in the [transition tutorial](tutorial/adding-parameters-to-transitions).
Animates the opacity and scale of an element. `in` transitions animate from an element's current (default) values to the provided values, passed as parameters. `out` transitions animate from the provided values to an element's default values.
`scale` accepts the following parameters:
* `delay` (`number`, default 0) — milliseconds before starting
* `duration` (`number`, default 400) — milliseconds the transition lasts
* `easing` (`function`, default `cubicOut`) — an [easing function](docs#svelte_easing)
* `start` (`number`, default 0) - the scale value to animate out to and in from
* `opacity` (`number`, default 0) - the opacity value to animate out to and in from
Animates the stroke of an SVG element, like a snake in a tube. `in` transitions begin with the path invisible and draw the path to the screen over time. `out` transitions start in a visible state and gradually erase the path. `draw` only works with elements that have a `getTotalLength` method, like `<path>` and `<polyline>`.
`scale` accepts the following parameters:
* `delay` (`number`, default 0) — milliseconds before starting
* `speed` (`number`, default undefined) - the speed of the animation, see below.
* `easing` (`function`, default `cubicInOut`) — an [easing function](docs#svelte_easing)
The `speed` parameter is a means of setting the duration of the transition relative to the path's length. It is modifier that is applied to the length of the path: `duration = length / speed`. A path that is 1000 pixels with a speed of 1 will have a duration of `1000ms`, setting the speed to `0.5` will halve that duration and setting it to `2` will double it.
@ -16,13 +16,13 @@ That's better. But Svelte is giving us a warning:
When building web apps, it's important to make sure that they're *accessible* to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup.
In this case, we're missing the `alt`tag that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
In this case, we're missing the `alt`attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one:
```html
<imgsrc={src}alt="A man dancing">
<imgsrc={src}alt="A man dances.">
```
We can use curly braces *inside* attributes. Try changing it to `"{name} dancing"` — remember to declare a `name` variable in the `<script>` block.
We can use curly braces *inside* attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `<script>` block.
## Shorthand attributes
@ -30,6 +30,6 @@ We can use curly braces *inside* attributes. Try changing it to `"{name} dancing
It's not uncommon to have an attribute where the name and value are the same, like `src={src}`. Svelte gives us a convenient shorthand for these cases:
As a general rule, data flow in Svelte is *top down* — a parent component can set props on a child component, and a component can set attributes on an element, but not the other way around.
Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we *could* add an `on:input` event handler that set the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other kinds of form element, as we'll see.
Sometimes it's useful to break that rule. Take the case of the `<input>` element in this component — we *could* add an `on:input` event handler that set the value of `name` to `event.target.value`, but it's a bit... boilerplatey. It gets even worse with other form elements, as we'll see.
@ -27,7 +27,7 @@ import { pannable } from './pannable.js';
></div>
```
Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object must have a `destroy` function, which is called when the element is unmounted.
Open the `pannable.js` file. Like transition functions, an action function receives a `node` and some optional parameters, and returns an action object. That object can have a `destroy` function, which is called when the element is unmounted.
We want to fire `panstart` event when the user mouses down on the element, `panmove` events (with `dx` and `dy` properties showing how far the mouse moved) when they drag it, and `panend` events when they mouse up. One possible implementation looks like this:
@ -84,4 +84,3 @@ export function pannable(node) {
Update the `pannable` function and try moving the box around.
> This implementation is for demonstration purposes — a more complete one would also consider touch events.
@ -8,4 +8,4 @@ To get set up in your local development environment, check out [the quickstart g
If you're looking for a more expansive framework that includes routing, server-side rendering and everything else, take a look at [Sapper](https://sapper.svelte.dev).
Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](https://discord.gg/yy75DKs). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
Most importantly: since you're now a member of the Svelte community, you should [join our friendly Discord chatroom](chat). That's where you'll find fellow Svelte users, and it's where we plan the future of the framework.
<atarget="_blank"rel="noopener"href="https://github.com/sveltejs/svelte/blob/master/site/src/routes/_components/WhosUsingSvelte.svelte"class="add-yourself"><span>+ your company?</span></a>
<p>If the error persists, please drop by <ahref="https://discord.gg/yy75DKs">Discord chatroom</a> and let us know, or raise an issue on <ahref="https://github.com/sveltejs/svelte">GitHub</a>. Thanks!</p>
<p>If the error persists, please drop by <ahref="chat">Discord chatroom</a> and let us know, or raise an issue on <ahref="https://github.com/sveltejs/svelte">GitHub</a>. Thanks!</p>
d="m 699.7,122.7 -3.3,3.3 -3.3,-3.3 c -0.2,-0.2 -0.6,-0.2 -0.8,0 l -3.3,3.3 -3.3,-3.3 c -0.2,-0.2 -0.6,-0.2 -0.8,0 -0.2,0.2 -0.2,0.6 0,0.8 l 3.7,3.7 c 0.2,0.2 0.6,0.2 0.8,0 l 3.3,-3.3 3.3,3.3 c 0.1,0.1 0.3,0.2 0.4,0.2 0.2,0 0.3,-0.1 0.4,-0.2 l 3.7,-3.7 c 0.2,-0.2 0.2,-0.6 0,-0.8 -0.2,-0.2 -0.6,-0.2 -0.8,0 z"
id="path3837"
inkscape:connector-curvature="0" />
<path
class="st6"
d="m 704.2,116.4 c -0.2,-0.2 -0.6,-0.2 -0.8,0 l -3.3,3.3 -3.3,-3.3 c -0.2,-0.2 -0.6,-0.2 -0.8,0 l -3.3,3.3 -3.3,-3.3 c -0.2,-0.2 -0.6,-0.2 -0.8,0 l -3.3,3.3 -3.3,-3.3 c -0.2,-0.2 -0.6,-0.2 -0.8,0 -0.2,0.2 -0.2,0.6 0,0.8 l 3.7,3.7 c 0.2,0.2 0.6,0.2 0.8,0 l 3.3,-3.3 3.3,3.3 c 0.1,0.1 0.3,0.2 0.4,0.2 0.2,0 0.3,-0.1 0.4,-0.2 l 3.3,-3.3 3.3,3.3 c 0.2,0.2 0.6,0.2 0.8,0 l 3.7,-3.7 c 0.2,-0.2 0.2,-0.5 0,-0.8 z"
id="path3839"
inkscape:connector-curvature="0" />
</g>
<circle
class="st16"
cx="5.7272587"
cy="288.69696"
r="1.5874799"
id="circle3843"
style="fill:none;stroke-width:0.26458001" />
</g>
<path
id="path5193"
d="m -2.5511142,295.33257 c -0.189742,-0.14893 -0.428331,-0.23772 -0.68711,-0.23772 -0.6096081,0 -1.105673,0.49172 -1.121304,1.10437 -0.629146,0.23859 -1.077017,0.85253 -1.077017,1.57199 0,0.85015 0.625021,1.55246 1.4356599,1.6634 v 0.0152 h 5.7424231 v -0.003 c 0.800652,-0.0469 1.435659,-0.71837 1.435659,-1.53986 0,-0.79219 -0.590502,-1.44478 -1.350775,-1.53271 0.003,-0.0482 0.0048,-0.097 0.0048,-0.1461 0,-1.22768 -1.024479,-2.22285 -2.28798204,-2.22285 -0.93525196,0 -1.73894386,0.54534 -2.09433096,1.32646"
inkscape:connector-curvature="0"
style="fill:url(#1);stroke-width:0.21709661" />
<path
id="path5195"
d="m 11.002773,295.27147 c 0.252287,-0.1981 0.570045,-0.31578 0.912918,-0.31578 0.809914,0 1.468852,0.6533 1.489735,1.46744 0.836159,0.3172 1.431037,1.13163 1.431037,2.08885 0,1.1288 -0.830233,2.06288 -1.907391,2.20991 v 0.0203 H 5.298379 v -0.004 c -1.063895,-0.0624 -1.907391,-0.9544 -1.907391,-2.04595 0,-1.05261 0.784516,-1.91953 1.794793,-2.03608 -0.0042,-0.0641 -0.0065,-0.12896 -0.0065,-0.19415 0,-1.63112 1.361052,-2.95351 3.040143,-2.95351 1.2428086,0 2.311219,0.72441 2.782776,1.76234"
d="m -814.90625,747.83984 v 0.0137 h -15.81836 v 97.19726 c 0,12.68484 4.7555,17.75977 17.91602,17.75977 h 23.62695 c 13.16052,0 17.91601,-5.07493 17.91602,-17.75977 v -97.19726 h -16.49805 v -0.0137 l -11.50586,40.55664 h 19.56055 l -29.33985,55.51563 7.76758,-41.70899 h -16.9707 l 14.60742,-54.36328 z"
d="m 454.281,769.98869 c 1.92,0 2.496,0.96 2.496,2.688 v 84.864 c 0,2.112 -0.384,2.88 -2.688,2.88 h -13.056 v -90.432 z m 30.144,-7.488 c 0,-10.176 -5.568,-16.896 -16.512,-16.896 h -54.528 v 139.2 h 49.344 c 15.936,0 21.696,-6.144 21.696,-21.504 z"
d="m 605.982,769.98869 c 1.92,0 2.688,1.152 2.688,2.88 v 42.24 c 0,2.112 -0.576,2.88 -2.688,2.88 H 592.35 v -48 z m 30.144,-6.336 c 0,-10.944 -5.76,-18.048 -18.816,-18.048 h -52.8 v 139.2 h 27.84 v -44.352 h 3.648 l 13.44,44.352 h 28.8 l -14.592,-44.352 c 8.064,0 12.48,-6.144 12.48,-12.288 z"
d="m 689.031,769.98869 c 1.92,0 2.496,0.96 2.496,2.688 v 84.864 c 0,2.112 -0.384,2.88 -2.688,2.88 h -13.056 v -90.432 z m 30.144,-7.488 c 0,-10.176 -5.568,-16.896 -16.512,-16.896 h -54.528 v 139.2 h 49.344 c 15.936,0 21.696,-6.144 21.696,-21.504 z"
d="m 772.107,769.98869 c 1.92,0 2.496,0.96 2.496,2.688 v 84.864 c 0,2.112 -0.384,2.88 -2.688,2.88 h -10.56 c -2.304,0 -2.688,-0.768 -2.688,-2.88 v -84.864 c 0,-1.728 0.576,-2.688 2.496,-2.688 z m 30.72,-6.336 c 0,-10.944 -5.76,-18.048 -18.816,-18.048 h -34.56 c -13.056,0 -18.816,7.104 -18.816,18.048 v 101.376 c 0,10.56 4.416,19.776 19.968,19.776 h 32.256 c 15.552,0 19.968,-9.216 19.968,-19.776 z"
message:`No custom element 'tag' option was specified. To automatically register a custom element, specify a name with a hyphen in it, e.g. <svelte:options tag="my-thing"/>. To hide this warning, use <svelte:options tag={null}/>`
Ihor Yemets
6 years ago
