0.2.7
  • Docs
  • Getting Started
  • Icons
Switch theme
GitHub
    Playground
  • Getting Started
    • Installation
    • Configuration
    • Customization
    • Contributing
  • Using The Icons
    • Adding Icons
    • Colors
    • Dark Mode
    • Responsive Design
    • Shortcuts
    • 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

Usage

What is shortcuts?

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">
<GrBugclassName="icon-sky-900-7xl dark:icon-sky-500-7xl" />
</div>

Usage

Use of shortcuts

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

<divclassName="mx-auto w-fit my-8">
<GrBugclassName="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">
<GrBugclassName="icon-sky-900 icon-6xl dark:icon-sky-500-6xl" />
</div>

Copyright © 2024 rocketclimb

DiscordGitHub