How to Integrate and Use Icons in React Native Project

1. Install Dependencies

• The react-native-svg library is needed to handle SVG files in React Native. If you haven’t installed it yet, follow these steps: https://github.com/software-mansion/react-native-svg

npm install @itcase/icons @itcase/react-native-ui

• Сonfigure metro configuration to support packages with different exports (take configuration from other projects).

2. Using the Icon Component

• MyIcon.tsx

import { icon20 } from '@itcase/icons/default'
import { Icon } from '@itcase/react-native-ui'
import { ISvgComponent } from '../interfaces/app.interfaces'

const MyIcon = () => {
  return (
    <Icon
      SVGIcon={icon20.Dot as unknown as ISvgComponent}
    />
  );
}

The SVG icon is a string (file path or inline SVG), the react-native-svg library converts it to a component, so we cast it to type ISvgComponent.

3. Project Structure

src/
 ├── components/
 │  	└── MyIcon.tsx
 ├── interfaces/
 │  	└── app.interfaces.ts
 ├── types/
 │  	└── types.d.ts
 └── App.tsx

4. Defining Custom SVG Component Type

• app.interfaces.ts

import React from 'react'

import { SvgProps } from 'react-native-svg'

export interface ISvgComponent extends React.FC<SvgProps> {}

• types.d.ts

declare module '*.svg' {
  import React from 'react'
  import { SvgProps } from 'react-native-svg'

  const content: React.FC<SvgProps>
  export default content
}