Yet another Svelte chessboard component. Svelte-Chessground-UI is a wrapper around chessground, the open source chess UI used by Lichess. This package is compatible with projects that use ^4.0.0 versions of Svelte.
To install:
npm install svelte-chessground-ui
To display the default chessboard:
<script>
import {Chessground} from 'svelte-chessground-ui';
</script>
<Chessground />Chessground can be completely restyled through CSS. The component imports default stylesheets. To apply your own, you have two options:
- Override specific CSS commands with a scoped
:globaland!important:
<div class="override_background">
<Chessground />
</div>
<style>
div.override_background :global(.cg-wrap cg-board) {
background-image:url("/my-board.jpg") !important; /* replace chessboard image */
}
</style>- Apply your own full chessground stylesheet instead of the defaults by setting the
classprop and importing your own stylesheet. By changing the class name from the default, none of the default stylesheets will apply, not even the piece SVGs. Additionally, you can use the providedChessgroundUnstyledcomponent, which is completely unstyled. If using aChessgroundUnstyledinstance, you have several options.
You can link your component with app.html (assuming your app only has one chessboard to worry about).
<head>
<link rel="stylesheet" href="/globals.css"/>
</head>You can import your own .css file, for example in a +layout.svelte or +page.svelte.
<script lang="ts">
import {ChessgroundUnstyled} from 'svelte-chessground';
import '$lib/my-chessboard.css';
</script>
<ChessgroundUnstyled class="my-chessboard" />Or you can add your own styling within <style>. You will probably have to make the styles global like what was done in this package for the defaults in <Chessground/>.
You can get an idea of some of these approaches in the original custom styles examples.