How to declare types of props of SVG component? [React, TypeScript and Webpack]

Question

Basically, what I want to do is to import an SVG icon to my react component and add props to it. Like size="24px" to make it more flexible as a component. Or make it editable with CSS by adding className prop (so I could add e.g. hover prop to it). As it's my first time using TypeScript with Webpack, I'm being confused about how should I declare types for SVG element and I get an error (shown below)

As there are many ways of include SVG I decided to import it as a ReactComponent.

menu-icon.svg

header.tsx (here I want my svg icon)

import React from 'react';
import MenuIcon from '../assets/menu-icon.svg';

const Header: React.SFC = () => {
  return (
    
        // <-- className prop doesn't match provided type
    
  );
};

export default Header;

index.d.ts (so the .svg file can be treated as a component)

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.SFC>;
  const src: string;
  export default src;
}

Adding className prop to MenuIcon SVG Component causes an error:

(JSX attribute) className: string
Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'className' does not exist on type 'IntrinsicAttributes'.ts(2322)

My understanding so far

I could just wrap svg component inside a div, and add a className to it like that: but I feel like it's an inelegant solution and not really a good practice
I learned from this answer that SVG props aren't strings, cuz they're an SVGAnimatedString objects. So:
I tried to create .tsx file instead of .svg (I wouldn't need index.d.ts file then), but it works only if className's type is string. Also I'm not sure if it's a good practice to store SVG icons in files with different extension that .svg. In my opinion it's not good for clarity. If I'm wrong, tell me what actually good practices are, please. Here's the example:

    import React from 'react';
    
    interface MenuIcon {
      className?: SVGAnimatedString;
    }
    
    export class MenuIcon extends React.PureComponent {
      render() {
        return (
          
        );
      }
    }

I feel like I'm in lack of some basics, It's just really hard for me to figure out what should I focus on, as there are several topics combined

user_7724011 · Answer

I've been facing this problem, and this solution worked fine for me:

declare module "*.svg" {
  import { ReactElement, SVGProps } from "react";
  const content: (props: SVGProps) => ReactElement;
  export default content;
}

Besides, I'm using @svgr/webpack as SVG loader along with Next.js

user_13243520 · Answer

You can parameterize svgs for easy JSX.Element level customization via global abstraction. How? Use React's FC. Try implementing the following:

Create the following interface

interface SvgIconConstituentValues {
    strokeColor?: string;
    strokeWidth?: string;
    strokeWidth2?: string;
    strokeWidth3?: string;
    strokeFill?: string;
    fillColor?: string;
    fillColor2?: string;
    fillColor3?: string;
    fillColor4?: string;
    fillColor5?: string;
    fillColor6?: string;
    fillColor7?: string;
    imageWidth?: string;
    imageHeight?: string;
    width?: string;
    height?: string;
    rotateCenter?: number;
    className?: string;
    className2?: string;
    className3?: string;
    className4?: string;
    className5?: string;
}

export default SvgIconConstituentValues;

import SvgIconConstituentValues into a tsx file
import { FC } from React into the same tsx file

import { FC } from 'react';
import SvgIconConstituentValues from 'types/svg-icons';

// FC can be parameterized via Abstraction

create an SvgIcon interface that extends FC and SvgIconConstituentValues

export interface SvgIcon extends FC {}

abstract the properties of an svg via parametrization with SvgIcon as follows

export const ArIcon: SvgIcon = ({
    width = '8.0556vw',
    height = '8.0556vw',
    strokeColor = `stroke-current`,
    strokeWidth = '2',
    fillColor = 'none',
    fillColor2 = `fill-primary`,
    rotateCenter = 0,
    className = ` antialiased w-svgIcon max-w-svgIcon`,
    className2 = ` stroke-current`,
    className3 = ` fill-primary`
}): JSX.Element => {
    return (
        
    );
};

As you can see, there are three separate className parameters (1, 2, 3) abstracted: (1) className for , property JSX.IntrinsicElements.svg: SVGProps; (2) className2 for property JSX.IntrinsicElements.circle: SVGProps; (3) className3 for property JSX.IntrinsicElements.path: SVGProps.
Notice that const ArIcon: SvgIcon = ({ ... }): JSX.Element => {...} is indeed a JSX.Element. Therefore, the itself and any children (circles, paths, etc) are all JSX.IntrinsicElements, each allowed to have its own unique className. These className calls were added manually to the svg, as was the transform call (to rotate the icon inline elsewhere).
the JSX Attribute className of JSX.IntrinsicElements is defined as follows

SVGAttributes.className?: string | undefined

Each JSX.IntrinsicElement is entitled to a className property. Have 100 paths and a circle within an svg? you can have 102 classNames that can be parameterized via abstraction.
Now for the best part. The following is from a file in my portfolio, I tinkered with abstracting svg parameters to make it play nicely with Dark mode toggling (use-dark-mode) and screen-width dependent icon rendering (@artsy/fresnel). You can import this Icon globally and call parameters inline within each JSX.Element without any props passing

import { ArIcon } from 'components/svg-icons';
import Link from 'next/link';
import { Media } from 'components/window-width';
import { Fragment } from 'react';
import DarkMode from 'components/lead-dark-mode';

const ArIconConditional = (): JSX.Element => {
    const arIconXs: JSX.Element = (
        
            
                
                    
                
            
        
    );

    const arIconSm: JSX.Element = (
        
            
                
                    
                
            
        
    );

    const arIconMd: JSX.Element = (
        
            
                
                    
                
            
        
    );

    const arIconDesktop: JSX.Element = (
        
            
                
                    
                
            
        
    );

    const ArIconsCoalesced = (): JSX.Element => (
        
            
                {arIconXs}
                {arIconSm}
                {arIconMd}
                {arIconDesktop}
            
        
    );
    return (
        
            
                
                
                    
                
            
        
    );
};

export default ArIconConditional;

This project uses tailwindcss and React's Next.js framework. That said, what if I wanted the JSX.IntrinsicElement circle encompassing the Icon to pulse on mobile only? add tailwind's animate-pulse to className2 as follows

// ...
    const arIconXs: JSX.Element = (
        
            
                
                    
                
            
        
    );
// ...

The fill-primary call is a css variable defined for both .dark-mode and .light-mode css classes which are then passed to :root and activated on the toggling of darkMode by the client (onChange={darkMode.toggle}).
So, onClick={darkMode.enable} triggers the icon to change its fillColor and strokeColor values as a function of css variables. Utilizing React's FC to parameterize props via abstraction produces a truly remarkable degree of granular control. Customizing SVGs using inline calls at the JSX.Element level globally has never been so seamless.
darkMode.disable

darkMode.disable

darkMode.enable

darkMode.enable

Check out my recent DEV post if hacking the react-fontawesome library using typescript and next to create custom fontawesome SVG Icons that persist to production and are unchanged by library version updates piques your interest.

Cheers

user_18051606 · Answer

This worked in the case of using Next.js

declare module "*.svg" {
    import {ReactElement, SVGProps} from "react";
    const ReactComponent: (props: SVGProps) => ReactElement;
    export {ReactComponent}
}

user_11313928 · Answer

This one worked for me:

declare module '*.svg' {
  const content: React.ElementType>;
  export default content;
}

Gabriels answer https://stackoverflow.com/a/65326058/11313928 lacks ref attribute.

user_8513339 · Answer

Since NextJS was overriding my custom.d.ts exported *.svg module, I ended up importing all svg files into one Icons.ts file, and typing them as follows:

import { ReactElement, SVGProps } from 'react';

import Rotate from './360.svg';
import Clock from './clock.svg';
import Close from './close.svg';
import Discord from './discord.svg';
import Github from './github.svg';
import Hamburger from './hamburger.svg';
import Location from './location.svg';
import Logo from './logo.svg';
import MapPin from './map-pin.svg';
import Medium from './medium.svg';

const importedIcons = {
  Rotate,
  Clock,
  Close,
  Discord,
  Github,
  Hamburger,
  Location,
  Logo,
  MapPin,
  Medium,
};

type IconName = keyof typeof importedIcons;
type ReactComponent = (props: SVGProps) => ReactElement;
export default importedIcons as Record;

Then when I want to use an icon, I can import it as follows, and intellisense picks up svg prop values.

import Icons from '~assets/icons/Icons';

...

...

Not the default configuration, but it works!

How to declare types of props of SVG component? [React, TypeScript and Webpack]

My understanding so far

5 Answers