Icons
FlexNative suite delivers more than 60 integrated font icons for its components.
The FlexNative Icons is part of the FlexNative and is available under the @flexnative/icons NPM package.
What Are Icon Fonts
Icon fonts are fonts which contain vector glyphs instead of letters and numbers. You can style them with CSS by using all styling properties that can be applied to a regular text in a modern browser.
Dependencies
Installation
You can installing FlexNative Icons packages using npm:
npm i @flexnative/icons
API
import Icon from '@flexnative/icons';
Component
A memoized functional component that renders an icon using the provided props.
Icon
Type: React.MemoExoticComponent<(props: IconProps) => React.JSX.Element>
Icons List
FlexNative Icons set contains 60 icons but you can create and use your own icon set. See section Custom Icons how to create and use your set of icons.
This article provides a complete list of the icons available in the icons font.
📄️ Basic Usage
To use a icon font, you have to make sure you import them into your project. Only after the font is loaded, you can use Icon set.
📄️ Custom Icons
@flexnative/icons package uses custom icon fonts created based on a IcoMoon.
📄️ Usecase Examples
The following example demonstrates the Icons in action.