Update illustrations & icons docs + Fixes

src/routes/_internal/components/Sidebar.svelte

@@ -80,7 +80,7 @@ import { page } from '$app/stores';
       height: 100vh;
       max-height: 100vh;
       overflow-y: auto;
-      grid-gap: 16px;
+      grid-gap: 40px;
       display: flex;
       flex-direction: column;
 

src/routes/classes/Divider.md

@@ -1,9 +1,13 @@
-```svelte example raised
-<div class="card">
-    Some words could go here.
-    
-    <hr class="divider" />
-    
-    And some other words could go here.
-</div>
+```svelte example raised hideStyle
+Some words could go here.
+
+<hr class="divider" />
+
+And some other words could go here.
+
+<style>
+  .example__source__code {
+    flex-direction: column;
+  }
+</style>
 ```

src/routes/getting-started/configure.md

@@ -2,7 +2,7 @@
 title: Configure
 ---
 
-To make use of the built-in icons, styles, and plugins in omorphia, you will need to update the config files.
+To make use of the built-in icons, styles, and plugins in omorphia, you will need to update your project's config files.
 
 ## SvelteKit 
 

src/routes/getting-started/icons.md

@@ -2,64 +2,26 @@
 title: Icons
 ---
 
-<script>
-      import IconHeart from 'virtual:icons/heroicons-outline/heart'
-</script>
-
-Use [unplugin-icons](https://github.com/antfu/unplugin-icons) to import icons as Svelte components.
-
-## Installation
-
-Install the package with:
-
-```bash
-pnpm add -D unplugin-icons
-```
-
-Import the plugin in your `svelte.config.js` file:
-
-```js
-import Icons from 'unplugin-icons/vite';
-
-const config = {
-    kit: {
-        vite: {
-            plugins: [
-                Icons({
-                    compiler: 'svelte',
-                }),
-            ],
-        },
-    },
-};
-```
-
 ## Choosing icons
 
-`heroicons-outline` is the most used icon pack, and should be preferred above all others. If you can't find a good icon, or are looking for an alternative, use `lucide`, `fa-regular` (FontAwesome), `heroicons-solid`, and `carbon`, in that order. [Browse icons...](https://icones.js.org/collection/heroicons-outline)
+The follwing icon packs are included with omorphia:
 
-To install an icon pack, run:
+`heroicons-outline` `lucide` `fa-regular` `heroicons-solid` `carbon`
 
-```bash
-pnpm add -D @iconify-json/heroicons-outline
-```
-
-Replacing `heroicons-outline`, with the pack you are trying to install.
+Aim to find icons from `heroicons-outline` first, and then from the following packs if you can't find what you are looking for. [Browse icons...](https://icones.js.org/collection/heroicons-outline)
 
 ## Using icons
 
-Import an icon in the `<script>` tag of your component:
-
-```js
-  import IconHeart from 'virtual:icons/heroicons-outline/heart'
-```
+Import an icon in the `<script>` tag of your component.
 
 Then use the icon as if it were a Svelte component:
 
 > The `height` and `width` props are optional, and take CSS compatible values
 
-```html
-That's lovely <IconHeart height="14px" />!
-```
+```svelte example
+<script lang="ts">
+    import IconHeart from 'virtual:icons/heroicons-outline/heart'
+</script>
 
-That's lovely <IconHeart height="14px" />!
+<p> That's lovely <IconHeart height="14px" />! </p>
+```

src/routes/getting-started/illustrations.md

@@ -2,6 +2,20 @@
 title: Using illustrations
 ---
 
-TODO
+Find an illustration from [unDraw](https://undraw.co/illustrations) and download it as an SVG.
 
-Use `.illustration` class.
+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 />
+```

src/routes/index.md

@@ -24,7 +24,7 @@ pnpm add omorphia
 
 Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:
 
-```svelte example
+```svelte example raised
 <script lang="ts">
     import { Button } from "omorphia"
 </script>