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