An icon library for Svelte/SvelteKit based on Remix Icon. Consists of more than 3000 icons.
npm install svelte-remixiconIf 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 3188 icons available, you'll have plenty of options to choose from to bring some color and personality to your app.
Getting started with svelte-remixicon is a breeze. All you have to do is run the following command:
``bash`
npm install --save-dev svelte-remixicon
Using svelte-remixicon couldn't be simpler. Just import the icons you want to use, and you're ready to go! For example:
`html
Almost every icon has two variants. One is line:
other is fill:
`
And that's it! You can check out all the available icons on the Remix Icon website.
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:
`html
`
You will also find the class remixicon and ri- on the svg element by default. You can use them to style the icons as well.
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
- ⇒ RiMessage3Fill
- and so on...
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 |currentColor
| color | | 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.
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.
`html
`
svelte-remixicon` is licensed under the MIT License.