# react-mutate-icon

> SVG Image Mutation using React

Latest version **1.0.3** (published 2017-12-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-mutate-icon
pnpm add react-mutate-icon
yarn add react-mutate-icon
bun add react-mutate-icon
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2017-12-09 |
| First published | 2017-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=6.0.0 |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aaron Reisman |
| Maintainers | lifeiscontent |
| Keywords | react, svg |

## Links

- npm: https://www.npmjs.com/package/react-mutate-icon
- Repository: https://github.com/lifeiscontent/react-mutate-icon
- Homepage: https://github.com/lifeiscontent/react-mutate-icon#readme
- Issues: https://github.com/lifeiscontent/react-mutate-icon/issues
- npm.io page: https://npm.io/package/react-mutate-icon

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2017-12-09
- 1.0.2 — 2017-12-04
- 1.0.1 — 2017-12-04
- 1.0.0 — 2017-12-04

## README

# ReactMutateIcon

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![Coverage Status](https://coveralls.io/repos/github/lifeiscontent/react-mutate-icon/badge.svg?branch=master)](https://coveralls.io/github/lifeiscontent/react-mutate-icon?branch=master)
[![Dev Dependencies](https://david-dm.org/lifeiscontent/react-mutate-icon/dev-status.svg)](https://david-dm.org/lifeiscontent/react-mutate-icon?type=dev)
[![Travis](https://img.shields.io/travis/lifeiscontent/react-mutate-icon.svg)](https://travis-ci.org/lifeiscontent/react-mutate-icon)
[![Greenkeeper badge](https://badges.greenkeeper.io/lifeiscontent/react-mutate-icon.svg)](https://greenkeeper.io/)
[![npm](https://img.shields.io/npm/v/react-mutate-icon.svg)](https://www.npmjs.com/package/react-mutate-icon)
[![license](https://img.shields.io/github/license/lifeiscontent/react-mutate-icon.svg)](https://github.com/lifeiscontent/react-mutate-icon/blob/master/LICENSE)
[![Donate](https://img.shields.io/badge/donate-paypal-blue.svg)](https://paypal.me/lifeiscontent)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/lifeiscontent/react-mutate-icon)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

SVG Image Mutation using React

### Usage

```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { MutateIcon, Mutate } from 'react-mutate-icon';
import SVGIcon from './logo'; // svg component built with svgr
import * as icons from './icons'; // object with key as string and value as svg component

export const Logo = props => (
  <MutateIcon component={SVGIcon} {...props}>
    <Mutate selector="g" fill="#BADA55" />
  </MutateIcon>
);

// or with with lots of icons
export const Icon = ({ name, ...props }) => (
  <MutateIcon component={icons[name]} {...props}>
    <Mutate selector="g" fill="#BADA55" />
  </MutateIcon>
);

Icon.propTypes = {
  name: PropTypes.string
};
```

### API

#### Props

**MutateIcon**

| name      | type          | description                                         |
| --------- | ------------- | --------------------------------------------------- |
| component | React.Element | the icon component to mutate                        |
| \*        | any           | all other props will be merged into the `component` |

**Mutate**

| name     | type   | description                                                                               |
| -------- | ------ | ----------------------------------------------------------------------------------------- |
| selector | string | the selector of the node to modify                                                        |
| \*       | any    | all other props that are passed will be merged into the element that matches the selector |

---
_Source: https://npm.io/package/react-mutate-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._