React SVG Component using Objects

Question

I'm trying to get SVG's in a object file. then use SVG's like this.

import {CustomIcons} from "./Icons"

<CustomIcons name="FrameIcon" />
<CustomIcons name="VectorIcon" />

I just want to import one file and get a custom icon based on the name. I been trying this for hours and I'm lost

CustomIcon.tsx

export const CustomIcons = {
  FrameIcon: (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
        fill="#232323"
      />
    </svg>
  ),

  VectorIcon: (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69"
        fill="#232323"
      />
    </svg>
  ),
};

Answer 1

I see a couple of issues here, I'll try to explain as much as I can:

1. The type of the exported value (eg FrameIcon) is supposed to be a function For instance, your file should export this way:

export {
  FrameIcon: () => (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
        fill="#232323"
      />
    </svg>
  ),

  VectorIcon: () => (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69"
        fill="#232323"
      />
    </svg>
  ),
};

2. The import is supposed to be: import { FrameIcon } from './Icons'

Extra tip(s)

Create a folder called Icon, create the following files in it:

• index.js
• FrameIcon.jsx
• VectorIcon.jsx

Your index.js should export all the icons created in this folder, for instance:

export * from './FrameIcon';
export * from './VectorIcon';

Your FrameIcon for instance should be:

const FrameIcon = () => (
    <svg
      width="632"
      height="330"
      viewBox="0 0 632 330"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491"
        fill="#232323"
      />
    </svg>
  )

export { FrameIcon };

I hope this helps.

Answer 2

You should define CustomIcons as function component

something like this should work

import React from 'react';
const CustomIcons = (props) =>  {

 const icons = {
     FrameIcon : 
         <svg width="632" height="330" viewBox="0 0 632 330" fill="none" xmlns="http://www.w3.org/2000/svg" >
            <path d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C695.409 238.987 667.885 262.248 636.416 276.436C612.104 287.397 589.793 302.386 564.742 311.911C523.785 327.491" fill="#232323"/>
         </svg>,
     VectorIcon: 
         <svg width="632" height="330"  viewBox="0 0 632 330" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M460.923 -287.339L760.908 192.738C748.744 201.994 736.08 210.636 723.487 219.419C69" fill="#232323"/>
       </svg>
 }
 
 return <> 
   {icons[props.name]}
 </>

};

export default CustomIcons;
`