Usage

What is shortcuts?

Name: rocketicons
Author: rocketclimb

Shortcuts are a combination of color and size utilities that allow you to change both properties at once.

<divclassName="mx-auto w-fit my-8">
<BiLockclassName="icon-sky-900-7xl dark:icon-sky-500-7xl" />
</div>

You don't need use shortcuts, icons utilities can be combined without any problem.

<divclassName="mx-auto w-fit my-8">
<BiLockclassName="icon-sky-900 icon-6xl dark:icon-sky-500 dark:icon-6xl" />
</div>

However, they can be very useful, especially with the use of variants, typing less code and making it clearer in the code what is being changed.

The code below renders the same result as the example above, but uses shortcuts in the dark variant.

<divclassName="mx-auto w-fit my-8">
<BiLockclassName="icon-sky-900 icon-6xl dark:icon-sky-500-6xl" />
</div>