Monoco for Svelte

Try all options in the interactive demo

Installation

npm install @monokai/monoco-svelte

Usage

You can use Monoco in two ways, as a Svelte action or as a Svelte component. The action (lowercase monoco) is more flexible, as it can use scoped classes, whereas the component (title-cased Monoco) cannot inherit scoped classes so they have to be declared globally.

Svelte action

<script>
    import { monoco } from '@monokai/monoco-svelte'
</script>

<div class="block" use:monoco={{
    borderRadius: 32,
    color: '#f00',
    border: [2, '#000']
}}></div>

<style>
    .block {
        display: block;
        width: 128px;
        height: 128px;
    }
</style>

Svelte Component

<script>
    import { Monoco } from '@monokai/monoco-svelte'
</script>

<Monoco class="block" borderRadius={32} color={'#f00'} border={[2, '#000']}></Monoco>

<style>
    :global .block {
        display: block;
        width: 128px;
        height: 128px;
    }
</style>

Options

Go to the main Monoco repository to see all available options.