Boxicons React

Boxicons React is a collection of React components designed to facilitate the integration of Boxicons icons.

Features

• Full TypeScript support
• Individual components for each icon
• Customization of size, color and style
• Support for solid and regular icons
• Icon rotation and flipping
• Vite integration

The icon list is the same as Boxicons, where you can get the required icon name

Installation

Install via npm

$ npm install boxicons-react

Import the required styles

App.tsx

import "boxicons-react/styles";

Use

Generic component BXIcon

import { BXIcon } from 'boxicons-react'

function App() {

  return (
    <div>
      <BXIcon
        name='sushi'
      />
    </div>
  )
}

This component requires the "name" prop to render the icon, which can be obtained from Boxicons

Individual icon component

import { GhostIcon } from 'boxicons-react'

function App() {

  return (
    <div>
      <GhostIcon />
    </div>
  )
}

To know how to import the components, change the icon name to PascalCase with the Icon suffix, for example: user-check => UserCheckIcon

Props

|Prop|Description|Required|Type|Example| |----|-----------|---------|----|-------| |name|Icon name|Only for BXIcon component|string|name="user-check"| |solid|Option to select a solid or regular icon, not available for all icons since not all have a solid version, logos don't have this version|No|boolean|solid=true| |size|Icon size, you can use default boxicons sizes or customize it with a number|No|"xs","sm","md","lg", number|size="sm" or size={40}| |rotate|Degrees the icon should rotate based on boxicons options|No|90, 180, 270|rotate={180}| |flip|Mirror mode based on boxicons options|No|"horizontal", "vertical"|flip="vertical"| |pull|Option to make the icon float|No|"left", "right"|pull="vertical"| |color|Base color of the icon|No|string|color="#FFF000"| |className|Class to customize the icon|No|string|className="anyClass"|