Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adisreyaj/angular-remix-icon
Angular wrapper for Remixicon icon library
https://github.com/adisreyaj/angular-remix-icon
angular icons remixicons
Last synced: 13 days ago
JSON representation
Angular wrapper for Remixicon icon library
- Host: GitHub
- URL: https://github.com/adisreyaj/angular-remix-icon
- Owner: adisreyaj
- License: other
- Created: 2020-10-31T17:13:30.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-08-25T07:17:39.000Z (3 months ago)
- Last Synced: 2024-10-15T04:44:46.488Z (25 days ago)
- Topics: angular, icons, remixicons
- Language: TypeScript
- Homepage: https://admiring-noether-0b971e.netlify.app/
- Size: 978 KB
- Stars: 10
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - angular-remix-icon - Angular wrapper for Remixicon icon library. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-remix-icon - Angular wrapper for Remixicon icon library. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-remix-icon - Angular wrapper for Remixicon icon library. (Table of contents / Third Party Components)
README
Angular Remix Icon
> Use Remix Icons in your angular application
Wrapper for using remix icons in your angular application.
All the icons are injected as svgs and you can apply color and sizes to them with ease.
### Usage
_1. Install the package_
```sh
npm install angular-remix-icon
```
_2. Import the module to `App Module`_
```ts
import { RemixIconModule } from "angular-remix-icon";
```
_3. Import Required Icons_
For the library to work, the required icons needs to be configured first
```ts
...
import {
RiAncientGateFill,
RiHome2Fill,
RemixIconModule,
} from 'angular-remix-icon';
// Configure the required icons before hand
const icons = {
RiAncientGateFill,
RiHome2Fill,
};
@NgModule({
imports: [
BrowserModule,
RemixIconModule.configure(icons),
],
...
})
export class AppModule {}
```
You can get the name from the [Remix Icon](https://remixicon.com) website
The required icons can be imported as see above. For eg: If you need the `home-3-line`, You have to import the corresponding Icon:
```ts
import { RiHome3Line } from "angular-remix-icon";
```
_4. Use in template_
You can now start using the icons like so:
```html
```
### Styling
If you want change color or size of the icons,
```html
```
or
```css
.blue-icon {
color: blue;
}
.large-icon {
width: 30px;
height: 30px;
}
```
```html
```
## Versions
| Angular | Angular Remix Icon |
|-----------|--------------------|
| \>= v18 | v8 |
| v16 & v17 | v6 |
| v15 | v5 |
| v14 | v4 |
| v13 | v3 |
| v12 | v2 |
`v8` we switched to signal input for icons.
## 🤝 Contributing
Contributions, issues and feature requests are welcome.
Feel free to check [issues page](https://github.com/adisreyaj/angular-remix-icon/issues) if you want to contribute.
## Author
👤 **Adithya Sreyaj**
- Twitter: [@AdiSreyaj](https://twitter.com/AdiSreyaj)
- Github: [@adisreyaj](https://github.com/adisreyaj)
## 👍🏼 Show your support
Please ⭐️ this repository if this project helped you!
## 📝 License
Copyright © 2020 [Adithya Sreyaj](https://github.com/adisreyaj).
This project is [Apache License 2.0](https://github.com/adisreyaj/angular-remix-icon/blob/master/LICENSE.md) licensed.