@mxenabled/mx-icons 0.4.1 → 1.0.0

package/README.md

@@ -1,50 +1,77 @@
-# React + TypeScript + Vite
+# MX Icon Component Library (based on material symbols)
+#### @mxenabled/mx-icons
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+### Description
 
-Currently, two official plugins are available:
+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.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+### Config file
 
-## Expanding the ESLint configuration
+```json
+{
+  "weight": 300,
+  "size": 48,
+  "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 SVG 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
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+### 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)
 
-- Configure the top-level `parserOptions` property like this:
+### 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 />`
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
+- Dependencies
+  - React 19
+  - MUI 6
+- Installing MX Icon library
+  - npm `npm install @mxenabled/mx-icons`
+  - yarn `yarn add @mxenabled/mx-icons`
+#### Usage
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+##### Icon component
+  ```tsx
+  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 `300`)
+
+##### Named icon component
+  ```tsx
+  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

package/dist/index.d.ts

@@ -63,6 +63,8 @@ export declare const ExpandLess: ({ color, filled, size, sx }: MxIconProps) => J
 
 export declare const ExpandMore: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
 
+export declare const Favorite: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
+
 export declare const FilterAlt: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
 
 export declare const Flag: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
@@ -71,6 +73,8 @@ export declare const Flare: ({ color, filled, size, sx }: MxIconProps) => JSX.El
 
 export declare const FormatListBulleted: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
 
+export declare const Home: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
+
 export declare const HomeWork: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
 
 export declare const House: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
@@ -108,10 +112,12 @@ export declare const IconList: {
     error: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
     expand_less: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
     expand_more: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
+    favorite: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
     filter_alt: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
     flag: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
     flare: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
     format_list_bulleted: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
+    home: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
     home_work: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
     house: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;
     ios_share: ({ color, filled, size, sx }: MxIconProps) => JSX.Element;