Guides

Pick your launchpad

Every setup starts the same way: use an existing React or React Native project, initialize Rocketicons at its root, then add an exact icon ID. TypeScript and JavaScript projects are supported.

React

Import the generated component through the alias added to tsconfig.json:

Your build tool must understand the @ alias. If it does not read TypeScript paths automatically, mirror that alias in its configuration.

Next.js

Run the commands from the directory containing next.config.* and tsconfig.json. Next.js reads TypeScript path aliases, so the generated import can be used in a Server or Client Component wherever its surrounding code allows.

Vite

Run the commands beside vite.config.*. Keep the generated @/ri/* TypeScript path and configure Vite's @ alias if your starter does not already provide it.

Expo

Start with an Expo TypeScript or JavaScript project. Configure react-native-svg, NativeWind, and the Rocketicons Tailwind integration, then initialize and import the same local component. Metro must resolve your @ alias.

React Native

Rocketicons uses its generated native core with react-native-svg. Configure React Native SVG, NativeWind, Tailwind content paths, and alias resolution before rendering:

The CLI currently generates TypeScript/TSX only. It does not configure framework bundlers, Metro, NativeWind, or React Native SVG for you.