0.1.2 • Published 3 years ago

@tmnrp/react-material-icons v0.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@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.

PropertiestypeDescription
iconNamestringName of the google material icon you want to render
iconTypestring'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

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago