mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-12 13:38:32 +00:00
KarsaandEric Fennis
99d25bdee2
* feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(packages): extract build logic to @lucide/shared, still wip * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * feat(): unify icon build logic some more, add nonScalingStroke option, marking absoluteStrokeWidth as deprecated * chore(icons): revert git hook changes made to icons * fix(packages/astro,react-native,vue): fix iconNode type fix(packages/vue): fix hasA11yProp * fix(packages/solid): make component reactive & add unit tests for checking prop changes * test(packages/vue): add reactivity tests to @lucide/vue * fix(packages): replace cpy-cli, accidentally removed during main merge * docs(packages): upgrade react documentation with nonScalingStroke * fix(tests): update snapshots for lucide-react * feat(docs): upgraded package guides with nonScalingStroke, dropping absoluteStrokeWidth * fix(vue,react-native): fix linting issues * fix(icons): add proper fallback for icon width in calculatedStrokeWidth * fix(packages/svelte): add globalProps.class to icons * fix(packages/shared): wrap width, height & size in isDefined * Update types.ts * fix(packages/svelte): do not pass propsClass to mergeClasses --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
47 lines
1.4 KiB
Markdown
47 lines
1.4 KiB
Markdown
---
|
|
title: Stroke width - Astro
|
|
description: Learn how to customize the stroke width of Lucide icons in your Astro applications using the strokeWidth and nonScalingStroke props.
|
|
---
|
|
|
|
# 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 `strokeWidth` prop
|
|
|
|
```astro
|
|
---
|
|
import FolderLock from '@lucide/astro/icons/folder-lock';
|
|
---
|
|
|
|
<FolderLock strokeWidth={1} />
|
|
```
|
|
|
|
## Non-scaling strokes
|
|
|
|
When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `nonScalingStroke` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
|
|
|
|
This means that when `nonScalingStroke` 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.
|
|
|
|
<!--@include: ../../../images/non-scaling-stroke-compare.svg -->
|
|
|
|
### Adjusting stroke width with `nonScalingStroke` prop
|
|
|
|
Setting `nonScalingStroke` to `true` will make the stroke width non-scaling.
|
|
|
|
```astro
|
|
---
|
|
import RollerCoaster from '@lucide/astro/icons/roller-coaster';
|
|
---
|
|
|
|
<RollerCoaster
|
|
size={96}
|
|
nonScalingStroke
|
|
/>
|
|
```
|