mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-15 14:08:49 +00:00
docs(version-1): Version 1 website (#4142)
* Update images * Adjust color * update accessebility * Add matrix hero * Add typescript documentation * Add basics section to vue pages * Add svelte docs * Fix dynamic sidebar * Add animation? * Some adjustments * Adjust animation * Updates docs * Add scaledown animation * Add docs for vue types * Fix layout accessibility page * fix framework select * adjust easing home animation * Write docs for Vue * Adjust animation home * Adjust home hero animation * Finish svelte docs * Add solid pages * remove spiral animation component * Add group icons * Added solid docs * update preact docs * Adjust examples preact docs * Add snackplayer * Get new editor * Save this * Add examples * Adjust styling * setup custom sandpack * Add script * Format files * Make sandpack plugin work * migrate react docs * Fix svelte and solid examples * Migrate to solid packages * Add darkmode package logos * Fix bug in selector * migrate vue examples * migrate advanced vue items * migrate preact and svelte examples * Add astro docs * adding more docs on guide for lucide library * Fix home animation * Cleanup * Added resources page, with more details and content * Add hero badge for Version 1 * Fix vercel json * Update missing paths * Fix build? * Replace lucide-vue-next * Fix build * Add some docs * update markdown * Setup angular docs * Add basic angular docs * Adjust code examples * Update title and descriptions * Update accessibility link * Update title and description * Add og image * Fix alignment * Add migration guides * Adjust version 1 markdown file * Add migration guide to the main list * Minor fixes * Update docs * Apply feedback * Select icons * Add pointer events none * Fix package links homepage * Format code * Fix types * Fix focus * Fix build * Fix focus * Apply feedback * Adjust imports * Adjust imports * Fix search * Apply feedback * Fix import in font docs * Small fixes * docs(guide): added easter egg icon. stay tuned, guys 😉 * Add llm txt plugin * Adjust logo top * docs(version-1): upgraded @lucide/angular guide for v1 website (#4144) * docs(guide/angular): rewrite some angular documentation * docs(guide/angular): extens angular guide with combining icons & icon provider guides * docs(guide/angular): fix angular sandbox, still needs @lucide/angular release tho * docs(guide/angular): rework the getting started page a bit more, refactor some more prop=>input occurences * docs(guide/angular): context provider => provideLucideConfig * Update docs/guide/angular/migration.md Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * Update docs/guide/angular/advanced/combining-icons.md Co-authored-by: Eric Fennis <eric.fennis@gmail.com> * Apply suggestions from code review Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * docs(guide/angular): rework a11y for better flow & pacing * docs(guide/angular): salvage original phrase, it has better flow * docs(guide/angular): some more a11y nitpicking * docs(guide/angular): reduce llm fatigue * docs(guides/angular): fix app component selector * docs(guides/angular): fix angular sandpacks * Add sandpack angular to improve tree-shakable stack * Update docs/guide/angular/getting-started.md * docs(guides/angular): fix user import in combinding icons guide * docs(guides/angular): fix nested SVG phrasing * Update docs/guide/angular/advanced/with-lucide-lab.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/guide/angular/advanced/filled-icons.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * docs(guides/angular): fix createLucideIcon guide * docs(guides/angular): upgrade all relevant angular sandpack demos --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * fix(docs): add autogenerated OG images to gitignore * fix(docs): unify the case of "Lucide" & "Lucide Lab" over all docs and readmes * Fix build * Add next tag to all installation guides * Add top bar notification * Minor fixes * Update text * Add todos * Update og image * Adjust install command * Color top bar * fix(docs): ignore all OG images, expect general.png * fix(docs): fix the package list, hide @lucide/icons, downgrade angular logo, link to v0 guide, fix package title alignment * Update docs/.vitepress/theme/components/base/LayoutTop.vue Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/guide/react/advanced/dynamic-icon-component.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update CONTRIBUTING.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update docs/.vitepress/sidebar/resources.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix code example * fix(docs): version 1 => Version 1 * feat(docs): add angular to new features in v1 * Fix next line issue * feat(docs): fix typo (code example_s_) * Fix deadlink * feat(docs): fix some more typos and irky grammar * feat(docs): fix lowercase lucide in sidebar 😅 * Update docs/guide/version-1.md Co-authored-by: Karsa <contact@karsa.org> --------- Co-authored-by: Karsa <contact@karsa.org> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Eric Fennis
co-authored by
Copilot Autofix powered by AI
Karsa
Copilot Autofix powered by AI
Karsa
parent
e715245d62
commit
484f2c9cd3
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Color - Angular
|
||||
description: Learn how to adjust the color of icons in your Angular application using the `color` input or by using parent elements text color value.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# Color
|
||||
|
||||
By default, all icons have the color value: `currentColor`. This keyword uses the element's computed text `color` value to represent the icon color.
|
||||
|
||||
Read more about [ `currentColor` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword).
|
||||
|
||||
## Adjust the color using the `color` input
|
||||
|
||||
The color can be adjusted by binding the `color` input of the element.
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideSmile } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideSmile],
|
||||
template: `<svg lucideSmile color="#3e9392" />`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## Using parent elements text color value
|
||||
|
||||
Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.
|
||||
|
||||
For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered as `#fff`. This is browser native behavior.
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideThumbsUp } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideThumbsUp],
|
||||
template: `
|
||||
<button style="color:#fff">
|
||||
<svg lucideThumbsUp></svg>
|
||||
Like
|
||||
</button>
|
||||
`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: Sizing - Angular
|
||||
description: Learn how to adjust the size of icons in your Angular application using the `size` input or by using CSS.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# Sizing
|
||||
|
||||
By default, the size of all icons is `24px` by `24px`. The size is adjustable either by binding the `size` input and CSS.
|
||||
|
||||
## Adjusting the icon size using the `size` input
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideLandmark } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideLandmark],
|
||||
template: `<svg lucideLandmark [size]="64" />`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## Adjusting the icon size via CSS
|
||||
|
||||
The CSS properties `width` and `height` can be used to adjust the icon size.
|
||||
|
||||
::: sandpack {template=angular editorHeight=300 dependencies="@lucide/angular"}
|
||||
|
||||
```css /src/app/icon.css [active]
|
||||
.my-beer-icon {
|
||||
/* Change this! */
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
```
|
||||
|
||||
```ts /src/app/app.component.ts
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideBeer } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideBeer],
|
||||
template: `<svg lucideBeer class="my-beer-icon"></svg>`,
|
||||
styleUrls: ['./app.component.css', './icon.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Dynamically change the icon size based on the font size
|
||||
|
||||
It is possible to resize icons based on font size. This can be achieved using the `em` unit. See this [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.
|
||||
|
||||
::: sandpack {template=angular editorHeight=300 dependencies="@lucide/angular"}
|
||||
|
||||
```css /src/app/icon.css [active]
|
||||
.my-icon {
|
||||
/* Icon size will relative to font-size of .text-wrapper */
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
/* Change this! */
|
||||
font-size: 96px;
|
||||
|
||||
/* layout stuff */
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
align-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
```ts /src/app/app.component.ts
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideStar } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideStar],
|
||||
template: `<div class="text-wrapper">
|
||||
<svg lucideStar class="my-icon"></svg>
|
||||
<div>Yes</div>
|
||||
</div>`,
|
||||
styleUrls: ['./app.component.css', './icon.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### Resizing with Tailwind
|
||||
|
||||
`size-*` utilities can be used to adjust the size of the icon. See the [Tailwind documentation](https://tailwindcss.com/docs/width#setting-both-width-and-height) for more information on the `size-*` utilities.
|
||||
|
||||
```html [app.html]
|
||||
<div>
|
||||
<svg lucidePartyPopper class="size-24"></svg>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
title: Stroke width - Angular
|
||||
description: Learn how to adjust the stroke width of icons in your Angular application using the `strokeWidth` input or adjust the strokeWidth appearance using the `absoluteStrokeWidth` input.
|
||||
---
|
||||
<script setup>
|
||||
import Sandpack from '~/.vitepress/theme/components/editors/SandpackAngular.vue'
|
||||
</script>
|
||||
|
||||
# Stroke width
|
||||
|
||||
All icons are designed with SVG elements using strokes.
|
||||
These have a default stroke width of `2px`.
|
||||
|
||||
The `strokeWidth` can be adjusted to create a different look of the icons.
|
||||
|
||||
## Adjusting stroke width with the `strokeWidth` input
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideFolderLock } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideFolderLock],
|
||||
template: `<svg lucideFolderLock [strokeWidth]="1" />`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## Absolute stroke width
|
||||
|
||||
When binding the `size` input, the icon's stroke width will be relative to its size, this is the default SVG behavior. The `absoluteStrokeWidth` input is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
|
||||
|
||||
This means that when `absoluteStrokeWidth` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
|
||||
|
||||
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
|
||||
|
||||
|
||||
|
||||
### Adjusting stroke width with `absoluteStrokeWidth` input
|
||||
|
||||
Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
|
||||
|
||||
::: sandpack {template=angular showTabs=false editorHeight=400 editorWidthPercentage=60 dependencies="@lucide/angular"}
|
||||
|
||||
```ts /src/app/app.component.ts [active]
|
||||
import { Component, ViewEncapsulation } from "@angular/core";
|
||||
import { LucideRollerCoaster } from "@lucide/angular";
|
||||
|
||||
@Component({
|
||||
selector: 'app',
|
||||
imports: [LucideRollerCoaster],
|
||||
template: `
|
||||
<svg
|
||||
lucideRollerCoaster
|
||||
[size]="96"
|
||||
[absoluteStrokeWidth]="true"
|
||||
></svg>
|
||||
`,
|
||||
styleUrls: ['./app.component.css'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class App {
|
||||
}
|
||||
```
|
||||
:::
|
||||
Reference in New Issue
Block a user