Icons in react-table

reactjs icons react-table react-table-v6
Orlyyn picture Orlyyn · Mar 14, 2018 · Viewed 7k times · Source

I've been struggling to find how I could display an icon in a Cell in a ReactTable (from the library react-table). All I could find is that it accepts HTML symbols. There's a lot of symbols, but what I'm looking for is to show flags...

Cell: () => (
  <span>&hearts;</span>
)

I already tried to use <i class='fa fa-cloud' /> for a test but I couldn't make it work.

Any ideas ?

Answer

Orlyyn picture Orlyyn · Mar 15, 2018

I found a library https://www.npmjs.com/package/react-flag-kit that gives FlagIcons to be used this way :

Cell: () => (
    <FlagIcon code="FR" size={20} />
)

React Icons <Icon /> can also be used in the Cell, but it does not contain any flags.

Related questions

Tab navigator icons in React Navigation

I'm using react-navigation v2 and react native vector icons. I'm trying to add an icon in a react native tab navigator. The icon shows up if its not in the tab navigator. The icon is not showing up in the …

Read More
How to use material community icons with react-native-vector-icons

I am trying to use the store-front icon in material community icons. However I get an error and it doesn't display the icon. This is my code: import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View } from "…

Read More
How can I set the size of icons in Ant Design?

So when I'm using an Icon in Ant Design it is always 14 * 14 px. Is there a way to set the size maual? Things like <Icon width={"20px"} type="setting" /> or <Icon style={{width: '20em'}} type="setting" /&…

Read More