Quería importar demasiados íconos SVG en la aplicación y cada ícono requería un color personalizado a través de css, ¿cuál es la forma más fácil de importar para reaccionar? La importación a la <img/> no admitirá el cambio de color a través del relleno css. Crear un componente .js para cada ícono es demasiado difícil para más de 250 íconos. cual es la otra opcion Por favor ayuda
import IconArrow from "./Arrow.svg"; import Circlearrowdownright from "./Arrow.js"; <img className="ico" src={IconArrow} /> <i className="ico"><Circlearrowdownright /></i>Puede importar dinámicamente SVG y renderizar sobre la marcha ( CodeSandbox ). No es necesario crear un componente .js separado para cada archivo SVG.
el hook
function useDynamicSVGImport(name, options = {}) { const ImportedIconRef = useRef(); const [loading, setLoading] = useState(false); const [error, setError] = useState(); const { onCompleted, onError } = options; useEffect(() => { setLoading(true); const importIcon = async () => { try { ImportedIconRef.current = ( await import(`./${name}.svg`) ).ReactComponent; if (onCompleted) { onCompleted(name, ImportedIconRef.current); } } catch (err) { if (onError) { onError(err); } setError(err); } finally { setLoading(false); } }; importIcon(); }, [name, onCompleted, onError]); return { error, loading, SvgIcon: ImportedIconRef.current }; } Componente de Icon que usa el gancho
/** * Simple wrapper for dynamic SVG import hook. You can implement your own wrapper, * or even use the hook directly in your components. */ export const Icon = ({ name, onCompleted, onError, ...rest }) => { const { error, loading, SvgIcon } = useDynamicSVGImport(name, { onCompleted, onError }); if (error) { return error.message; } if (loading) { return "Loading..."; } if (SvgIcon) { return <SvgIcon {...rest} />; } return null; };Uso
return ( <> <Icon name="Arrow" fill="gray" width="100" onCompleted={handleOnCompleted} onError={handleIconError} /> <Icon name="delete" fill="gray" width="50" onCompleted={handleOnCompleted} onError={handleIconError} /> </> );React funciona bien con componentes web nativos. Solo cuando desea interactuar con ellos mediante eventos o pasar datos, React (todavía) no es compatible con el estándar: https://custom-elements-everywhere.com/
<svg-icon> es solo unas pocas líneas de código.replaceWith para que el <svg> que cargue reemplace el <svg-icon> , lo que facilita el trabajo con CSS global.shadowRoot para mover cualquier contenido A shadowDOM customElements.define("svg-icon", class extends HTMLElement { async connectedCallback( src = this.getAttribute("src"), shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"}) ) { shadowRoot.innerHTML = await (await fetch(src)).text() shadowRoot.append(...this.querySelectorAll("[shadowRoot]")) this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes) } }); body { display: grid; grid: 1fr/1fr 5fr; } path { stroke: green; stroke-width: .2; fill: red; } <svg-icon replaceWith src="https://svg-cdn.github.io/bi-arrows.svg"></svg-icon> <svg-icon src="https://svg-cdn.github.io/simple-worldmap.svg"> <style shadowRoot> path { fill: orange } </style> </svg-icon>Puede importarlo y usarlo como componente de React directamente:
import { ReactComponent as ExampleIcon} from './icons/ExampleIcon.svg'; <ExampleIcon className="css-class"/>