Mirrors/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2025-12-16 17:57:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: Update readme files (#2102)

Browse Source 
* Update lucide readme

* Add Readme and update package.jsons

* Update readme

* Update package logos

* Update darkmode logos

* Update title build font readme
This commit is contained in:
Eric Fennis
2024-04-24 17:43:51 +02:00
committed by GitHub
parent 305e282e19
commit 45e82a51b8
40 changed files with 603 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
packages/lucide-angular/README.md
View File

@@ -1,3 +1,12 @@
<p align="center">
<a href="https://github.com/lucide-icons/lucide#gh-light-mode-only">
<img src="https://lucide.dev/package-logos/lucide-angular.svg#gh-light-mode-only" alt="Lucide Angular - Implementation of the lucide icon library for angular applications." width="400">
</a>
<a href="https://github.com/lucide-icons/lucide#gh-dark-mode-only">
<img src="https://lucide.dev/package-logos/dark/lucide-angular.svg#gh-dark-mode-only" alt="Lucide Angular - Implementation of the lucide icon library for angular applications." width="400">
</a>
</p>
# Lucide Angular
Implementation of the lucide icon library for angular applications.
@@ -16,96 +25,26 @@ or
npm install lucide-angular
```
## How to use
## Documentation
### Step 1: Import `LucideAngularModule`
For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-angular)
In any Angular module you wish to use Lucide icons in, you have to import `LucideAngularModule`, and pick any icons you wish to use:
## Community
```js
import { LucideAngularModule, File, Home, Menu, UserCheck } from 'lucide-angular';
Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users.
@NgModule({
imports: [
LucideAngularModule.pick({File, Home, Menu, UserCheck})
]
})
export class AppModule { }
```
## License
### Step 2: Use the icons in templates
Lucide is licensed under the ICS license. See [LICENSE](https://lucide.dev/license).
Within your templates you may now use one of the following component tags to insert an icon:
## Sponsors
```html
<lucide-angular name="file" class="my-icon"></lucide-angular>
<lucide-icon name="home" class="my-icon"></lucide-icon>
<i-lucide name="menu" class="my-icon"></i-lucide>
<span-lucide name="user-check" class="my-icon"></span-lucide>
```
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
<img src="https://lucide.dev/vercel.svg" alt="Powered by Vercel" width="200" />
</a>
### Props
<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://lucide.dev/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
You can pass additional props to adjust the icon appearance.
### Awesome backer 🍺
| name | type | default |
| ------------------ | --------- | ------------ |
| `size` | _number_ | 24 |
| `color` | _string_ | currentColor |
| `strokeWidth` | _number_ | 2 |
| `absoluteStrokeWidth` | _boolean_ | true |
```html
<i-lucide name="home" [size]="48" color="red" [strokeWidth]="1"></i-lucide>
```
### Global configuration
You can inject the `LucideIconConfig` service in your root component to globally configure the default property values as defined above.
### Styling using a custom CSS class
Any extra HTML attribute is ignored, but the `class` attribute
is passed onto the internal SVG image element and it can be used to style it:
```css
svg.my-icon {
width: 12px;
height: 12px;
stroke-width: 3;
}
```
## Injecting multiple icon providers
You may provide additional icons using the `LUCIDE_ICONS` injection token,
which accepts multiple providers of the interface `LucideIconsProviderInterface`
with the utility class `LucideIconsProvider` available for easier usage:
```js
import { LUCIDE_ICONS, LucideIconProvider } from 'lucide-angular';
import { MyIcon } from './icons/my-icon';
const myIcons = {MyIcon};
@NgModule({
providers: [
{provide: LUCIDE_ICONS, multi: true, useValue: new LucideIconProvider(myIcons)},
]
})
export class AppModule { }
```
To add custom icons, you will first need to convert them to an [svgson format](https://github.com/elrumordelaluz/svgson).
## Loading all icons
> :warning: You may also opt to import all icons if necessary using the following format but be aware that this will significantly increase your application build size.
```js
import { icons } from 'lucide-angular';
...
LucideAngularModule.pick(icons)
```
<a href="https://www.scipress.io?utm_source=lucide"><img src="https://lucide.dev/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>