0.1.2 • Published 3 years ago
@tmnrp/react-material-icons v0.1.2
@tmnrp/react-material-icons
@tmnrp/react-material-icons is a lightweight latest treanding markup to display the google material icons.
Features
- Render icons with with ease.
Examples link
https://tmnrp.github.io/react-lib/
Installation link
$ npm i @tmnrp/react-material-icons
Properties
@tmnrp/react-material-icons is currently extended with the following properties.
Properties | type | Description |
---|---|---|
iconName | string | Name of the google material icon you want to render |
iconType | string | 'outlined', 'filled', 'rounded', 'sharp', 'two-tone' |
Implementation
import { ReactMaterialIcons } from "@tmnrp/react-material-icons";
const App = () => {
const [iconName, setIconName] = useState('search');
const [iconType, setIconType] = useState('outlined');
return (
<div>
<div>
<input
type="radio"
id="outlined"
name="mi"
value="outlined"
onChange={e => setIconType(e.target.value)}
/>
<label htmlFor="outlined">outlined</label>
<input
type="radio"
id="filled"
name="mi"
value="filled"
onChange={e => setIconType(e.target.value)}
/>
<label htmlFor="filled">filled</label>
<input
type="radio"
id="rounded"
name="mi"
value="rounded"
onChange={e => setIconType(e.target.value)}
/>
<label htmlFor="rounded">rounded</label>
<input
type="radio"
id="sharp"
name="mi"
value="sharp"
onChange={e => setIconType(e.target.value)}
/>
<label htmlFor="sharp">sharp</label>
<input
type="radio"
id="two-tone"
name="mi"
value="two-tone"
onChange={e => setIconType(e.target.value)}
/>
<label htmlFor="two-tone">two-tone</label>
</div>
<div>
<input
type="text"
value={iconName}
onChange={e => setIconName(e.target.value)}
/>
</div>
<ReactMaterialIcons iconName={`${iconName}`} iconType={iconType} />
</div>
);
};
Todos
- Let me know :-)
License
MIT Tony Martin