Estoy tratando de obtener SVG en un archivo de objeto. luego usa SVG como este.
import {CustomIcons} from "./Icons" <CustomIcons name="FrameIcon" /> <CustomIcons name="VectorIcon" />Solo quiero importar un archivo y obtener un ícono personalizado basado en el nombre. He estado intentando esto durante horas y estoy perdido.
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> ), };Veo un par de problemas aquí, trataré de explicar tanto como pueda:
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> ), };import { FrameIcon } from './Icons'Cree una carpeta llamada Icon, cree los siguientes archivos en ella:
index.jsFrameIcon.jsxVectorIcon.jsx Su index.js debería exportar todos los íconos creados en esta carpeta, por ejemplo:
export * from './FrameIcon'; export * from './VectorIcon'; Su FrameIcon , por ejemplo, debería ser:
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 };Espero que esto ayude.
Debe definir CustomIcons como componente de función
Algo como esto debería funcionar
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; `