You've already forked AstralRinth
forked from didirus/AstralRinth
22 lines
683 B
Markdown
22 lines
683 B
Markdown
---
|
|
title: Using illustrations
|
|
---
|
|
|
|
Find an illustration from [unDraw](https://undraw.co/illustrations) and download it as an SVG.
|
|
|
|
Put the illustration in the `src/assets/images/illustrations` folder. Rename it to `undraw_` + the illustration slug.
|
|
|
|
Replace colors in the SVG with CSS variables such as `var(--color-brand)` and `var(--color-raised)`. For colors that are the same as the font color, use `currentColor`.
|
|
|
|
Add the `.illustration` class to the SVG
|
|
|
|
Import the SVG in the `<script>` of your svelte file, and treat the illustration as a Svelte component:
|
|
|
|
```svelte
|
|
<script>
|
|
import NoData from '$assets/images/illustrations/undraw_no_data.svg'
|
|
</script>
|
|
|
|
<NoData />
|
|
```
|