mirror of
https://github.com/lucide-icons/lucide.git
synced 2026-11-10 13:18:25 +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>
2.5 KiB
2.5 KiB
title, description
| title | description |
|---|---|
| Stroke width - React Native | 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
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.
Adjusting stroke width with nonScalingStroke prop
Setting nonScalingStroke to true will make the stroke width non-scaling.
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;