#Buenos dias darayaq 1088 ¿Podrias
silver bloom
test
extraño, te había respondido y me saltó un error de que no podía responder :/
silver bloom
bueno, otra vez aunque ahora voy apurado
tengo un componente común y corriente y tengo un objeto con los svgs
const icons = {
eye: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="none"
viewBox="0 0 48 48"
>
<path
fill="#FFD200"
d="M46.4101 23.49c-1.7642-4.5635-4.827-8.5101-8.8098-11.3519-3.9828-2.84177-8.711-4.45424-13.6002-4.6381-4.8892.18386-9.6174 1.79633-13.6002 4.6381-3.98278 2.8418-7.04556 6.7884-8.80981 11.3519-.11914.3296-.11914.6904 0 1.02 1.76425 4.5635 4.82703 8.5101 8.80981 11.3519 3.9828 2.8418 8.711 4.4542 13.6002 4.6381 4.8892-.1839 9.6174-1.7963 13.6002-4.6381 3.9828-2.8418 7.0456-6.7884 8.8098-11.3519.1191-.3296.1191-.6904 0-1.02Zm-22.41 14.01c-7.95 0-16.35001-5.895-19.39501-13.5 3.045-7.605 11.44501-13.5 19.39501-13.5 7.95 0 16.35 5.895 19.395 13.5-3.045 7.605-11.445 13.5-19.395 13.5Z"
/>
<path
fill="#FFD200"
d="M24 15c-1.78 0-3.5201.5278-5.0001 1.5168-1.4801.9889-2.6336 2.3945-3.3148 4.039-.6812 1.6446-.8594 3.4542-.5122 5.2.3473 1.7458 1.2045 3.3495 2.4631 4.6082 1.2587 1.2586 2.8624 2.1158 4.6082 2.4631 1.7458.3472 3.5554.169 5.2-.5122 1.6445-.6812 3.0501-1.8347 4.039-3.3148C32.4722 27.5201 33 25.78 33 24c0-2.3869-.9482-4.6761-2.636-6.364C28.6761 15.9482 26.387 15 24 15Zm0 15c-1.1867 0-2.3467-.3519-3.3334-1.0112-.9867-.6593-1.7557-1.5963-2.2099-2.6927-.4541-1.0964-.5729-2.3028-.3414-3.4666.2315-1.1639.8029-2.233 1.6421-3.0721.8391-.8392 1.9082-1.4106 3.0721-1.6421 1.1638-.2315 2.3702-.1127 3.4666.3414 1.0964.4541 2.0334 1.2232 2.6927 2.2099C29.6481 21.6533 30 22.8133 30 24c0 1.5913-.6321 3.1174-1.7574 4.2426C27.1174 29.3679 25.5913 30 24 30Z"
/>
</svg>
),
tengo mi función:
export function About() {
<section className="about">
<div className="about-grid">
<div className="about-card">
<h3>Feature</h3>
<ul>
<li>
// acá me da el error de tipos
// que no puede ser un string!
<img src={icons.eye} alt="eye" className="about-svgs" />
<p>Visibility</p> </li>
</ul>
</div>
</div>
</section>
}
eso es más o menos
leaden shadow
es simple, no puedes pasarle una etiqueta svg al src
puedes usarla los svg de dos formas, una pasando ruta de donde esta el archivo svg como si fuese una imagen, y funcionara como una imagen normal
o dos, insertas el svg como elemento jsx, directamente, o sea no ocuparias la etiqueta img
por que svg como lo estas usando, ya es una etiqueta
por esso te da un error al intentar pasarlo al src
tambien puedes simplemente exportar el svg si los quieres tener todos en un lado, no es necesario que hagas el objeto y que una funcion te lo retorne
algo como esto:
export const eye =
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
fill="none"
viewBox="0 0 48 48"
>
<path
fill="#FFD200"
d="M46.4101 23.49c-1.7642-4.5635-4.827-8.5101-8.8098-11.3519-3.9828-2.84177-8.711-4.45424-13.6002-4.6381-4.8892.18386-9.6174 1.79633-13.6002 4.6381-3.98278 2.8418-7.04556 6.7884-8.80981 11.3519-.11914.3296-.11914.6904 0 1.02 1.76425 4.5635 4.82703 8.5101 8.80981 11.3519 3.9828 2.8418 8.711 4.4542 13.6002 4.6381 4.8892-.1839 9.6174-1.7963 13.6002-4.6381 3.9828-2.8418 7.0456-6.7884 8.8098-11.3519.1191-.3296.1191-.6904 0-1.02Zm-22.41 14.01c-7.95 0-16.35001-5.895-19.39501-13.5 3.045-7.605 11.44501-13.5 19.39501-13.5 7.95 0 16.35 5.895 19.395 13.5-3.045 7.605-11.445 13.5-19.395 13.5Z"
/>
<path
fill="#FFD200"
d="M24 15c-1.78 0-3.5201.5278-5.0001 1.5168-1.4801.9889-2.6336 2.3945-3.3148 4.039-.6812 1.6446-.8594 3.4542-.5122 5.2.3473 1.7458 1.2045 3.3495 2.4631 4.6082 1.2587 1.2586 2.8624 2.1158 4.6082 2.4631 1.7458.3472 3.5554.169 5.2-.5122 1.6445-.6812 3.0501-1.8347 4.039-3.3148C32.4722 27.5201 33 25.78 33 24c0-2.3869-.9482-4.6761-2.636-6.364C28.6761 15.9482 26.387 15 24 15Zm0 15c-1.1867 0-2.3467-.3519-3.3334-1.0112-.9867-.6593-1.7557-1.5963-2.2099-2.6927-.4541-1.0964-.5729-2.3028-.3414-3.4666.2315-1.1639.8029-2.233 1.6421-3.0721.8391-.8392 1.9082-1.4106 3.0721-1.6421 1.1638-.2315 2.3702-.1127 3.4666.3414 1.0964.4541 2.0334 1.2232 2.6927 2.2099C29.6481 21.6533 30 22.8133 30 24c0 1.5913-.6321 3.1174-1.7574 4.2426C27.1174 29.3679 25.5913 30 24 30Z"
/>
</svg>
y ya te funcionaria el svg de forma normal
como un elemento html/jsx
y puedes insentarlo asi:
import { eye } from 'ruta del archivo'
const Component = () => {
return (
<miOtroCodigo>
{eye}
</miOtroCodigo>
)
}
podrias ponerlo dentro de alguna etiqueta si quieres mas control sobre el
como un span
o bien, puedes retornarlo tambien con una funcion como hacias directamente desde la const como hice en el ejemplo, si de repente quieres colocarle parametros dinamicos como el className o cosas asi
silver bloom
disculpa que te respondo tarde, pero recién me pongo con esto ahora. Creo que comprendo lo que dices, pero olvidé mencionar algo. El objeto que cree, era porque quería poner varios svg, e ir los llamando con un map
leaden shadow
disculpa que te respondo tarde, pero recién me pongo con esto ahora. Creo que c...
Puedes hacerlo igual de esa manera, si lo necesitas de esa forma, solo era una acotacion a que podias hacerlo sin objeto
silver bloom
claro, lo entiendo. Es qeu lo he querido hacer así porque es una pagina donde hay que mostrar un listado y cada elemento del listado tiene en vez de una bullet, un icono.
Y tienes alguna idea en este caso cómo se hace el tipeo, para salir de ese error?