AstralRinth/src/routes/getting-started/icons.md

title

title
Icons

<script> import IconHeart from 'virtual:icons/heroicons-outline/heart' </script>

Use unplugin-icons to import icons as Svelte components.

Installation

Install the package with:

pnpm add -D unplugin-icons

Import the plugin in your svelte.config.js file:

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...

To install an icon pack, run:

pnpm add -D @iconify-json/heroicons-outline

Replacing heroicons-outline, with the pack you are trying to install.

Using icons

Import an icon in the <script> tag of your component:

  import IconHeart from 'virtual:icons/heroicons-outline/heart'

Then use the icon as if it were a Svelte component:

The height and width props are optional, and take CSS compatible values

That's lovely <IconHeart height="14px" />!

That's lovely !