Flexible React package based on Google's Material Icons
npm install @nine-thirty-five/material-symbols-reactUse Google's Material Symbols (icons) in React with ease.
[![NPM version][npm-image]][npm-url]
[![Downloads][download-image]][npm-downloads]
![npm-typescript]
- Installation
- Usage
- Importing
- Component Props
- License
``shnpm
npm install @nine-thirty-five/material-symbols-react
Usage
provides three Material icon variants in both _default_ and _filled_ types.Icon variants are:
- Outlined
- Rounded
- Sharp
$3
There are two ways to import an icon based on your prefered type and variant.
`ts
// Outlined variant
import { Search } from '@nine-thirty-five/material-symbols-react/outlined';
import { Home } from '@nine-thirty-five/material-symbols-react/outlined/filled';// Rounded variant
import { Star } from '@nine-thirty-five/material-symbols-react/rounded';
import { Favorite } from '@nine-thirty-five/material-symbols-react/rounded/filled';
// Sharp variant
import { Delete } from '@nine-thirty-five/material-symbols-react/sharp';
import { Login } from '@nine-thirty-five/material-symbols-react/sharp/filled';
`$3
Icon component support all props that a React SVG component supports.
ts
// Sample props
``Material design icons are created by Google.
> We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.
[npm-url]: https://www.npmjs.com/package/@nine-thirty-five/material-symbols-react
[npm-image]: https://img.shields.io/npm/v/@nine-thirty-five/material-symbols-react
[download-image]: https://img.shields.io/npm/dm/@nine-thirty-five/material-symbols-react
[npm-downloads]: https://www.npmjs.com/package/@nine-thirty-five/material-symbols-react
[github-license]: https://img.shields.io/github/license/nine-thirty-five/material-symbols-react
[github-license-url]: https://github.com/nine-thirty-five/material-symbols-react/blob/master/LICENSE
[github-build]: https://github.com/nine-thirty-five/material-symbols-react/actions/workflows/publish.yml/badge.svg
[github-build-url]: https://github.com/nine-thirty-five/material-symbols-react/actions/workflows/publish.yml
[npm-typescript]: https://img.shields.io/npm/types/@nine-thirty-five/material-symbols-react
[license]: https://github.com/nine-thirty-five/material-symbols-react/blob/main/LICENSE