Icons Plugin

The Floro Icons Plugin is easiest to demonstrate & learn with video (see the demo video below). If you already know how the plugin works, please feel free to continue to the integration instructions.

Integrating Icons

We currently have integration documentation and instructions for React and React Native projects. While our React documentation uses Remix and Next for the example apps, most of the logic can be easily ported to any other React or React SSR project. Remix has far better (optimized) SSR support than Next, if you are looking to add support to an Express/React, we would strongly recommend using the Remix Demo for reference.

Despite only having Javascript integration instructions, Floro & the Icons Plugin are programming language & runtime agnostic. For custom integrations, you can use the Icons Generator we use in both demos or write your own custom generator.

Please use the Demo Repositories to find references to the platform specific APIs.

Features & Benefits

  • Standardize & centralize colors in your SVGs to colors found in your Palette Plugin.
  • Map palette colors in your SVGs to theme maps from your Theme Plugin.
  • Copy & paste icons across repositories in one click, as well as their referenced themes and palette colors.
  • Supports variants - Depending on the state of the icon (e.g. "hovered", "focused"), display a variant of the icon with the appropriate colors remapped.
  • Allow designers to commit - Let designers manage & test icons in your product without the need to setup a development environment, require git access, or know how to handle textual merge conflicts.
  • Universal API makes icons easily portable to DAM systems.
  • Make rebrands a breeze - When you centralize your palette & themes, updating your icons takes minutes rather than months.

Demo Video

The majority of the documentation can be found in the Github demo repositories shown above. This video is meant to show the general development flow of working with the Icons Plugin. However, the API details depends on the specific platform Floro is being used in.