A guide to replacing or customizing standard components in ReactJS

I need to modify the color property of a common component so I can use it elsewhere.

const ViewAllIcon = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="18"
    height="18"
    viewBox="0 0 26 27"
    {...props}
  >
    <path
      fill="var(--primary)"
      d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C25 5.86 20.167 0 13 0z"
    />
    <path
      fill="#FFF"
      d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z"
    />
  </svg>
);

export default ViewAllIcon;

This component has default primary blue and white colors.

<ViewAllIcon className="ml8" fill="white green" />

I am using it to update the fill color to white and green. https://i.stack.imgur.com/8EaoP.png

javascriptcssreactjsnext.js

Answer №1

Update the fill value to "currentColor" and then pass the color variable to the component.

ViewAllIcon({ color: 'var(--primary)' })

or

<ViewAllIcon color={'var(--primary)'} />


const ViewAllIcon = (props) => (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="18"
        height="18"
        viewBox="0 0 26 27"
        {...props}
      >
        <path
          fill="currentColor"
          d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z"
        />
        <path
          fill="currentColor"
          d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z"
        />
      </svg>
    );
    
    export default ViewAllIcon;

Answer №2

Instead of passing props individually, you can directly assign them to the fill attribute.

This is how it could look:

const ViewAllIcon = (props) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="18"
    height="18"
    viewBox="0 0 26 27"
    {...props}
  >
    <path
      fill={props.fill} // <--- UPDATE HERE!
      d="M13 0C5.832 0 0 5.86 0 13.061c0 7.202 5.832 13.062 13 13.062s13-5.86 13-13.062C26 5.86 20.168 0 13 0z"
    />
    <path
      fill="#FFF"
      d="M14.764 13.061l-4.437-4.726c-.48-.512-.48-1.344 0-1.856s1.261-.512 1.742 0l5.357 5.708c.454.483.454 1.266 0 1.749l-5.357 5.707c-.48.512-1.261.512-1.742 0-.48-.512-.48-1.343 0-1.855l4.437-4.727z"
    />
  </svg>
);

export default ViewAllIcon;

See a working example here:

https://codesandbox.io/s/ancient-sun-r5zc1?fontsize=14&hidenavigation=1&theme=dark

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

Do you know if there is a setting in prettier that allows line breaks to be preserved?

Encountering an issue with the prettier extension in VS Code, Whenever I enter the following code: const result = await pool .request() .query('select NumberPlate, ID, TimeStamp from RESULTS order by ID'); and save the file, it con ...

javascriptexpressprettier

Notifications for AngularJS tabs

I need help finding a method to incorporate "tab notification" using AngularJS, in order to show that there are important alerts that require attention. For example: (1) (3) TAB_ONE TAB_TWO TAB_THREE Could you provide any recom ...

javascripthtmlcssangularjs

Angular factory variable scoping

I am encountering an issue with altering the folders variable (an array) within the return statement of my Angular factory. It seems to work for the create action, but I am having trouble with the scope of the variable in the factory. This code works: fo ...

javascriptangularjsunderscore.jsscopeangularjs-factory

What steps can I take to optimize my code and eliminate any redundancies?

In a current project, I need to make calls to three different endpoints. The functions handling these requests are identical except for the URLs being called. Below is an example of the code: const handleSubmitRequest = (e, next, endpoint, requestData) =&g ...

javascriptreactjs

Creating a custom Webpack 5 configuration for an Express application

I am facing an issue while setting up a new react app template using webpack 5 and express. Every time I run the build command, I encounter the following error: ✖ ｢wds｣: Invalid configuration object. Webpack has been initialized using a configuratio ...

reactjsexpresswebpackwebpack-dev-server

Developing a typescript React component with a generic callback event handler function passed as a prop

I'm struggling with developing a callback event handler function that can be passed down as a prop to my component. My objective: Allow users to provide a custom callback function that: always accepts the same argument an event (not a react/dom even ...

reactjstypescriptreact-typescript

Retrieving a function's output in React

