I needed a way to use Font Awesome with Svelte / SvelteKit.

The Font Awesome docs did not have a Svelte example, so I set out to build my own.

The criteria I wanted for the implementation were:

• One-line import for icons
• Compatible with Tailwind
• Easily extendable
• Should work with both free and pro versions

Dependencies

To start out, we need Font Awesome. You can add whatever Font Awesome icon packs you want.

pnpm add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Font Component

The Svelte component below uses @fortawesome/fontawesome-svg-core to render SVG icons, removes the default Font Awesome CSS, and passes Tailwind classes to the SVG element.

// lib/icon/icon.svelte

<svelte:options namespace="svg" />

<script lang="ts" module>
	// Configure font awesome
	import { config, type IconDefinition } from '@fortawesome/fontawesome-svg-core';
	config.autoAddCss = false;
	config.keepOriginalSource = false;
	config.showMissingIcons = false;
</script>

<script lang="ts">
	import { icon as iconRender } from '@fortawesome/fontawesome-svg-core';

	interface IconProps {
		icon: IconDefinition;
		class?: string;
	}
	let { icon, class: className }: IconProps = $props();
	let iconRendered = $derived(
		iconRender(icon, {
			classes: className ? [className] : []
		}).html
	);
</script>

<!-- eslint-disable svelte/no-at-html-tags -->
{@html iconRendered}

We then need a tiny bit of css to set the defaults.

// lib/icon/icon.css

@layer base {
  .svg-inline--fa {
    display: inline-block;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
  }
}

// app.css
@import 'tailwindcss';
@import './lib/icon/icon.css';

The export file

An index.ts file exports all the icons you want to have available, as well as the icon.svelte component created above.

I will also explain below why we export the IconDefinition type.

// /lib/icon/index.ts

import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
export type { IconDefinition }

export * from '@fortawesome/free-solid-svg-icons'

export {
  faFacebook,
  faInstagram,
  faLinkedin,
  faVimeo,
  faYoutube,
} from '@fortawesome/free-brands-svg-icons'

export { default as Icon } from './icon.svelte'

How to use it

Since we have exported all the free icons plus a few from the brands, we only need a single import from $lib/icon:

<script lang="ts">
	import { Icon, faGrimace, faLaughWink, faSmile } from '$lib/icon';
</script>

<Icon icon={faSmile} /> The simplest icon will use the inherited font size.
<Icon class="text-2xl" icon={faGrimace} /> Use Tailwind to override the font size, making it bigger.
<Icon class="text-[48px] text-red-600" icon={faLaughWink} /> Set a specific size and color.

How to pass icons as props

By typing a prop as IconDefinition, we can pass the exported icons to it.

// lib/icon-button.svelte

<script lang="ts">
  import type { Snippet } from 'svelte'
  import type { HTMLButtonAttributes } from 'svelte/elements'
  import { Icon, type IconDefinition } from '$lib/icon'

  interface IconButtonProps extends HTMLButtonAttributes {
    icon: IconDefinition
    children: Snippet
  }
  let { icon, children, class: className, ...props }: IconButtonProps = $props()
</script>

<button
  type="button"
  {...props}
  class=[
		'flex items-center justify-between gap-2',
		'rounded-lg bg-neutral-200 px-4 py-2 hover:bg-neutral-300',
		className
	]
>
  <Icon {icon} />
  {@render children()}
</button>

// routes/+page.svelte

<script lang="ts">
  import IconButton from '$lib/icon-button.svelte';
  import { faSmile } from '$lib/icon';
</script>

<IconButton icon={faSmile}>My Button</IconButton>

Demo

I have created a demo to showcase how it works:

https://github.com/leon/blog-svelte-fontawesome-icons

Font Awesome 7

Font Awesome 7 is going to be released in July 2025, bringing many new icons and improved designs. All SVGs are now square (512x512), ensuring consistent spacing and alignment. Keep an eye out here: https://fontawesome.com/

Having a way to wrap your event handlers in some code can come in handy when you want to:

• preventDefault
• Add logging
• Send metrics

<script lang="ts">
  const preventDefault = <T extends Event>(handler: (event: T) => void) => {
    return (event: T) => {
      event.preventDefault()
      handler(event)
    }
  }

  const onClick = (event: MouseEvent) => {
    console.log('Button clicked!', event)
  }
</script>

<button onclick={preventDefault(onClick)}>Button</button>

I needed a simple way to have breadcrumbs in sveltekit.

SvelteKit is very simple in its routing, and does not store the whole router tree, which makes the job of creating a solid breadcrumb implementation a bit more challenging.

I chose to implement this as simple as possible. Which ended up being a method you call in the +layout.svelte and +page.svelte files you want to add to your breadcrumbs.

The downside of this implementation is that it only works clientside because it uses $effect to track when a breadcrumb should be added and removed.

// lib/breadcrumb-state.svelte.ts

import { SvelteMap } from 'svelte/reactivity'

