Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rand0mc0d3r/material-ui-mix-icon
Combine 2 icons for status display, exception or variance presentation
https://github.com/rand0mc0d3r/material-ui-mix-icon
font-awesome fontawesome-icons fortawesome icon icons material-icons material-ui react reactjs
Last synced: about 2 months ago
JSON representation
Combine 2 icons for status display, exception or variance presentation
- Host: GitHub
- URL: https://github.com/rand0mc0d3r/material-ui-mix-icon
- Owner: rand0mC0d3r
- License: mit
- Created: 2020-04-12T07:34:09.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-04-13T13:18:13.000Z (over 4 years ago)
- Last Synced: 2024-04-24T19:33:31.602Z (9 months ago)
- Topics: font-awesome, fontawesome-icons, fortawesome, icon, icons, material-icons, material-ui, react, reactjs
- Language: JavaScript
- Size: 1000 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# material-ui-mix-icon - ``````
  
Combine **2 icons** for extra status display, exception notation or variance presentation.
**WHY**: When having a simple icon to describe one element, sometimes,
the element being flavored in specific ways needs a consistent way to
describe complex states; e.g:
- User vs User with Admin Privileges
- Server vs Server provisioned with K8s
- Email vs Email with Priority
- ...
---
#### Installation & Usage
```
npm install --save material-ui-mix-icon
```
##### Class React Component
```
import React, { Component } from 'react';
...
import ComposedIcon from 'material-ui-mix-icon';
class ExampleComponent extends Component {
render() {
return (
...
...
);
}
}
export default ExampleComponent;
```
##### Functional React Component
```
import React from 'react';
...
import ComposedIcon from 'material-ui-mix-icon';
const ExampleComponent = ({..., position, ...}) => (
...
...
)
...
export default ExampleComponent;
```
### Integration
##### The simple-embedded way (CDN reliant)
*NOTE:* Example based on the default project structure provided by facebook/create-react-app project
In ```public/index.html``` in the `````` section add:
```
```
eventually should look like this:
```
...
--- add this line
...
```
---
#### Configuration
Variables supported by the library and available knobs for customization. All enforced by PropTypes.
##### Required Properties
- *icon* - Supporting a string or a non `fa` object type
- *extraIcon* - Supporting a string or a non `fa` object type
##### Optional Properties
- *size* - selection from Material UI standard values: small, medium or large. Default: **small**
- *color* - inherited property from Material UI. Possible values: inherit, primary, secondary. Default: **inherit**
- *position* - Placement of extra icon. Possible values: top-start, top-end, bottom-start, bottom-end. Default: **bottom-end**
- *disabled* - Boolean to mark the disabled flag for the icon presentation. Default: **false**
---
#### Sample Usage
Simple usage in Material UI elements, as child element or startIcon or start/endAdornment:
Self contained component with example values:
```
```
Embedded in a button
```
}
>
Sample
```
Icon button usage:
```
```
Fab button usage:
```
```
And also in a field with adornment
```
),
}}
/>
```