ReactMutateIcon

SVG Image Mutation using React

Usage

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 |