Setting up Sass, Bootstrap, Icons & Notifications in SvelteKit
Tags: svelte, webdev
Published: 2022-12-05 01:20:46

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](https://github.com/svelte-add/svelte-add#readme), 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](https://github.com/svelte-add/bootstrap). 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](https://github.com/ramiroaisen/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](https://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:
```html
<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](https://github.com/keenethics/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:
```javascript
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!