Upon attempting to retrieve and log the res.data from my function, I encountered an issue where it returned as undefined. However, when I logged it from within the function, the result appeared normal. const getDefaultState = () => { axios .get ...

javascriptreactjsfunction

Issue encountered while retrieving JSON data from Github

I am currently using d3.json to retrieve a JSON link from the Enterprise GitHub (within the same repository/folder as the JavaScript file). d3.json("https://raw.github.exampleEnterprise.com/path/to/repo/data.json?token=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...

javascriptjqueryjsongitd3.js

When working with Web Workers in Jest, you may encounter an error stating "Cannot use 'import.meta' outside a module."

I'm currently developing a web application using nextjs 10.1.3. To improve performance, we have integrated a web worker on one of the pages and intend to add more workers in the future. All our code is thoroughly unit tested, and with the use of the w ...

reactjswebpackjestjsnext.jsbabel-jest

Trigger notifications exclusively for specific hyperlink texts that are selected

I'm facing an issue where I need to notify the user when a specific link text for a hyperlink is clicked. The code provided here showcases the problem I am currently encountering. At the moment, the alert triggers whenever any link text is clicked, ra ...

javascriptjqueryhyperlink

Ways to showcase the content of a page once the controller variables have been set

As someone who is just starting out with AngularJS and web development, I am curious to know if there is a way to delay the display of a page until after all of the controller's $scope variables have been initialized. Most of my $scope variables are c ...

javascriptnode.jsangularjsexpress

Setting breakpoints in Node-Inspector can be quite challenging

After successfully setting up a web application, I decided it was time to learn how to properly debug it without relying on console.log. To start, I ran Node-Inspector via node-debug server.js (the main script file) and attempted to set up a breakpoint wit ...

javascriptnode.jsdebuggingexpressnode-inspector

Interactive Icon Feature Instead of Annoying Pop-Ups in JavaScript

Hello there! I need assistance fixing a code issue. Currently, the code automatically pops up when the page is opened. Is there a way to make it clickable instead of popping up automatically? <script type="text/javascript" src="//www.klaviyo.com/media/ ...

javascriptjquery

What is the best way to share specific links on LinkedIn articles?

When the LinkedIn button is clicked, the entire link does not get passed when the image is clicked. However, the Facebook link works perfectly fine. The LinkedIn button used to work before, has anything changed since then? <div align="center"> < ...

javascripthtmlreactjslinkedin-api

What is the best way to determine groupings for a Fluent UI DetailList in a Next.js application?

I'm currently in the process of learning react, and I've encountered an issue with utilizing SWR for fetching items from an API and displaying them in groups using fluentui's DetailedList. The problem arises when trying to collapse/uncollaps ...

reactjsnext.jsfluent-ui

What are the best practices for dynamically handling variables in JavaScript?

I am looking to dynamically work with variables and store their references in a collection. My first question is: How can I save a variable reference (not its value) in a collection? For example: var apple = "A delicious fruit"; var banana = "A yellow f ...

javascriptjquery

How to showcase content on bootstrap across varying screen dimensions

When designing my website, I envisioned having three different options presented upon entering the site. Depending on the size of the screen, I wanted to display varying content. For XL screens, I wanted all content to be visible, similar to the picture. ...

htmlcssbootstrap-4bootstrap-5

What is the purpose of passing the Vuex store instance to the Vue constructor parameters?

index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {} }) app.js import Vue from 'vue' import store from &apos ...

javascriptvue.jsvue-componentvuexvue-router

Querying the database to check for the presence of a file in a .js file on Google App Engine

I'm currently working on implementing an upload button for users to upload files to our storage system using Google App Engine with Python, as well as HTML and JavaScript for the views. To achieve this, we have an HTML file and a.js script that promp ...

javascriptpythonhtmlgoogle-app-enginegql

The server tag is displaying an error due to incorrect formatting in the hyperlink data-binding section

I'm currently facing an issue with the formatting of my hyperlink. The text part of the hyperlink is working fine, which leads me to believe that the problem lies within the JavaScript. However, I am unable to pinpoint the exact issue. <asp:Templa ...

c#javascriptasp.netwebforms