• Docs
  • Getting Started
  • Icons
Switch theme
GitHub
  • Getting Started
    • Installation
    • Configuration
    • Customization
    • Contributing
  • Using The Icons
    • Adding Icons
    • Colors
    • Dark Mode
    • Responsive Design
    • Sizing Icons
    • Hover, Focus and Other States
    • Styling
  • Icons
    • rocketicons
    • Ant Design Icons
    • BoxIcons
    • Bootstrap Icons
    • css.gg
    • Circum Icons
    • Devicons
    • Font Awesome 5
    • Font Awesome 6
    • Flat Color Icons
    • Feather
    • Game Icons
    • Github Octicons icons
    • Grommet-Icons
    • Heroicons
    • Heroicons 2
    • IcoMoon Free
    • Ionicons 4
    • Ionicons 5
    • Icons8 Line Awesome
    • Lucide
    • Material Design icons
    • Phosphor Icons
    • Remix Icon
    • Radix Icons
    • Simple Icons
    • Simple Line Icons
    • Tabler Icons
    • Themify Icons
    • Typicons
    • VS Code Icons
    • Weather Icons
  • Roadmap

Introduction

Getting Started

Welcome to the documentation for rocketicons! This component provides a collection of icons for use in your React web and React Native projects.

rocketicons utilizes Tailwind CSS classes for styling, making it easy to customize and integrate into your applications.

Why it was created?

rocketicons was created to provide a simple and easy-to-use icon library for developers who wish to write a single code that can work both in React web and React Native.

We were motivated by the existence of great tools such as

Tailwind CSS, Expo, NativeWind and React Icons. These tools are great and we love them but we wanted to create an even easier experience for developers working with multiple platforms with the same codebase.

The icons are designed to be easily customizable and can be used in both web and mobile applications.

Write once, use everywhere!

Installation

To install rocketicons, simply run the following command in your terminal:

npm install rocketicons

or

pnpm install rocketicons

or

yarn install rocketicons

or even

bun install rocketicons

Boom!

Now that you have installed rocketicons in your project, you can proceed to the configuration.

Configuration

In order to use rocketicons in your projects, you need to have a minimum setup. You need to have tailwind on your project and, of course, the tailwind.config.js file. On that file, import the plugin and add it to the plugins array like this:

// tailwind.config.js import icons from "rocketicons/tailwind"; ... plugins: [ icons ], ...

After that, you can use rocketicons on your project.

Customization

rocketicons can be easily customized on every use using Tailwind classes to match your application's design.

You can also create React components on your project which extends the default component and add your custom styles.

Again, always using the Tailwind classes.

Global customization

You can define a global customization for all icons in two ways:

1. By redefining the default theme

  • Add a components element under the theme section of your tailwind.config.js and a icon element under the components element.

Like this:

{ components: { icon: { ... contents }, }, },
  • Inside the icon property, you must set all of the properties of our default theme as you want.
{ ... existing tailwind configs components: { icon: { default: "sky-500-base", baseStyle: "p-0 inline-block", variants: { filled: "", outlined: "", }, sizes: { base: "size-5", }, }, }, },

Remember, when using this method, you must define all properties and make sure the default size matches an available one, like shown above.

This is what our default theme looks like:

{ default: "sky-500-base", baseStyle: "p-0 inline-block", variants: { filled: "", outlined: "", }, sizes: { xs: "size-2", sm: "size-4", base: "size-5", lg: "size-6", xl: "size-7", "2xl": "size-8", "3xl": "size-9", "4xl": "size-10", "5xl": "size-11", "6xl": "size-12", "7xl": "size-14", }, },

2. By extending the default theme

If the default theme is fine and you just want to tweak some properties or add new variants or sizes, you can just extend the default theme.

Here is how you change the base size, for example:

{ ... existing tailwind configs components: { icon: { extend: { sizes: { base: "size-6", }, }, }, }, },

And here is how you create a brand new size:

{ ... existing tailwind configs components: { icon: { extend: { sizes: { myNewCoolGiantSize: "size-56", }, }, }, }, },

Cool, huh?

And you can do that to:

  • default
  • baseStyle
  • variants
  • sizes

You can't extend colors since they are not defined in the default theme and we just use the ones proved by Tailwind, which are A LOT.

Contributing

Here is how you can contribute to the project:

  1. Fork the repository on GitHub.
  2. Make your changes.
  3. Submit a pull request.

Issue Reporting

If you find a bug or have a feature request, please report it on the issues page.

Copyright © 2024 rocketclimb

DiscordGitHub