Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aantusahaa/svelte-remixicon
An icon library for Svelte/SvelteKit based on Remix Icon. Consists of more than 2800 icons.
https://github.com/aantusahaa/svelte-remixicon
icon-library icon-pack remixicon svelte sveltejs sveltekit
Last synced: 24 days ago
JSON representation
An icon library for Svelte/SvelteKit based on Remix Icon. Consists of more than 2800 icons.
- Host: GitHub
- URL: https://github.com/aantusahaa/svelte-remixicon
- Owner: aantusahaa
- License: mit
- Created: 2021-07-29T09:35:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-06-17T08:29:13.000Z (7 months ago)
- Last Synced: 2024-10-15T10:02:20.788Z (3 months ago)
- Topics: icon-library, icon-pack, remixicon, svelte, sveltejs, sveltekit
- Language: Svelte
- Homepage: https://npmjs.com/package/svelte-remixicon
- Size: 6.16 MB
- Stars: 43
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/Remix-Design/remixicon) pack. With a total of 3020 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:
```bash
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:
```html
import { RiRemixiconLine, RiRemixiconFill } from 'svelte-remixicon';
import RiRemixiconLine from 'svelte-remixicon/RiRemixiconLine.svelte';
import RiRemixiconFill from 'svelte-remixicon/RiRemixiconLineFill.svelte';
Almost every icon has two variants. One is line: and the
other is fill:
```
And that's it! You can check out all the available icons on the [Remix Icon website](https://remixicon.com/).
### 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:
```html
:global(svg.xyz) {
margin-block: 3rem;
}
```
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.
## 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.
```html
import RiRemixiconLine from 'svelte-remixicon/RiRemixiconLine.svelte';
function handleClick() {
console.log('Icon clicked!');
}
```
## License
`svelte-remixicon` is licensed under the [MIT License](https://github.com/aantusahaa/svelte-remixicon/blob/main/LICENSE).