Chapter 100: Combining icons

Core Idea

Learn how to combine multiple icons into a single icon nested SVG elements in your React Native application.

Key Concepts

• With native SVG elements

Code Examples

import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { Scan, User} from "lucide-react-native";

const App = () => {
  return (
    <View style={styles.container}>
      <Scan size={48}>
        <User
          size={12}
          x={6}
          y={6}
          absoluteStrokeWidth
        />
      </Scan>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: '100%',
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'center'
  },
});

export default App;

• What it demonstrates: Combining icons usage pattern from the official Lucide docs.

Key Takeaways

1. With native SVG elements

Connects To

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