You've already forked AstralRinth
forked from didirus/AstralRinth
venashial
65 lines
1.4 KiB
Markdown
65 lines
1.4 KiB
Markdown
---
|
|
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)
|
|
|
|
To install an icon pack, run:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```js
|
|
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
|
|
|
|
```html
|
|
That's lovely <IconHeart height="14px" />!
|
|
```
|
|
|
|
That's lovely <IconHeart height="14px" />! |