title: React TypeScript: Property 'class' does not exist on type 'SVGProps<SVGSVGElement>
body: <p>I want to animate an SVG but as soon as I add the SVG code to the react componant I get the error</p>
  
  <pre><code>Type '{ children: Element; class: string; viewBox: string; xmlns: string; }' is not assignable to type 'SVGProps&lt;SVGSVGElement&gt;'.
    Property 'class' does not exist on type 'SVGProps&lt;SVGSVGElement&gt;'.ts(2322)
  </code></pre>
  
  <p>and then </p>
  
  <pre><code>Type '{ children: Element[]; class: string; }' is not assignable to type 'SVGProps&lt;SVGGElement&gt;'.
    Property 'class' does not exist on type 'SVGProps&lt;SVGGElement&gt;'.ts(2322)
  </code></pre>
  
  <p>and further </p>
  
  <pre><code>Type '{ class: string; cx: string; cy: string; r: string; }' is not assignable to type 'SVGProps&lt;SVGCircleElement&gt;'.
    Property 'class' does not exist on type 'SVGProps&lt;SVGCircleElement&gt;'.ts(2322)
  </code></pre>
  
  <p>The SVG code im trying to use is at the bottom of this code block...</p>
  
  <pre><code>import React, { useContext, useEffect, useState } from 'react';
  import { ObjectInterface, XYInterface } from '../../components/interfaces';
  import { Dispatch, DRAW, Global } from '../../globalState';
  
  interface PropsInterface {
    selected: ObjectInterface;
  }
  
  const TimerInspector: React.FC&lt;PropsInterface&gt; = (props: PropsInterface) =&gt; {
    const { global } = useContext(Global);
    const { dispatch } = useContext(Dispatch);
    const [position, setPosition] = useState&lt;XYInterface&gt;({ x: 0, y: 0 });
    const [size, setSize] = useState&lt;XYInterface&gt;({ x: 50, y: 50 });
    const [seconds, setSeconds] = useState&lt;number&gt;(4);
    const [start, setStart] = useState&lt;boolean&gt;(false);
  
    const draw = () =&gt; {
      dispatch({ type: DRAW, value: Date.now() });
    };
  
    const slider = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      setSeconds(+event.currentTarget.value);
    };
  
    const changePosition = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      if (event.target.id === 'x') {
        setPosition({ x: +event.target.value, y: position.y });
        if (props.selected) {
          props.selected.position = { x: +event.target.value, y: position.y };
        }
      } else {
        setPosition({ x: position.x, y: +event.target.value });
        if (props.selected) {
          props.selected.position = { x: position.x, y: +event.target.value };
        }
      }
      draw();
    };
  
    const changeSeconds = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      let value = +event.currentTarget.value;
      if (value &gt; 240) value = 240;
      if (value &lt; 1) value = 1;
      setSeconds(+value);
    };
  
    const toggleStart = () =&gt; {
      setStart(!start);
    };
  
    const test = () =&gt; {
      console.log('fire');
    };
  
    useEffect(() =&gt; {
      setPosition({ x: props.selected.position.x, y: props.selected.position.y });
      setSize({ x:  props.selected.size.x, y:  props.selected.size.y });
    }, [props.selected.position]);
  
    return (
      &lt;React.Fragment&gt;
      &lt;div className='inspector--item-two'&gt;
      &lt;div className='inspector--description'&gt;Position&lt;/div&gt;
      &lt;input
        type='number'
        value={Math.floor(position.x)}
        id='x'
        onChange={changePosition}
      /&gt;
      &lt;input
        type='number'
        value={Math.floor(position.y)}
        id='y'
        onChange={changePosition}
      /&gt;
    &lt;/div&gt;
    &lt;div className='inspector--item-two'&gt;
      &lt;div className='inspector--description'&gt;Seconds&lt;/div&gt;
      &lt;input
        type='number'
        value={Math.floor(seconds)}
        min={1}
        max={240}
        onChange={changeSeconds}
      /&gt;
      &lt;input
      type='range'
      id='points'
      name='points'
      min='1'
      max='240'
      value={seconds}
      onChange={slider} /&gt;
      &lt;/div&gt;
  
      &lt;div className='inspector--item-two'&gt;
      &lt;div className='inspector--description'&gt;&lt;/div&gt;
      &lt;button onClick={toggleStart}&gt;{start ? 'Stop' : 'Start'}  &lt;/button&gt;
      &lt;button onClick={test}&gt;Test&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;svg class='base-timer__svg' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'&gt;
      &lt;g class='base-timer__circle'&gt;
        &lt;circle class='base-timer__path-elapsed' cx='50' cy='50' r='45'&gt;&lt;/circle&gt;
        &lt;path
          id='base-timer-path-remaining'
          stroke-dasharray='283'
          class='base-timer__path-remaining ${remainingPathColor}'
          d='
            M 50, 50
            m -45, 0
            a 45,45 0 1,0 90,0
            a 45,45 0 1,0 -90,0
          '
        &gt;&lt;/path&gt;
      &lt;/g&gt;
    &lt;/svg&gt;
      &lt;/React.Fragment&gt;
    );
  };
  
  export { TimerInspector };
  </code></pre>