mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-21 16:59:20 +01:00
77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
# 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;
|
|
```
|
|
|
|
## Absolute stroke width
|
|
|
|
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 `absoluteStrokeWidth` prop 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` prop
|
|
|
|
Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
|
|
|
|
```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}
|
|
absoluteStrokeWidth={true}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|
|
|
|
<!-- <Sandpack
|
|
template="react"
|
|
:theme="sandpackTheme"
|
|
:files="absoluteStrokeWidth"
|
|
:customSetup='{
|
|
dependencies: {
|
|
"lucide-react": "latest"
|
|
}
|
|
}'
|
|
:options="{
|
|
editorHeight: 320,
|
|
editorWidthPercentage: 60,
|
|
}"
|
|
/> -->
|