Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/mono-icons@1.0.5/iconfont/icons.css" >
</svelte:head>

<style>
.mi {
font-size: 1.4rem;
}
/* Use this to make sure screen readers read something sensible when encountering the mi. If you are using the icons decoratively, you can omit the <span> */
.u-sr-only {
position: absolute;
left: -10000px;
top: auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>

<h1>
Mono icons 1.0.5
</h1>

<p>
Check the website at <a href="https://icons.mono.company/">icons.mono.company</a>.
</p>

<i class="mi mi-add"><span class="u-sr-only">Add</span></i>
<i class="mi mi-archive"><span class="u-sr-only">Archive</span></i>
<i class="mi mi-arrow-down"><span class="u-sr-only">Arrow down</span></i>
<i class="mi mi-arrow-left-down"><span class="u-sr-only">Arrow left down</span></i>
<i class="mi mi-arrow-left-up"><span class="u-sr-only">Arrow left up</span></i>
<i class="mi mi-arrow-left"><span class="u-sr-only">Arrow left</span></i>
<i class="mi mi-arrow-right-down"><span class="u-sr-only">Arrow rightdown</span></i>
<i class="mi mi-arrow-right-up"><span class="u-sr-only">Arrow right up</span></i>
<i class="mi mi-arrow-right"><span class="u-sr-only">Arrow right</span></i>
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */