SVG props

index.html

<div id="root"></div>

script.babel

const ChevronRight = (props) => (
    <div {...props}>
        <svg  width={24} height={24} viewBox="0 0 24 24"  >
          <path 
            fill="#000000" 
            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
        </svg>
    </div>
);


class Chicken extends React.Component{
  
  constructor(props){
    super(props);
    this.state = {clicked: false}
     
  }
  handleClick=()=>{
        this.setState({ clicked: !this.state.clicked })
  }
 
  render(){
    const clicked = this.state.clicked ? 'clicked' : ''
    return (
      <ChevronRight 
        onClick={this.handleClick}
        className={`chevron ${clicked}`} />
    )
  }
}

ReactDOM.render(<Chicken options={[]} />, document.getElementById('root'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

style.css

.chevron{
  margin: 100px;
  width: 30px;
  transform: scale(2);
}
.chevron.clicked {
  transform: rotate(180deg) scale(2); 
  transition: all 200ms ease-in;
}

svg-props.markdown

SVG props

A Pen by Aaron Goldsmith on CodePen.

License.