mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-11 13:28:19 +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>
69 lines
1.9 KiB
Markdown
69 lines
1.9 KiB
Markdown
---
|
|
title: Stroke width - React
|
|
description: Learn how to adjust the stroke width of icons in your React application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `nonScalingStroke` prop.
|
|
---
|
|
<script setup>
|
|
import Sandpack from '~/.vitepress/theme/components/editors/Sandpack.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 `strokeWidth` prop
|
|
|
|
::: sandpack {template=react showTabs=false editorHeight=300 editorWidthPercentage=60 dependencies="lucide-react"}
|
|
|
|
```jsx App.js [active]
|
|
import { FolderLock } from "lucide-react";
|
|
|
|
function App() {
|
|
return (
|
|
<div className="app">
|
|
<FolderLock strokeWidth={1} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
:::
|
|
|
|
|
|
## 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.
|
|
|
|
::: sandpack {template=react showTabs=false editorHeight=320 editorWidthPercentage=60 dependencies="lucide-react"}
|
|
|
|
```jsx App.js [active]
|
|
import { RollerCoaster } from "lucide-react";
|
|
|
|
function App() {
|
|
return (
|
|
<div className="app">
|
|
<RollerCoaster
|
|
size={96}
|
|
nonScalingStroke
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
:::
|