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

pnpm install rocketicons

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:

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

Issue Reporting

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