Svelte-remixicon NPM

svelte-remixicon: A vibrant icon library for your Svelte/SvelteKit app

If you're looking for a way to add visually stunning icons to your Svelte/SvelteKit project, you're in luck! svelte-remixicon is a comprehensive icon library built with the popular Remix Icon pack. With a total of 2736 icons available, you'll have plenty of options to choose from to bring some color and personality to your app.

Easy installation

Getting started with svelte-remixicon is a breeze. All you have to do is run the following command:

npm install --save-dev svelte-remixicon

Simple usage

Using svelte-remixicon couldn't be simpler. Just import the icons you want to use, and you're ready to go! For example:

<script>
  import { RiRemixiconLine, RiRemixiconFill } from 'svelte-remixicon';
</script>

<!-- Or (Recommended for faster compilation in dev mode)-->

<script>
  import RiRemixiconLine from 'svelte-remixicon/RiRemixiconLine.svelte';
  import RiRemixiconFill from 'svelte-remixicon/RiRemixiconLineFill.svelte';
</script>

Almost every icon has two variants. One is line: <RiRemixiconLine /> and the
other is fill: <RiRemixiconFill />

And that's it! You can check out all the available icons on the Remix Icon website.

Custom styling

If you want to customize the appearance of your icons, you can easily do so by adding your own classes to the icon components. For example:

<style>
  :global(svg.xyz) {
    margin-block: 3rem;
  }
</style>

<RiRemixiconLine class="xyz" />

You will also find the class remixicon and ri-<icon-name> on the svg element by default. You can use them to style the icons as well.

Component naming

To make it easy to find the icons you need, we've used the same names as the original Remix Icon library. For example:

ri-home-line ⇒ RiHomeLine
ri-message-3-fill ⇒ RiMessage3Fill
and so on...

Available props

Each icon component comes with a range of available props to customize its appearance. These include:

prop name	default value	usable value	description
size	`1em`	any valid `width/height` attribute	determines the `width` and `height` of the icon
color	`currentColor`	any valid `color` value for svg	determines the `fill` of the icon
class	`''`	any valid string for html `class` attribute	custom class for custom styling
label	`''`	any string to be used as `aria-label`	should be used when the svg icon is used as an image/graphic element. It will also add `role="img"` to the svg element. If not passed then `aria-hidden="true"` will be added to the svg element to hide it from screen readers

$$restProps was also passed down.

Using events

The icon components themselves do not propagate events. Non-interactive elements should not have such events that rely on user interaction. If you wish to capture a click event on an icon, it is recommended to enclose the icon within a button or a tag and attach the event handler to that container.

<script>
  import RiRemixiconLine from 'svelte-remixicon/RiRemixiconLine.svelte';

  function handleClick() {
    console.log('Icon clicked!');
  }
</script>

<button on:click="{handleClick}">
  <RiRemixiconLine />
</button>