@mxenabled/mx-icons

MX Icon Component Library (based on material symbols)

@mxenabled/mx-icons

Description

This library provides React components for a subset of material symbol icons. That subset of icons is defined in the config.json configuration file. Additional icons can be added by appended to the material_icons list and then running a script that will build new React components for the added icons.

Config file

{
  "weight": 400,
  "size": 24,
  "material_icon_type": "materialsymbolsrounded",
  "material_icons": [
    "account_balance",
    "add",
    "add_box",
    "wall_art",
    "wallet"
  ]
}

• weight - The line thickness to use for the material symbols [100-700]
• size - The optical DPS size [20, 24, 40, 48]
• material_icon_type - The type of icons [materialsymbolsoutlined, materialsymbolsrounded, materialsymbolssharp]
• material_icons - A list of material icon names to include in the library

Adding Icons

• Edit config.json file and add new material symbol icon name in pascal_case (keep list in alphabetical order)
  • See https://fonts.google.com/icons?icon.style=Rounded for full list of material symbol icons
• Run buildIcons.py to generate new components and add them to the IconList
  • Install requests python package: pip3 install requests
  • Run script: ./buildIcons.py
• Create MR
• Publish package after MR has been merged (will be automated in the future)

Using Icons

There are 2 ways to utilize the icons from this library. There is a backwards compatible <Icon /> component or directly using the named icon component <AccountBalance />

• Dependencies
  • React 18
  • MUI 5
• Installing MX Icon library
  • npm npm install @mxenabled/mx-icons
  • yarn yarn add @mxenabled/mx-icons

Usage

Icon component

import { Icon } from "@mxenabled/mx-icons";

<Icon name="account_balance" />

Props

• color (optional) - MUI Theme color (primary, secondary, success, error, etc)
• fill (optional) - True or False (Defaults to False)
• name (required) - material symbol name in pascal_case
• size (optional) - The font size of the icon (Defaults to 20)
• sx (optional) - MUI SX Prop
• weight (optional) - DEPRECATED - Weight is hardcoded in config (Defaults to 400)

Named icon component

import { AccountBalance } from "@mxenabled/mx-icons";

<AccountBalance />

Props

• color - MUI Theme color (primary, secondary, success, error, etc)
• filled (optional) - True or False (Defaults to False)
• size (optional) - The font size of the icon (Defaults to 20)
• sx (optional) - MUI SX Prop