export interface Breadcrumb {
  path: string
  name: string
}

export interface BreadcrumbInternal extends Breadcrumb {
  count: number
}

const breadcrumbMap = new SvelteMap<string, BreadcrumbInternal>()

const breadcrumbs: Breadcrumb[] = $derived.by(() =>
  Array.from(breadcrumbMap.values()).toSorted((a, b) => a.count - b.count),
)
export const getBreadcrumbs = (): Breadcrumb[] => breadcrumbs

export function setBreadcrumb(item: Breadcrumb) {
  $effect(() => {
    breadcrumbMap.set(item.path, { ...item, count: item.path.split('/').length })
    return () => {
      breadcrumbMap.delete(item.path)
    }
  })
}

The magic happens in the setBreadcrumb function. We create a child effect which will get disposed of when the component that calls setBreadcrumb is destroyed.

They way we use it

<script lang="ts">
  import { setBreadcrumb } from '$lib/breadcrumb-state.svelte'
  import type { LayoutProps } from './$types'

  const { children }: LayoutProps = $props()

  setBreadcrumb({
    name: 'Level 1',
    path: '/level-1/',
  })
</script>

{@render children()}

And to render the breadcrumbs

<script lang="ts">
  import { getBreadcrumbs } from './breadcrumb-state.svelte'
</script>

<nav class="breadcrumbs text-sm">
  <ul>
    {#each getBreadcrumbs() as breadcrumb (breadcrumb.path)}
      <li><a href={breadcrumb.path}>{breadcrumb.name}</a></li>
    {/each}
  </ul>
</nav>

I have created a demo to showcase how it works here:

https://github.com/leon/blog-sveltekit-breadcrumbs

RxJS Global Rate Limit

At work we are building an integration against a third party API that has a rate limit of 200 requests per minute. The API was paginated and the response did not contain all data, so a request to each item was required.

The following code will show you how this could be solved using rxjs.

Lets get started!

import {
  BehaviorSubject,
  filter,
  map,
  mergeMap,
  MonoTypeOperatorFunction,
  Observable,
  take,
  timer,
} from 'rxjs'

// global variables
let tokens = 200
let slidingWindowTime = 60_000
let tokenChangedSubject = new BehaviorSubject(tokens)

/**
 * Rate limit observable to x number of requests withing the slidingWindowTime
 *
 * @param parallel number of requests to run in parallel
 * @param slidingWindowTime time in milliseconds for how many requests can be run within
 * @returns rate limited observable
 */
export function globalRateLimit<T>(setOptions?: {
  parallel: number
  slidingWindowTime: number
}): MonoTypeOperatorFunction<T> {
  // initialize at first or at options reset
  if (setOptions) {
    tokens = parallel ?? 200
    slidingWindowTime = setOptions.slidingWindowTime ?? 60_000
    tokenChangedSubject.next(tokens)
  }

  const consumeToken = () => tokenChangedSubject.next(--tokens)
  const renewToken = () => tokenChangedSubject.next(++tokens)
  const availableTokens = tokenChangedSubject.pipe(filter(() => tokens > 0))

  return mergeMap<T, Observable<T>>((value: T) =>
    availableTokens.pipe(
      take(1),
      map(() => {
        consumeToken()
        timer(slidingWindowTime).subscribe(renewToken)
        return value
      }),
    ),
  )
}

How to use it

const source$ = of(1, 2, 3, 4, 5, 6)
source$
  .pipe(globalRateLimit({ parallel: 2, slidingWindowTime: 1000 }))
  .subscribe((v) => console.log(v))

// output
// 1
// 2
// wait for 1000ms
// 3
// 4
// wait for 1000ms
// 5
// 6
// complete

What good does it do having it as a global rate limit?

Because if you have multiple observable streams that both need to listen to the same limit, you can in the first call configure the limit, and in subsequent calls just use the pipe.

interface Page {
  page: number
  totalPages: number
  items: number[]
}
const pageRequest = (page: number): Observable<Page> => {
  return of({
    page,
    totalPages: 10,
    items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  }).pipe(
    // the page requests should be rate limited
    globalRateLimit({ parallel: 2, slidingWindowTime: 1000 }),
  )
}

// a stream of page responses, where we comply to the rate limit
const pages$ = pageRequest(1).pipe(
  expand((response) =>
    response.page < response.totalPages ? pageRequest(response.page + 1) : EMPTY,
  ),
)

// now we want a stream of all items in the pages
// so we flatten the page.items into a stream of items
const items$ = pages$.pipe(concatMap((page) => from(page.items)))

// now we want to call the api and get each item and still keep to the rate limit
interface Item {
  id: number
  name: string
}
const itemRequest = (item: number): Observable<Item> => {
  // fake api call that simulates taking 50ms to complete
  return of({
    id: item,
    name: `item ${item}`,
  }).pipe(delay(50))
}

const items$ = items$.pipe(
  globalRateLimit(),
  concatMap((item) => itemRequest(item)),
)

// will get all pages, then call itemRequest for each item in page.items
// and all of this will be rate limited to 200 requests per minute
items$.subscribe((item) => console.log(item))

Conclusion

There are a lot of complex situations that can be solved with rxjs. I hope this might help someone in the same situation.

Happy coding!

At work we wanted to build some simple web components to publish to NPM.

I was thinking about writing plain web components, but there is a lot of boiler plate, therefor I chose Lit for the job. And Vite for development and packaging.

Setup new Vite project

We start by setting up a new Vite project.

npm create vite@latest my-webcomponents -- --template lit-ts

Install Storybook

npx sb@latest init --builder storybook-builder-vite

Vite config changes

In our case we wanted to be able to use the web components as a stand alone package. the default config externalizes lit. so we have to comment that out.

// vite.config.js
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: 'src/my-element.ts',
      formats: ['es'],
    },
    rollupOptions: {
      // If we want to publish standalone components we don't externalize lit,
      // if you are going to use lit in your own project, you can make it a dep instead.
      // external: /^lit/, <-- comment this line
    },
  },
})

