Setting up Sass, Bootstrap, Icons & Notifications in SvelteKit

Just as many other developers out there I love Svelte. But setting up a new project with all your preferred libraries and functions, can be quite a hustle. In this article I want to show you how you can set up Bootstrap & Sass, Material Icons and Notifications the easy way.

Bootstrap

Bootstrap is my favorite CSS-library by far: I really like the look they now have with v5 and most of the time I prefer to just modify an existing component then building it out from scratch. To use pure Bootstrap (not a modified version for Svelte) in your project, there is a great adder called Svelte Add, that does all the work for you. In your project directory, make sure you committed all changes and then run

npx svelte-add@latest

The CLI will guide you through the installation:

┌  Welcome to Svelte Add!
│
◇  What would you like to add to your project?
│  Bootstrap
│
◇  Do you want to use sass? (css = faster, sass = better customization)
│  Yes
│
◇  Do you want to add JavaScript (required for some components like dropdowns)?
│  Yes
│
◇  Which package manager to want to install dependencies with?
│  npm
│
◇  Successfully installed dependencies
│
◇  Next steps ─╮
│              │
│              │
│              │
├──────────────╯
│
└  You're all set!

By installing Bootstrap this way, Sass is also enabled.

You can find more information about the project on GitHub. Generally speaking, svelte-add can safe you a lot of time, since its also capable of setting up Jest, Storybook and other libraries for you.

Material Icons

Svelte Material Icons is an NPM package that gives you access to a large set of material icons as a Svelte-component, what makes integration much easier. In fact, the library offers even more icons than Googles official icon set, since they rely on materialdesignicons.com. Just run:

npm i svelte-material-icons

After that, you can integrate your icons just like you would do with any Svelte component:

<script>
  import Check from "svelte-material-icons/Check.svelte";
</script>
​
<Check {color} {size} {width} {height} {viewBox} />

Notifications

Notifications in the style of macOS or Windows have also become a thing in modern web applications. The library Svelte notifications makes this super easy:

npm install --save svelte-notifications

After that, you have to pass your Main-View to the <Notification> component — the perfect place for this is a layout-file. You can now trigger your notifications from any component that uses this layout:

import { getNotificationsContext } from 'svelte-notifications';
​
const { addNotification } = getNotificationsContext();
​
const handleButtonClick = () => {
  addNotification({
    position: 'bottom-right',
    heading: 'hi i am custom notification',
    type: 'error',
    description: 'lorem ipsum',
  });
}

Do you know other libraries, that make working with SvelteKit easier? Feel free to share them in the comments!