Chapter 94: Stroke width

Core Idea

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 absoluteStrokeWidth prop.

Key Concepts

• Adjusting stroke width with strokeWidth prop
• Absolute stroke width

Code Examples

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;

• What it demonstrates: Stroke width usage pattern from the official Lucide docs.

Key Takeaways

1. Adjusting stroke width with strokeWidth prop
2. Absolute stroke width

Connects To

• React Native: part of the React Native section of the Lucide docs.
• Lucide for React Native: overview page for this section.