Typescript config changes

Because we have added storybook we need to exclude .stories.ts files from the typescript compilation, otherwise when we publish to NPM they will be included.

// tsconfig.json
{
  "compilerOptions": {
    "module": "esnext",
    "lib": ["es2017", "dom", "dom.iterable"],
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./types",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": false
  },
  "include": ["src/**/*.ts"],
  "exclude": ["src/**/*.stories.ts"], // <-- this is the line we need to add
  "references": [{ "path": "./tsconfig.node.json" }]
}

Storybook config changes

The storybook config needs to tweak the vite config for storybook-builder-vite to work. We need to include and exclude some packages from the vite config.

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/web-components',
  core: {
    builder: 'storybook-builder-vite',
  },
  async viteFinal(config, { configType }) {
    // customize the Vite config here
    config.optimizeDeps.include = [
      ...(config.optimizeDeps?.include ?? []),
      '@storybook/web-components',
    ]
    config.optimizeDeps.exclude = [...(config.optimizeDeps?.exclude ?? []), 'lit', 'lit-html']

    // return the customized config
    return config
  },
}

Now we have a working Storybook

There is a downside to using web components (lit) with storybook, and that is that it does not support hot reload. so each change will cause Storybook to do a full reload. Hopefully this will be mitigated in the future.

Publish to NPM

This section covers the steps needed to publish to NPM, if you are not planning to publish to NPM, you can skip this section.

First off, depending if you want to publish standalone web components you will need to move lit to become a devDependency in your package.json.

• Also instead of only exporting the single dist/my-element.es.js file we will change it so we have a barrel file that exports all components.
• and change both index.html and vite.config.js to point src/index.ts
• We then also need to change package.json to export the correct files.
• And we also want to make the package public by removing "private": true and choosing a name and license.

after this we should be good to go by running

npm run build

then checking /dist/ to see that the correct files are there, and that our package.json points to these files.

then we can run

npm publish

If all has gone well you should be able to use your new package by importing it

<script type="module" src="https://cdn.skypack.dev/my-element"></script>
<my-element name="Lit"></my-element>

Example Repo

If you don’t want to copy paste everything, I’ve created a demo project on github. you can find it here https://github.com/leon/blog-vite-lit-storybook

Well, better late than never

I don’t know why it seems to be so hard to create a new homepage for myself.

Since it’s my day job to create stuff I guess I’m to hard on myself and never feel that the page I create is good enough.

But as a new years resolution for 2022, I was determined to create a new page where I could share things with the world.

It has taken longer than I thought to get everything working as I want to.

I first wrote it in next.js, but then when Remix got released, I found it so much easier to work with so I had to rewrite everything.

It might not be 100% complete, but I really need to get something out there, so you will have to bear with me until I’ve polished some things.

Here’s hoping for a more productive 2022 🚀

I do not use the built in functional component type React.FC because it forces you to always have the prop children. Instead I like to be explicit about what props go into each component, that way VS Code will give me a hard time if I try to add a child to a component that does not support it.

Transform or Format Components

When you only want to style some input or transform it.

import formatISO from 'date-fns/formatISO'

export interface DateProps {
	date: string
}
export function Date({ date }: DateProps) {
	if (!date) {
		return null
	}
	const formatted = formatISO(date, { representation: 'date' })
	return <time dateTime={formatted}>{formatted}</time>
}

Wrappers

When you want to create a wrapper element that always will have children

import clsx from 'clsx'
import { ReactNode } from 'react'

export interface GridProps {
	children: ReactNode // VS Code will warn you if you use this component without children
	className?: string // optional posibility to add additional classes to grid
}
export function Grid({ children, className }: GridProps) {
	const mobileLayout = 'grid gap-4 grid-cols-1'
	const desktopLayout = 'md:gap-8 md:grid-cols-2'

	return <div className={clsx('grid', mobileLayout, desktopLayout, className)}>{children}</div>
}