Actualmente importo iconos como este
//index.ts file for svgs import BackArrow from './back-arrow.svg' export { BackArrow, ... }En un componente ahora puedo importarlo y usarlo fácilmente
import { BackArrow } from '../../assets/images' .... return <BackArrow />Ahora traté de crear un componente (secundario) que debería mostrar dos botones y un texto, que pasan por el componente principal.
El padre usa al niño así:
<Button label='hi' iconLeft={BackIcon} buttonTheme={BUTTONS_THEME.dark} />El niño se parece a:
//Styled components (ThemedButton, Icon, Label) const Button = ({ label, iconLeft, iconRight, theme}) => { <ThemedButton> {iconLeft && <Icon theme={theme} xml={iconLeft} />} <Label theme={theme}>{label}</Label> {iconRight && <Icon theme={theme} xml={iconRight} />} </ThemedButton> y todo funciona bien, si en el componente principal importo el svg de esta manera: import BackArrow from '../../assets/images/back-arrow.svg' pero quiero usar la forma "normal" de importar como lo hago en cualquier otro lugar de la aplicación, así: import { BackArrow } from '../../assets/images'
¿Alguien tiene idea de cómo solucionar esto? Traté de pasar los íconos como este <Button leftIcon={<BackArrow />}... /> , pero no puedo hacer que esto funcione, ya que no sé cómo puedo usar y diseñar el ícono en el niño .
Creo que lo que está tratando de hacer es usar su BackArrow en su hijo como <BackArrow />
El siguiente enfoque es para una aplicación CRA donde puede importar svg como ReactComponent
Resolví un problema similar siguiendo este enfoque.
la importación es como import { BackArrow } from './back-arrow.svg
Continúe pasándoselo al niño como
<Button label='hi' iconLeft={BackIcon} buttonTheme={BUTTONS_THEME.dark} />pero, ya en niño no desestructuras tus puntales,
const Button = (props) => { <ThemedButton> {props.iconLeft && <props.iconLeft ... />} <Label theme={props.theme}>{props.label}</Label> {props.iconRight && <props.iconRight ... />} </ThemedButton>EDITAR:
En el componente secundario, cuando tiene <props.iconLeft ... /> , esto es equivalente a <BackArrow /> , por lo que ahora es libre de diseñarlo, esencialmente trátelo de la misma manera que lo haría en el componente principal cuando tuviera <BackArrow /> . Destruir sus accesorios en el niño no funciona del todo aquí.
No sé qué está utilizando para sus procesos de compilación. pero probablemente se deba a los cargadores que usa para cargar svg. Si importa su svg de esta manera: import BackArrow from '../../assets/images/back-arrow.svg' , probablemente lo cargue como dataURL. Y si importa su svg de esta manera: import { BackArrow } from '../../assets/images' , se importa como componente de reacción. Por lo tanto, no puede usar esto como accesorios xml de un icono.