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>
82 lines
2.5 KiB
Markdown
82 lines
2.5 KiB
Markdown
---
|
|
title: Stroke width - React Native
|
|
description: Learn how to adjust the stroke width of icons in your React Native application using the `strokeWidth` prop or adjust the strokeWidth appearance using the `nonScalingStroke` prop.
|
|
---
|
|
|
|
# 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
|
|
|
|
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
|
|
import React, {useState, useEffect} from 'react';
|
|
import { View } from 'react-native';
|
|
import { FolderLock } from "lucide-react-native";
|
|
|
|
const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center', backgroundColor: '#202127', color: '#fff' }
|
|
|
|
const App = () => {
|
|
return (
|
|
<View style={style}>
|
|
<FolderLock strokeWidth={1} />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
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.
|
|
|
|
```SnackPlayer name=State&ext=js&dependencies=react-native-svg,lucide-react-native
|
|
import React, {useState, useEffect} from 'react';
|
|
import { View } from 'react-native';
|
|
import { RollerCoaster } from "lucide-react-native";
|
|
|
|
const style = { height: '100%', alignItems: 'center', display: 'flex', justifyContent: 'center', backgroundColor: '#202127', color: '#fff' }
|
|
|
|
const App = () => {
|
|
return (
|
|
<View style={style}>
|
|
<RollerCoaster
|
|
size={96}
|
|
nonScalingStroke
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|
|
|
|
<!-- <Sandpack
|
|
template="react"
|
|
:theme="sandpackTheme"
|
|
:files="nonScalingStroke"
|
|
:customSetup='{
|
|
dependencies: {
|
|
"lucide-react": "latest"
|
|
}
|
|
}'
|
|
:options="{
|
|
editorHeight: 320,
|
|
editorWidthPercentage: 60,
|
|
}"
|
|
/> -->
|