Is it possible to combine various SVG icons into a single component?

I am currently able to code SVGs in React-Native using typescript. This allows me to call them as individual react native components. Below is an example of my current capability:

<View>
    <BackArrow 
         color ="red"
         width = {10}
         height = {10}
    />
</View>

However, I am looking to create an "Icon" type with specific accepted names that will output SVGs. Here's an example of what I envision:

<View>
    <Icon
     name = "backArrow"
     color = "red"
     width = {10}
     height = {10}
    />
</View>

Is there a way to achieve this functionality?

typescriptreact-nativereact-native-svg

Answer №1

I have observed a method for achieving this by implementing a mapping function within the Icon component that utilizes lazy loading.

const icons = {
 backArrow: <BackArrow />
}

const Icon = ({name, ...otherProps}) => React.createElement(
  icons[name],
  [...otherProps],
  null
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for evaluating the stickiness of a block within a cell when it adheres to a mat-header-cell

I am working with an Angular table and facing an issue. How can I make the span element in the cells of the first column stick to the sticky mat-header-row when scrolling down the table? My requirement is for the span element to stay attached to the lower ...

angulartypescriptcss-tablessticky

Angular 12: Ensure completion of all data fetching operations (using forkJoin) prior to proceeding

Within my ngOnInit function, I am looking for a way to ensure that all requests made by fetchLists are completed before moving forward: ngOnInit(): void { this.fetchLists(); this.route.params.subscribe(params => { this.doSomethingWit ...

angulartypescriptecmascript-6

Troubleshooting overload errors within ReactJS: tips and tricks

import React from 'react' import { Link } from 'react-scroll' import "./Protocol.css" import { ANALYTICS, TRADE, USERS, TRADERS, VOTES, ZEROES } from "../../Constants" const Protocol = () => { return ( ...

javascriptreactjstypescriptreact-hooksreact-scroll

Using TypeScript will result in errors when attempting to use the Promise object and the Awaited keyword

In this example, I am trying to ensure that the function foo does not accept a Promise as an argument, but any other type should be acceptable. export {} function foo<T>(arg: T extends Promise<unknown> ? never : T) { console.log(arg); } asy ...

typescriptpromise

My reselect function seems to be malfunctioning - I'm not receiving any output. Can anyone help me

I'm looking to implement reselect in my code to retrieve the shopping cart based on product ids. Here's my reselect.ts file: import { createSelector } from "reselect"; import { RootState } from "../store"; export const shopp ...

reactjstypescriptreact-nativereduxreselect

Sending an array from the screen to a component

I'm facing an issue passing arrays (or variables) from my Screen (App.js) to populate another array in my Component. app.js: <SelectBoxPopUp values={brands}> </SelectBoxPopUp> component.js: import React from 'react'; import { ...

reactjsreact-native

Error receiving by React while updating an array with setState() in TypeScript

I am in search of a way to adjust a property of an item within an array by using the updater returned from setState. The function is passed down as props to the child, who then invokes it with their own index to update their status. const attemptToUpdate ...

javascriptreactjstypescriptreact-nativereact-hooks

Why does Typescript's 'await' seem to not wait as expected?

Apologies for the rookie mistake, I am currently transitioning from a C# background to Ionic, which may be causing some confusion on my end. I'm working on retrieving a stored token from Ionic storage but I'm struggling with understanding promise ...

angulartypescriptionic-framework

After the form submission, my Next.js component keeps rendering repeatedly in a cumulative manner

I am currently working on a memory game application using Next.js, Node.js, and Express.js. I seem to be encountering an issue specifically with the login page. Initially, there are no issues when submitting the form for the first time. However, after the ...

javascriptreactjstypescriptnext.js

Node is experiencing difficulty incorporating the AWS DynamoDB package into the project

Important Note: Although AWS SAM and DynamoDB are mentioned here, this question is primarily related to the AWS JavaScript SDK, or potentially just a Node/NPM query at its core. It should be answerable by anyone experienced in developing Node/JavaScript ap ...

node.jstypescriptamazon-web-servicesaws-lambdaamazon-dynamodb

Resolving TypeScript error when importing images statically in Next.js

In order to enhance the performance of images in my nextjs app, I am working on image optimization. However, I encountered an issue stating: Cannot find module '/images/homeBg.jpg' or its corresponding type declarations. The image is actually st ...

typescriptnext.jsnextjs-image

encountering a loading issue with angular2-modal in rc1 version

Currently, I am implementing a library called angular2-modal. This library offers various modal options including bootstrap and vex for angular 2. While vex is functioning properly, I encounter an error when switching to bootstrap: responsive-applicati ...

javascripttypescriptangularangular2-directives

Retrieve the current step index in Angular Material Design Stepper

In my endeavors to retrieve the selected step within a component utilizing Angular Material Design stepper, I am encountering some issues. My current approach involves using the selectedIndex property, but it consistently returns "1" instead of the desire ...

angulartypescriptangular-material

Creating a new component when a click event occurs in React

Currently diving into the world of React while working on a project that involves mapbox-gl. I'm facing an issue where I can successfully log the coordinates and description to the console upon hover, but I can't seem to get the popup to display ...

javascriptreactjstypescriptmapbox

Building a React Native authentication system using Next.js and NextAuth

I currently have a website that has authentication functionality implemented using Next.js, NextAuth, Prisma, and MySQL. My next step is to develop a React Native app for this website, but I'm uncertain about how to handle authentication. Should I ut ...

react-nativeauthenticationmobilenext.jsnext-auth

Rollup ESM creates faulty imports

I need to package a TypeScript React app as a component in an ES module or UMD, but the ES bundle generated is producing an invalid JS module. When bundling, I receive the following hints. However, I am unable to find a solution for this. (!) Missing glob ...

reactjstypescriptrollupjs

Performing simultaneous document queries within a single API in MongoDB

I am currently working with an API written in typescript and attempting to execute parallel queries for the same document by using Promise.allSettled. However, I have noticed that it is performing poorly and seems to be running sequentially instead of in p ...

javascriptmongodbtypescriptpromiseparallel-processing

Ways to implement distinct values for model and input field in Angular 5

I'm currently working on an Angular 5 application and I have a requirement to format an input field with thousand separators (spaces). However, the model I am using only allows numbers without spaces. Since my application is already fully developed, ...

javascriptangulartypescriptangular5

Encountering the error message "The argument type 'AsyncThunkAction<*>' cannot be assigned to the parameter type 'Action<any>'" while trying to utilize a custom typed useAppDispatch hook

For a live example, you can check out this link. In the process of developing a React application with TypeScript and Redux Toolkit, I have meticulously followed the guidelines outlined in the documentation. As a result, I have successfully implemented ty ...

reactjstypescriptreduxredux-toolkit

Problems with updating HTML/Typescript in Visual Studio and Chrome are causing frustration

While working on my company's application locally and making HTML/TS changes, I am facing an issue. Whenever I save/hot reload and refresh the browser, no changes seem to take effect. I've tried stopping debugging, building/rebuilding, and runni ...

htmltypescriptvisual-studio